Basic example of Google Charts with DataFlex WebApp: Difference between revisions
Basic example of Google Charts with DataFlex WebApp (view source)
Revision as of 22:29, 26 March 2020
, 26 March 2020Addendum
(Adding some text) |
(Addendum) |
||
| Line 306: | Line 306: | ||
[[File:GoogleChartsDemo-20200326.zip]] | [[File:GoogleChartsDemo-20200326.zip]] | ||
===Addendum...=== | |||
Never one to leave well enough alone, I have been playing further... | |||
In the JavaScript, I extended the "switch" statement in the chartDef function as follows: | |||
<source lang=javascript> | |||
switch (obj.psChartType) { | |||
case "PieChart": | |||
chart = new google.visualization.PieChart(obj._eControl); | |||
break; | |||
case "BarChart": | |||
chart = new google.visualization.BarChart(obj._eControl); | |||
break; | |||
case "AreaChart": | |||
chart = new google.visualization.AreaChart(obj._eControl); | |||
break; | |||
case "ColChart": | |||
chart = new google.visualization.ColumnChart(obj._eControl); | |||
break; | |||
case "LineChart": | |||
chart = new google.visualization.LineChart(obj._eControl); | |||
break; | |||
case "ScatterChart": | |||
chart = new google.visualization.ScatterChart(obj._eControl); | |||
break; | |||
default: | |||
chart = new google.visualization.PieChart(obj._eControl); | |||
} | |||
</source> | |||
In order to include more chart types. | |||
In the DataFlex class, all that changed was the definition of some new constants: | |||
<source lang=dataflex> | |||
Define C_chartTypePie for "PieChart" | |||
Define C_chartTypeBar for "BarChart" | |||
Define C_chartTypeArea for "AreaChart" | |||
Define C_chartTypeScat for "ScatterChart" | |||
Define C_chartTypeLine for "LineChart" | |||
Define C_chartTypeCol for "ColChart" | |||
// etc... | |||
</source> | |||
Then in the sample view (Chart.wo), I got rid of the button and just had the radio controls themselves set things off: | |||
<source lang=dataflex> | |||
Use cWebView.pkg | |||
Use cWebPanel.pkg | |||
Use cWebForm.pkg | |||
Use cWebButton.pkg | |||
Use cWebChart.pkg | |||
Use cWebRadio.pkg | |||
Object oChart is a cWebView | |||
Set piWidth to 1000 | |||
Set psCaption to "Chart" | |||
Delegate Set phoDefaultView to Self | |||
Object oWebMainPanel is a cWebPanel | |||
Set piColumnCount to 12 | |||
Object oPie is a cWebRadio | |||
Set piColumnSpan to 2 | |||
Set psCaption to "Pie Chart" | |||
Set psRadioValue to C_chartTypePie | |||
Set pbServerOnChange to True | |||
Procedure OnChange | |||
Send DrawChart | |||
End_Procedure | |||
Procedure OnLoad | |||
Send DrawChart | |||
End_Procedure | |||
End_Object | |||
Object oBar is a cWebRadio | |||
Set piColumnSpan to 2 | |||
Set piColumnIndex to 2 | |||
Set psCaption to "Bar Chart" | |||
Set psRadioValue to C_chartTypeBar | |||
End_Object | |||
Object oArea is a cWebRadio | |||
Set piColumnSpan to 2 | |||
Set piColumnIndex to 4 | |||
Set psCaption to "Area Chart" | |||
Set psRadioValue to C_chartTypeArea | |||
End_Object | |||
Object oColumn is a cWebRadio | |||
Set piColumnSpan to 2 | |||
Set piColumnIndex to 6 | |||
Set psCaption to "Column Chart" | |||
Set psRadioValue to C_chartTypeCol | |||
End_Object | |||
Object oLine is a cWebRadio | |||
Set piColumnSpan to 2 | |||
Set piColumnIndex to 8 | |||
Set psCaption to "Line Chart" | |||
Set psRadioValue to C_chartTypeLine | |||
End_Object | |||
Object oScatter is a cWebRadio | |||
Set piColumnSpan to 2 | |||
Set piColumnIndex to 10 | |||
Set psCaption to "Scatter Chart" | |||
Set psRadioValue to C_chartTypeScat | |||
End_Object | |||
Procedure DrawChart | |||
String sType | |||
Send Initalize of oChart | |||
WebGet psValue of oPie to sType | |||
WebSet psTitle of oChart to "How Much Pizza I Ate Last Night" | |||
WebSet piChartHeight of oChart to 500 | |||
WebSet piChartWidth of oChart to 600 | |||
WebSet psChartType of oChart to sType | |||
Send AddColumn of oChart "Topping" jsonTypeString | |||
Send AddColumn of oChart "Slices" jsonTypeInteger | |||
Send AddData of oChart "Mushrooms" 6 | |||
Send AddData of oChart "Onions" 3 | |||
Send AddData of oChart "Olives" 2 | |||
Send AddData of oChart "Frogs Legs" 1 | |||
Send AddData of oChart "Pepperoni" 4 | |||
Send AddData of oChart "Anchovies" 5 | |||
Send DrawChart of oChart | |||
End_Procedure | |||
Object oChart is a cWebChart | |||
End_Object | |||
End_Object | |||
End_Object | |||
</source> | |||
Note that we only really have to add stuff to one of the radio (OK, ''cWebRadio''!) objects, because they all operate as a set, so oBar, oArea and friends are just vanilla radio objects, while oPie has the added Set pbServerOnChange, OnChange procedure and OnLoad procedure and is the one the DrawChart procedure WebGets the psValue of to know what kind of chart to produce. | |||
Now the Pie Chart will be displayed when the view loads, while the various chart types will be shown as the user clicks on the appropriate radio buttons. | |||
=== External links === | === External links === | ||