Speedometer Chart Control

[psamuels56]

I have a customer who requested an application where one of the "charts" would display like a speedometer. It doesn't really have to look exactly like a spedometer. I'd just like to have a circle (or semi-circle) where, 0-33% is red, 34-67% is yellow or 68-100% is green (not sure of the percentages, but that the basic). I've attached an image showing a series of chart spedometers, just so that you get an idea of what it might look like.

If anyone has any experience designing an Alpha 5 chart (or other view) with that kind of control, I'd appreciate your suggestions.

Thanks,
Phil

Speedometer.png

[Steve Workings]

Re: Speedometer Chart Control

I have no idea if this can be done with A5's internal charting or not, but I'm very familiar with FusionCharts. Their Angular Gauge would be nice here. I use this particular chart quite a bit.

http://www.fusioncharts.com/demos/gallery/#gauges

[psamuels56]

Re: Speedometer Chart Control

Steve, thanks so much for the quick reply. I appreciate it very much. Those fusion chart gauges look great. My only question is how could I integrate one of those gauges into my grid, form or report, so that the gauge reflects the value? I'm not an XBasic expert (but I have a "subscription" so I have all of the feature packs). I'd gladly pay for the code that would embed gauge into my application... or if there's a video, etc. that explains it, that would be great.

Thanks for all the help you give to all of us that are learning Alpha 5.

With appreciation,
Phil

[Steve Workings]

Re: Speedometer Chart Control

Below is a complete set of code to emit an Angular Gauge onto an .a5w page. It may look like a lot of code to non-coders, but it's pretty simple once you start into it, and the FusionCharts site offers complete documentation. You'll notice the part I colored red that shows the return of a_Data. This particular chart only requires a single value, so you use Xbasic to establish that value; exactly how it's done depends on your app and design, but there are probably at least 5 ways.

Keep in mind too that FusionCharts display as flash files, with fallback to javascript. They don't offer much in the way of a printable graphic for reports -- for that you'd want to see about A5's graphics.

       <div align="center"" id="chartContainer">FusionWidgets will load here</div>
        <script type="text/javascript"><!--
                var myChart = new FusionCharts("Charts/AngularGauge.swf", "myChartId", "225", "105", "0", "1");
                myChart.setXMLData("<chart lowerLimit='0' upperLimit='5' " +
						"gaugeInnerRadius='2' gaugeOuterRadius='52' baseFontSize='14' valueBelowPivot='0' manageResize='1' " + 
                        "numberSuffix='' showValue='1' >" +
                        "<colorRange>" +
                        "<color minValue='0' maxValue='2' code='FF654F'/>" +  
                        "<color minValue='2.01' maxValue='3.5' code='F6BD0F'/>" + 
                        "<color minValue='3.51' maxValue='5' code='8BBA00'/>" +
                        "</colorRange>" +
                        "<dials>" +
                        "<dial value='[COLOR="#B22222"]<%A5 ?a_Data %>[/COLOR]' baseWidth='15' topWidth='3' bgColor='000000' radius='49' valueX='25' valueY='22'  />" +
                        "</dials>" +
                        "</chart>");
                myChart.render("chartContainer");
        // -->
        </script>

[jacobe]

Re: Speedometer Chart Control

I'm not sure if this will apply to Alpha 5, as I haven't really tried the graphing tools...

In Excel a common method is to use the pie and donut charts to make speedometer/gauge displays. In it's simplest form you would make the bottom 50% white and adjust the top values to be the needle/display (there are quite a few tutorials on the internet if you want to investigate this further).

[psamuels56]

Re: Speedometer Chart Control

Hi Steve-

That looks like it will be excellent.

I created an a5w page to test it out, but the speedometer doesn't show up. For "test purposes", I replaced <%A5 ?a_Data %> with just a numeric value (just as a test so that I can see what it looks like), but when I "publish" the page, all I see is the message "FusionWidgets will load here" and the rest of the page is blank. In looking at the FusionWidgets documentation, I thought it had to do with the FusionCharts.js file and the "Charts" directory, so I placed that file into the "javascript" folder in the application's folder in A5webroot and I placed the "Charts" folder into the application's folder in A5webroot,as well. I even made a reference to that file in the "head" of my a5 page (see code below), but all I get is a white page with the heading. Does the .js file have to be "registered" in any way?

Anyway, I'll keep plugging away with the FusionCharts documentation, but if you have any suggestions, I'd appreciate it.

I know this is an imposition on you and I really do appreciate your thoughts and your help. Thank you so much.
Phil

<!doctype html>
<html>
<head>
<meta name="generator" content="Alpha Five HTML Editor Version 11 Build 3381-4096">
<!-- must use in order to make XP Themes render -->
<meta HTTP-EQUIV="MSThemeCompatible" content="Yes" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="fusioncharts.js"></script>

<title></title>
</head>
<body>
<div align="center" id="chartContainer" "="">FusionWidgets will load here</div><script type="text/javascript"><!--
var myChart = new FusionCharts("Charts/AngularGauge.swf", "myChartID", "225", "105", "0", "1");
myChart.setXMLData("<chart lowerLimit='0' upperLimit='5' " +
"gaugeInnerRadius='2' gaugeOuterRadius='52' baseFontSize='14' valueBelowPivot='0' manageResize='1' " +
"numberSuffix='' showValue='1' >" +
"<colorRange>" +
"<color minValue='0' maxValue='2' code='FF654F'/>" +
"<color minValue='2.01' maxValue='3.5' code='F6BD0F'/>" +
"<color minValue='3.51' maxValue='5' code='8BBA00'/>" +
"</colorRange>" +
"<dials>" +
"<dial value='25' baseWidth='15' topWidth='3' bgColor='000000' radius='49' valueX='25' valueY='22' />" +
"</dials>" +
"</chart>");
myChart.render("chartContainer");
// -->
</script>

[psamuels56]

Re: Speedometer Chart Control

Hi Jacob-

Thanks for taking the time to write... I'll check it out and see if I can make that work for me.

Phil

[Steve Workings]

Re: Speedometer Chart Control

Phil - your code works well for me.

1. Note that the javascript file should not be in the javascript folder, but in the A5Webroot folder, so you should move that.

2. Your code above doesn't have this at the end -- I don't know if it's on your page or not:

</body></html>

3. While the chart will work, you'll note that you specified a value of 25, but the example snippet here expects a range between 0 and 5 so it'll simply display a little oddly.

[psamuels56]

Re: Speedometer Chart Control

Steve-

Thanks so much for continuing to try to help. 3 frustrating hours later, I still can't get the widget to display in my application. I've tried dozens of permutations and used variances shown in FusionCharts' documentation, but, the best I could come up with is the "Fusion Chart will Display here" message with a blank white page.

I've attached a Word Document that will show you images of my a5w page as well as where I'm placing the FusionCharts javascript files.

I know this is a pain for you, but this is an opportunity for a decent project for me and this is the only missing piece before I can bid on it (otherwise I'd have given up long ago).

Any suggestions you can give (or if you want to send me elsewhere for assistance) would be appreciated.

Thanks,
Phil

[Steve Workings]

Re: Speedometer Chart Control

Do you have security on? Have you allowed for .swf in your security?

Web Security / Page Security / File Types Always Allowed

Also, I really can't tell for sure what you're doing with the webroot. In a "perfect" situation, you would have:

C:\a5Webroot
this would contain your fusioncharts.js

C:\a5Webroot\Charts
this contains your charts

You'll have to use this information to apply it to what you're doing -- I can't tell. Where are you located? We could do a Team Viewer session and get you fixed up.

[njguy]

Re: Speedometer Chart Control

Phil,

This does not help in your current efforts but take a look at the video for a version 12 feature...

http://www.ajaxvideotutorials.com/V1...zationInUX.swf

[psamuels56]

Re: Speedometer Chart Control

Tom-

Thanks for sending that. Very exciting. I think it would have worked perfectly for what I need. I'm a subscriber, so it's just another reason to anxiously await the next version. I really appreciate your response.

Phil

[psamuels56]

Re: Speedometer Chart Control

Hi Steve-

"Yes," I do have security on and "Yes" I have allowed SWF files.

I tried all of the permutations of where to place the fusioncharts.js file(s). I should get an "E" for effort (but an "F" for success).

I appreciate your offer to do a Team Viewer session... I'm in Buffalo, NY and if you could spend a couple of minutes to help me out, I'd sure appreciate it.

Let me know when you can spare a couple of minutes for me.

Thanks so much.

Phil

[nxlcomputers]

Re: Speedometer Chart Control

Steve,

I have downloaded the trial version of FusionCharts and I'm trying to get it to display the chart you outlined in your code. Would you mind posting your xbasic code for the 'a_data' value? Thank you for the information you've shared so far. I'm struggling to find a good charting tool to supplement my Alpha projects.

Andrew

[Steve Workings]

Re: Speedometer Chart Control

I don't visit the v11 forum very much, stumbled across this by pure chance. All you really need to do is get any value assigned -- how you do it is heavily based on your data and display needs. In the example below, every time a trainer spends *any* time with an animal, the interaction is recorded as a "session" and sessions get rated from 1-5. This Xbasic gets the average rating for the day for a specified animal.

dim cn as sql::Connection
dim args as sql::Arguments
dim rs as sql::ResultSet
dim a_data as n = 0
dim Rating as n = 0
dim Record_Ct as n = 0
cn.open("::Name::conn")
args.set("animal_id", convert_type(session.animalID, "N"))
args.set("sd", Facility_LocalDate())

sql = <<%a%
SELECT rating 
FROM SessionData
WHERE animal_id = :animal_id and session_type is not null and isnull(duration,0) > 0 and isnull(rating,0) > 0 and start_date = :sd  and void <> 1  and session_type <> '' and session_type <> 'Enrichment'
%a%

flag = cn.execute(sql, args)

if flag = .f.
	goto fEnd
end if

rs = cn.ResultSet
flag = rs.nextrow()

while flag
	Rating = Rating + convert_type(rs.data(1), "N")
	Record_Ct = Record_Ct + 1
	flag = rs.nextrow()
end while

a_Data = round(Rating / Record_Ct,1)
fEnd:
cn.FreeResult()
cn.close()