Google Charts - how to implement in SB

[bbanelli]

Greetings to all,

as far as I could've understood from Google's documentation from here: https://developers.google.com/chart/int ... draw_chart

Your page must have an HTML element (typically a <div>) to hold your chart.

What should be the best practice to include such JS libraries in SpiderBasic program than? Can anyone kindly provide short tutorial/example to fiddle with?

Thank you in advance,

Bruno

[falsam]

Sorry. I would not do a tutorial ^^

Same method as this topic http://forums.spiderbasic.com/viewtopic ... 3172#p3172

1 - Load Script with callback.
2 - Insert the <div> tag into the window.
3 - Initialize Google Chart.

Code: Select all

Enumeration
  #mf
EndEnumeration

Procedure.i WindowElement(Window, UseJquery.b=#True)
  Protected winObject=WindowID(Window) 
  
  !return (v_winobject && v_winobject.element)? v_usejquery? $(v_winobject.element):v_winobject.element:null; 
EndProcedure

Procedure dominsert(window.i, value.s)
  Protected windowObject=WindowElement(window) 
  
  ! var selector = v_windowobject.find('.spiderwindow-content') 
  ! selector.append(v_value)  
EndProcedure

Procedure.i LoadAsynchronously(FileName.s, *OnLoadFunction, FileType.s)
  !return $.ajax({ url:v_filename, dataType:v_filetype, beforeSend:function(jqxhr, settings) { jqxhr.url = settings.url; } })
  !.done(function(data, status, jqxhr) { p_onloadfunction(data,status,jqxhr.url); })
  !.fail(function(jqxhr, status, errorThrown) { p_onloadfunction('',status,jqxhr.url,jqxhr.status,errorThrown); });
EndProcedure 

Procedure LoadScript(FileName.s, *OnLoadFunction)
  ProcedureReturn LoadAsynchronously(FileName, *OnLoadFunction, "script")
EndProcedure

Procedure Loading(content.s, status.s, url.s, errorCode, error.s)
  If status<>"success"
    Debug "Loading: FAILED"
    Debug "File: "+url
    Debug "Error code: "+errorCode 
    Select errorCode 
      Case 401 : Debug "Error: Authentification Failed"
      Case 404 : Debug "Error: File Not Found"
      Case 500 : Debug "Error: Server Failed"
      Case 504 : Debug "Error: Server Timeout" 
      Default : Debug "Error: "+error
    EndSelect 
    Debug ""
    ProcedureReturn
  EndIf 
  
  OpenWindow(#mf, 0, 0, 500, 400, "Google Chart", #PB_Window_ScreenCentered)  
  SetWindowColor(#mf, RGB(255, 255, 255))
  
  ;2 - Insert <div></div> in a <div>
  dominsert(#mf, "<div id='chart_div' style='position: absolute; left: 20px; top:20px; width:400; height:300'></div>")
  
  ;3 - Initialize Google Chart. 
  !// Load the Visualization API And the corechart package.
  !google.charts.load('current', {'packages':['corechart'] });

  !// Set a callback To run when the Google Visualization API is loaded.
  !google.charts.setOnLoadCallback(drawChart);

  !// Callback that creates And populates a Data table,
  !// instantiates the pie chart, passes in the Data And
  !// draws it.
  !function drawChart() {

  !      // Create the Data table.
  !      var data = new google.visualization.DataTable()
  !      data.addColumn('string', 'Topping');
  !      data.addColumn('number', 'Slices');
  !      data.addRows([
  !        ['Mushrooms', 3],
  !        ['Onions', 1],
  !        ['Olives', 1],
  !        ['Zucchini', 1],
  !        ['Pepperoni', 2]
  !      ]);

  !      // Set chart options 
  !      var options = {'title':'How Much Pizza I Ate Last Night', 
  !                     'width' : 400, 
  !                     'height': 300,
  ;!                     colors: ['#e0440e', '#e6693e', '#ec8f6e', '#f3b49f', '#f6c7b6'], ;un-comment for red color 
  !                     legend: { position: "right" }, //right or none
  !                     is3D: true,
  !                    };

  !      // Instantiate And draw our chart, passing in some options.
  !      var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
  !      chart.draw(data, options);
  !      chart.getImageURI()
  !}
  
EndProcedure

;1 - Include jQuery leddisplay plugin in the html document.
LoadScript("https://www.gstatic.com/charts/loader.js", @Loading())

■ Demo : http://falsam.com/sbtest/googlechart.html

PS : Your link about Google chart is old. The new is https://developers.google.com/chart/int ... uick_start

[bbanelli]

Sorry. I would not do a tutorial ^^

Oh I hope you will "not" do any "not-tutorials" as this one in the future!!!

Many thanks falsam, great code, finally figured out how to "insert" <div>, have a great day, I'll keep playing!

[Peter]

@falsam:

Here's a slightly adapted version of your code using a Gadget (instead of dominsert()):

Code: Select all

EnableExplicit

Enumeration
  #mf
  #GoogleChartGadget
EndEnumeration

Procedure.i WindowElement(Window, UseJquery.b=#True)
  Protected winObject=WindowID(Window) 
  
  !return (v_winobject && v_winobject.element)? v_usejquery? $(v_winobject.element):v_winobject.element:null; 
EndProcedure

Procedure.i LoadAsynchronously(FileName.s, *OnLoadFunction, FileType.s)
  !return $.ajax({ url:v_filename, dataType:v_filetype, beforeSend:function(jqxhr, settings) { jqxhr.url = settings.url; } })
  !.done(function(data, status, jqxhr) { p_onloadfunction(data,status,jqxhr.url); })
  !.fail(function(jqxhr, status, errorThrown) { p_onloadfunction('',status,jqxhr.url,jqxhr.status,errorThrown); });
EndProcedure 

Procedure LoadScript(FileName.s, *OnLoadFunction)
  ProcedureReturn LoadAsynchronously(FileName, *OnLoadFunction, "script")
EndProcedure

Procedure GoogleChartGadget(Gadget, x, y, Width, Height)
  
  If Gadget = #PB_Any
    Gadget = ContainerGadget(Gadget, x, y, Width, Height)
  Else
    ContainerGadget(Gadget, x, y, Width, Height)
  EndIf
  
  CloseGadgetList()
  
  !var selector = $(spider_GadgetID(v_gadget).div).find('.dijitContentPane');  
  
  ;3 - Initialize Google Chart. 
  !// Load the Visualization API And the corechart package.
  !google.charts.load('current', {'packages':['corechart'] });
  
  !// Set a callback To run when the Google Visualization API is loaded.
  !google.charts.setOnLoadCallback(drawChart);
  
  !// Callback that creates And populates a Data table,
  !// instantiates the pie chart, passes in the Data And
  !// draws it.
  !function drawChart() {
  
  !      // Create the Data table.
  !      var data = new google.visualization.DataTable()
  !      data.addColumn('string', 'Topping');
  !      data.addColumn('number', 'Slices');
  !      data.addRows([
  !        ['Mushrooms', 3],
  !        ['Onions', 1],
  !        ['Olives', 1],
  !        ['Zucchini', 1],
  !        ['Pepperoni', 2]
  !      ]);
  
  !      // Set chart options 
  !      var options = {'title':'How Much Pizza I Ate Last Night', 
  !                     'width' : 400, 
  !                     'height': 300,
  ;!                     colors: ['#e0440e', '#e6693e', '#ec8f6e', '#f3b49f', '#f6c7b6'], ;un-comment for red color 
  !                     legend: { position: "right" }, //right or none
  !                     is3D: true,
  !                    };
  
  !      // Instantiate And draw our chart, passing in some options.
  !      var chart = new google.visualization.PieChart(selector[0]);
  !      chart.draw(data, options);
  !      chart.getImageURI()
  !}
  
  ProcedureReturn Gadget
  
EndProcedure

Procedure Loading(content.s, status.s, url.s, errorCode, error.s)
  
  If status<>"success"
    Debug "Loading: FAILED"
    Debug "File: "+url
    Debug "Error code: "+errorCode 
    Select errorCode 
      Case 401 : Debug "Error: Authentification Failed"
      Case 404 : Debug "Error: File Not Found"
      Case 500 : Debug "Error: Server Failed"
      Case 504 : Debug "Error: Server Timeout" 
      Default : Debug "Error: "+error
    EndSelect 
    Debug ""
    ProcedureReturn
  EndIf 
  
  OpenWindow(#mf, 0, 0, 500, 400, "Google Chart", #PB_Window_ScreenCentered)
  
  SetWindowColor(#mf, RGB(255, 255, 255))
  
  GoogleChartGadget(#GoogleChartGadget, 20, 20, 400, 300)
  
EndProcedure

LoadScript("https://www.gstatic.com/charts/loader.js", @Loading())

Greetings ... Peter

[falsam]

Thanks Peter. You can delete the WindowElement() procedure from your code. It is useless. Good idea.