Module: GoogleChart

Share your advanced knowledge/code with the community.
User avatar
Peter
Posts: 1086
Joined: Mon Feb 24, 2014 10:17 pm
Location: 127.0.0.1:9080
Contact:

Module: GoogleChart

Post by Peter »

Hello,

here is my first attempt of a GoogleChart-Module: https://github.com/spiderbytes/GoogleChart

Image

Have fun ... Peter

// Edit: Removed code; added GitHub-Link
Last edited by Peter on Tue Jul 11, 2017 8:57 am, edited 1 time in total.
bbanelli
Posts: 107
Joined: Mon Jul 13, 2015 7:40 am

Re: Module: GoogleChartGadget

Post by bbanelli »

Dear Peter,

what would be the best way to put chart into a current gadget? Panel, for example?

With my best,

Bruno
"If you lie to the compiler, it will get its revenge."
Henry Spencer
http://www.pci-z.com/
User avatar
Peter
Posts: 1086
Joined: Mon Feb 24, 2014 10:17 pm
Location: 127.0.0.1:9080
Contact:

Re: Module: GoogleChartGadget

Post by Peter »

@Bruno:

Code: Select all

EnableExplicit

Enumeration ; Windows
  #myWindow
EndEnumeration
Enumeration ; Gadgets
  #myPanel
  #PieChart
  #LineChart
EndEnumeration

Procedure DrawPieChartExample()
  
  ; ------------------------------------
  ; PieChart
  ; https://google-developers.appspot.com/chart/interactive/docs/gallery/piechart
  ; ------------------------------------
    
  ; Set Options
  
  Protected ChartOptions
  
  ! v_chartoptions = { 'title' : 'How Much Pizza I Ate Last Night' };
  
  GoogleChart::SetChartGadgetAttribute(#PieChart, GoogleChart::#ChartGadgetOptions, ChartOptions)
  
  ; Set Data
  
  Protected ChartData
  
  ! v_chartdata = new google.visualization.DataTable();
  ! v_chartdata.addColumn('string', 'Topping');
  ! v_chartdata.addColumn('number', 'Slices');
  ! v_chartdata.addRows([
  !   ['Mushrooms', 3],
  !   ['Onions', 1],
  !   ['Olives', 1], 
  !   ['Zucchini', 1],
  !   ['Pepperoni', 2]
  ! ]);
  
  GoogleChart::SetChartGadgetAttribute(#PieChart, GoogleChart::#ChartGadgetData, ChartData)
  
EndProcedure

Procedure DrawLineChartExample()
  
  ; ------------------------------------
  ; LineChart
  ; https://google-developers.appspot.com/chart/interactive/docs/gallery/linechart
  ; ------------------------------------
  
  ; Set Options
  
  Protected ChartOptions
  
  ! v_chartoptions = {
  !    hAxis: { title: 'Time' },
  !      vAxis: { title: 'Popularity' }
  !   };
  
  GoogleChart::SetChartGadgetAttribute(#LineChart, GoogleChart::#ChartGadgetOptions, ChartOptions)
  
  ; Set Data
  
  Protected ChartData
  
  ! v_chartdata = new google.visualization.DataTable();
  
  ! v_chartdata.addColumn('number', 'X');
  ! v_chartdata.addColumn('number', 'Dogs');
  
  ! v_chartdata.addRows([
  !   [ 0,  0], [ 1, 10], [ 2, 23], [ 3, 17], [ 4, 18], [ 5,  9],
  !   [ 6, 11], [ 7, 27], [ 8, 33], [ 9, 40], [10, 32], [11, 35],
  !   [12, 30], [13, 40], [14, 42], [15, 47], [16, 44], [17, 48],
  !   [18, 52], [19, 54], [20, 42], [21, 55], [22, 56], [23, 57],
  !   [24, 60], [25, 50], [26, 52], [27, 51], [28, 49], [29, 53],
  !   [30, 55], [31, 60], [32, 61], [33, 59], [34, 62], [35, 65],
  !   [36, 62], [37, 58], [38, 55], [39, 61], [40, 64], [41, 65],
  !   [42, 63], [43, 66], [44, 67], [45, 69], [46, 69], [47, 70],
  !   [48, 72], [49, 68], [50, 66], [51, 65], [52, 67], [53, 70],
  !   [54, 71], [55, 72], [56, 73], [57, 75], [58, 70], [59, 68],
  !   [60, 64], [61, 60], [62, 65], [63, 67], [64, 68], [65, 69],
  !   [66, 70], [67, 72], [68, 75], [69, 80]
  ! ]);
  
  GoogleChart::SetChartGadgetAttribute(#LineChart, GoogleChart::#ChartGadgetData, ChartData)
 
EndProcedure

Procedure myPanelEvent()
  
  Select GetGadgetState(#myPanel)
    Case 0 ; Line
      GoogleChart::Refresh(#LineChart)
    Case 1 ; Pie
      GoogleChart::Refresh(#PieChart)
  EndSelect
  
EndProcedure

Procedure Main()
  
  OpenWindow(#myWindow, #PB_Ignore, #PB_Ignore, 600, 400, "GoogleChart-Example", #PB_Window_ScreenCentered)
  
  PanelGadget(#myPanel, 0, 0, WindowWidth(#myWindow), WindowHeight(#myWindow))
  
  AddGadgetItem(#myPanel, -1, "LineChart")
  GoogleChart::Gadget(#LineChart, 0, 0, GetGadgetAttribute(#myPanel, #PB_Panel_ItemWidth), GetGadgetAttribute(#myPanel, #PB_Panel_ItemHeight), GoogleChart::#ChartTypeLine)
  
  AddGadgetItem(#myPanel, -1, "PieChart")
  GoogleChart::Gadget(#PieChart, 0, 0, GetGadgetAttribute(#myPanel, #PB_Panel_ItemWidth), GetGadgetAttribute(#myPanel, #PB_Panel_ItemHeight), GoogleChart::#ChartTypePie)
  
  CloseGadgetList()
  
  BindGadgetEvent(#myPanel, @myPanelEvent())
  
  DrawLineChartExample()
  DrawPieChartExample()
  
EndProcedure

GoogleChart::Init(@Main())
Image

Greetings ... Peter
Last edited by Peter on Fri Feb 10, 2017 2:22 pm, edited 1 time in total.
User avatar
SparrowhawkMMU
Posts: 281
Joined: Wed Aug 19, 2015 3:02 pm
Location: United Kingdom

Re: Module: GoogleChartGadget

Post by SparrowhawkMMU »

Peter, great work, as ever. Many thanks!
bbanelli
Posts: 107
Joined: Mon Jul 13, 2015 7:40 am

Re: Module: GoogleChartGadget

Post by bbanelli »

Peter, fantastic! I'm almost beginning to grasp those advance JS concepts. :)
"If you lie to the compiler, it will get its revenge."
Henry Spencer
http://www.pci-z.com/
bbanelli
Posts: 107
Joined: Mon Jul 13, 2015 7:40 am

Re: Module: GoogleChartGadget

Post by bbanelli »

I would like to add some data dinamically ,but can't seem to figure out how to use variables properly. Here's my try:

Code: Select all

Global NewMap Country.i()

Country("US") = 5
Country("FR") = 9
Country("GE") = 12

Procedure DrawPieChartExample()
  
  ; ------------------------------------
  ; PieChart
  ; https://google-developers.appspot.com/chart/interactive/docs/gallery/piechart
  ; ------------------------------------
    
  ; Set Options
  
  Protected ChartOptions
  
  ! v_chartoptions = { 'title' : 'How Much Pizza I Ate Last Night' };
  
  GoogleChart::SetChartGadgetAttribute(#PieChart, GoogleChart::#ChartGadgetOptions, ChartOptions)
  
  ; Set Data
  
  Protected ChartData
  Protected.s chartlabel
  Protected.i chartvalue
  
  ! v_chartdata = new google.visualization.DataTable();
  ! v_chartdata.addColumn('string', 'Topping');
  ! v_chartdata.addColumn('number', 'Slices');
  ForEach Country()
    chartlabel = MapKey(Country())
    chartvalue = Country()
    !v_chardata.addRow(['v_chartlabel', v_chartvalue]);
  Next
  
  GoogleChart::SetChartGadgetAttribute(#PieChart, GoogleChart::#ChartGadgetData, ChartData)
  
EndProcedure
But variables are not set, instead, code looks like this:

Code: Select all

v_chardata.addRow(['v_chartlabel', v_chartvalue]);
TIA!

Edit

OK, I've managed to partially resolve it like this:

Code: Select all

Global NewMap Country.i()

Country("US") = 5
Country("FR") = 9
Country("GE") = 12

Procedure DrawPieChartExample()
  
  ; ------------------------------------
  ; PieChart
  ; https://google-developers.appspot.com/chart/interactive/docs/gallery/piechart
  ; ------------------------------------
    
  ; Set Options
  
  Protected ChartOptions
  
  ! v_chartoptions = { 'title' : 'How Much Pizza I Ate Last Night' };
  
  GoogleChart::SetChartGadgetAttribute(#PieChart, GoogleChart::#ChartGadgetOptions, ChartOptions)
  
  ; Set Data
  
  Protected ChartData
  Protected.s chartlabel
  Protected.i chartvalue
  
  ! v_chartdata = new google.visualization.DataTable();
  ! var data=[];
  ! var Header= ['Topping', 'Slices'];
  ! data.push(Header);
  ForEach Country()
    chartlabel = MapKey(Country())
    chartvalue = Country()
    ! var temp=[];
    ! temp.push(v_chartlabel);
    ! temp.push(v_chartvalue);
    ! data.push(temp);
  Next
  ! v_chartdata = new google.visualization.arrayToDataTable(data);
  GoogleChart::SetChartGadgetAttribute(#PieChart, GoogleChart::#ChartGadgetData, ChartData)
  
EndProcedure
"If you lie to the compiler, it will get its revenge."
Henry Spencer
http://www.pci-z.com/
User avatar
Peter
Posts: 1086
Joined: Mon Feb 24, 2014 10:17 pm
Location: 127.0.0.1:9080
Contact:

Re: Module: GoogleChartGadget

Post by Peter »

1. v_chartdata (not v_chardata)

2. remove the unnecessary quotes.

Code: Select all

! v_chartdata.addRow([v_chartlabel, v_chartvalue]);
Greetings ... Peter
Dirk Geppert
Posts: 282
Joined: Fri Sep 22, 2017 7:02 am

Re: Module: GoogleChart

Post by Dirk Geppert »

Hello Peter, I have a question about the Google Chart Gadgets. I would like to change the options of a gadget.
Unfortunately, this does not work by setting the options again. Do I have to delete them or delete the gadget and create it again? I'm sure there's a smarter way to do it ;-)

Related to the following example:

https://github.com/spiderbytes/GoogleCh ... Example.sb

Code: Select all

	Protected ChartOptions
	
	! v_chartoptions = {
	!   hAxis: { title: 'Time' },
	!   vAxis: { title: 'Popularity' }
	! };
	
	GoogleChart::SetChartGadgetAttribute(#Chart, GoogleChart::#ChartOptions, ChartOptions)
	
	; Set Data
	
	
	! v_chartoptions = {
	!   hAxis: { title: 'Zeit' },
	!   vAxis: { title: 'Popolaritaet' }
	! };
	
	GoogleChart::SetChartGadgetAttribute(#Chart, GoogleChart::#ChartOptions, ChartOptions)
The new options are not adopted.
Do you have any ideas? Thanks in advance!
User avatar
Peter
Posts: 1086
Joined: Mon Feb 24, 2014 10:17 pm
Location: 127.0.0.1:9080
Contact:

Re: Module: GoogleChart

Post by Peter »

@Dirk:

replace this line in GoogleChart.sbi / SetChartGadgetAttribute():

Code: Select all

! chart.setOptions($.extend(v_value, chart.getOptions()));
with this one:

Code: Select all

! chart.setOptions($.extend({}, chart.getOptions(), v_value));
(untested)

P.S.: Popularitaet ;)
Dirk Geppert
Posts: 282
Joined: Fri Sep 22, 2017 7:02 am

Re: Module: GoogleChart

Post by Dirk Geppert »

Works now as expected! Thx Peter! :)
Post Reply