Jump to content

UniURLFrame: loading Google charts


FastCards

Recommended Posts

I load the code below into a UniURLFrame to display a Google Chart. This works great unless I put more than one UrlFrame on the same form.This is because the Google Charts bit (loaders shown in red text) should only be loaded once per web page. Can anyone tell me how to load these lines separately (AddJS? for example)

 

 

<!DOCTYPE html> 

<html> 

  <head> 

    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 

    <script type="text/javascript"> 

        google.charts.load('current', {'packages':['gauge']}); 

        google.charts.setOnLoadCallback(drawGauge); 

        var chartOptions = {min: 90, 

                            max: 100, 

                            width: 0, 

                            height: 0, 

                            redFrom: 90, 

                            redTo: 96, 

                            yellowFrom: 96, 

                            yellowTo: 99, 

                            greenFrom: 99, 

                            greenTo: 100} 

        var theGauge; 

        function drawGauge()

        { 

          var data = google.visualization.arrayToDataTable([ 

            ['Label','Value']

            ,['All', 98.39] 

             ]);

           Gauge = new google.visualization.Gauge(document.getElementById('Gauge_div')); 

           Gauge.draw(data, chartOptions); 

        } 

    </script>  

  </head> 

  <body> 

    <div id="Gauge_div"></div> 

  </body> 

</html> 

Link to comment
Share on other sites

Thanks for the link but that example is for the old google charts API.

 

The problem I have is with loading google charts: the command is <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
 
If I put this in each UniURLFrame.HTML on my page (which has multiple charts) I get a message saying loader.js can only be loaded once. In that case, how do I load it? Do I use AddJS and if so where?
 
Thanks
Andy
Link to comment
Share on other sites

Hi,

 

https://developers.google.com/chart/interactive/docs/basic_load_libs

 

Limitations

There are a couple minor but important limitations with how you load Google Charts in versions prior to 45:

  1. You can only call google.charts.load once. But you can list all the packages that you'll need in one call, so there's no need to make separate calls.
Link to comment
Share on other sites

DD,

 

Thanks for your help. I'm aware that you should only load google charts one. If I have 5 UniURLFrames on the same UniFrame, do I need to load google charts in each one or can I load if for the UniFrame as a whole?  The 5 charts are redrawn when the user changes a filter on the screen.

 

If I load it for the UniFrame, where is the best place to do it and can the 5 UniURLFrames access it?

 

Apologies: my Javascript/HTML skills are not the best. It is a tribute to UniGUI that 99% of what I code is in Delphi and isolates me from the inner workings of JS/HTML.

 

Thanks

Andy

Link to comment
Share on other sites

  • 2 months later...

I am trying to use Google Charts instead of TUniChart. It seems that you can customize Google Charts more easily than TUniChart.

 

Could anyone please assist me in populating data form a TFDQuery and TDatasource on Google Charts. I don't know how to link the TDatasource with the Google Chart.

 

Thank you.

Link to comment
Share on other sites

Please sign in to comment

You will be able to leave a comment after signing in



Sign In Now
×
×
  • Create New...