01-25-2021 09:04 AM
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
Solved! Go to Solution.
01-25-2021 06:15 PM
do you want to create the array ['Country', 'Popularity'] programmatically
??
01-26-2021 08:13 AM
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
01-26-2021 08:28 AM
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
01-26-2021 06:35 PM
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
02-10-2021 11:52 PM
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:
02-11-2021 08:23 AM
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
02-11-2021 08:25 AM
Thank you again Alex. I'm not experienced with web design, but your information will definitely help me with the NXG project.
Dahai