LabVIEW

cancel
Showing results for 
Search instead for 
Did you mean: 

Feed data to GeoChart?

Solved!
Go to solution

Hi,

 

I'm reaching a dead end to implement a jsli so that I can feed json data to Geochart.

 

I tried to understand how to write a js wrapper. But due to my limited javascript experience, I can't really get it working. Would anyone be able to shed some light?

 

The example I'm trying to get, https://developers.google.com/chart/interactive/docs/gallery/geochart#fullhtml

 

<html>
 
<head>
   
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
   
<script type="text/javascript">
      google
.charts.load('current', {
       
'packages':['geochart'],
       
// Note: you will need to get a mapsApiKey for your project.
       
// See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
       
'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
     
});
      google
.charts.setOnLoadCallback(drawRegionsMap);

     
function drawRegionsMap() {
       
var data = google.visualization.arrayToDataTable([
         
['Country', 'Popularity'],
         
['Germany', 200],
         
['United States', 300],
         
['Brazil', 400],
         
['Canada', 500],
         
['France', 600],
         
['RU', 700]
       
]);

       
var options = {};

       
var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));

        chart
.draw(data, options);
     
}
   
</script>
 
</head>
 
<body>
   
<div id="regions_div" style="width: 900px; height: 500px;"></div>
 
</body>
</html>

  

I imagine I need to put "function drawRegionsMap()" somehow into a wrapper js code so I can feed data to it?

 

Thanks,

 

Dahai

0 Kudos
Message 1 of 8
(3,555 Views)
Solution
Accepted by topic author holyna

 

 

do you want to create the array ['Country', 'Popularity']  programmatically

??

 

arrayToDataTable.png

Message 2 of 8
(3,503 Views)

Very nice Alex! Thank you.

 

I didn't know we could generate the html in LabVIEW environment, very interesting! I was planning to do this in LabVIEW NXG because that's what I know to generate a web app. But now, your labview method gave me more flexibility here. I could generate a static html and attach it to my other pages! Brilliant!

 

To answer your question, yes, I'm planning to generate the dataset programmably. I'd like to try the Covid-19 API using the "GET HTTP", then flatten the json data. I'll modify your code and give a try and will let you know.

 

Thanks!

 

Dahai

0 Kudos
Message 3 of 8
(3,483 Views)

Oh, one more thing. I would assume this is a static html. Let's say if I host it on a server, would it be able to pull the latest API data? I worry that LabVIEW only generates a html document with a fixed dataset, and the LabVIEW "GET" API function cannot be included in this html?

 

If that's the case, we then have to use NXG?

 

Dahai

0 Kudos
Message 4 of 8
(3,480 Views)

 

A truely dynamic approach is to apply php to overwrite the the array data in ... 

 function drawRegionsMap() {
       
var data = google.visualization.arrayToDataTable([ ... ])

 

there are examples out there:

http://programacionconphp.com/crear-grafica-en-php-desde-un-csv-con-google-charts/

https://stackoverflow.com/questions/11246094/how-to-populate-google-chart-api-dynamically

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

 

your (web)server must be capable to parse php to do this.

 

 


@holyna wrote:

Oh, one more thing. I would assume this is a static html. Let's say if I host it on a server, would it be able to pull the latest API data? I worry that LabVIEW only generates a html document with a fixed dataset, and the LabVIEW "GET" API function cannot be included in this html?

 


I don't know the answer to this

Message 5 of 8
(3,462 Views)
Solution
Accepted by topic author holyna

Hi Dahai,

 

I created an example that demonstrates a way to load the Google Charts library into a WebVI and to calls the chart.draw function. It is not a comprehensive example for using Google Charts but it should help you get started. You can see the example running online and the example usage of the API looks like the following:

GoogleChart.PNG

 


Milan
Message 6 of 8
(3,423 Views)

Thanks Milan,

 

That's exactly what I'm looking for, a jsli solution for NXG.

 

I'll start from here to see how you customize the js function.

 

Dahai

Message 7 of 8
(3,409 Views)

Thank you again Alex. I'm not experienced with web design, but your information will definitely help me with the NXG project.

 

Dahai

0 Kudos
Message 8 of 8
(3,407 Views)