Integrating Google Charts

[Kendal]

Hi there - still getting to grips with Appery.io but so far am impressed.

I would be grateful for some support on how best to use the Google Charting API with Appery.io

Would be great if in a similar way to the Google Maps API tutorial you could create one for the charting.

https://google-developers.appspot.com...

many thanks,

[Kendal]

Wondering if could do it this way; https://google-developers.appspot.com...

[Evgene Karachevtsev]

Hello,

In appery.io app you can use only JavaScript. You can implement this example in your app: https://google-developers.appspot.com...
You can map response from your service to a local storage variable, then use it in google.visualization.arrayToDataTable function.

[Kendal]

Hello, thanks for your reply.

I would be grateful for some more information on the best way to do this, for example while it may well be possible to set the values for google.visualization.arrayToDataTable via a LV, to date I have not been able to render the google charts in my app.

Please could you provide some further guidance?

thanks,

[Evgene Karachevtsev]

Hello Kendal,

You should make a sequence of action. At first get data from a service and save it to the local storage variable. Then run function that uses this data and visualizes it. This sequence generally depends on your app logic.

[Kendal]

Hi there - I'm not sure I follow your instructions.

I understand how to pull my value for the chart and how to modify the code to use these values from a LV.

What I do not understand is how to display Google Charts in my application.

First, lets look at the code Google supply:

script type="text/javascript" src="https://www.google.com/jsapi"

2 - How do I display javascript driven elements, i.e the pie chart in a page. Is it in a HTML component etc. Please example.

As asked above, it would be helpful to provide step by step instructions or a tutorial around this as I imagine others would want to do the same please.

Thanks,

[Kateryna Grynko]

Hi,

Let's follow the example:
https://google-developers.appspot.com...

1) Open app settings, in External resources add "https://www.google.com/jsapi"
2) Add HTML component with the following code:precode<script type="text/javascript">
google&#46;load('visualization', '1&#46;0', {'packages':['corechart']});
google&#46;setOnLoadCallback(drawChart);
</script>

<div id="chart_div"><>/code/pre
3) Add the following custom JS code:
prefunction drawChart() {

Code: Select all

 // 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}; 

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

}/pre

[Kendal]

Hi Katya,

Thanks for taking the time to be much more helpful and explain how best to do this in your answer above, I do appreciate it.

I followed your instructions, but did you manage to get this to work, I just get a white screen when loading.

Where exactly do you do step 3 above (add JS code) I added to page load, but is that not where I should add the custom JS code?

thanks,

[Kateryna Grynko]

Hi Kendal,

Create new - JavaScript.

You get this white screen because you didn't add this function.

Let us know if you face the issue again.

[Kendal]

Hi Katya,

This didn't work, still white screen - I'm confused - in your help above how do I connect/reference the JS to the page? If it's just through the function name then it doesn't work for me when I tried it.

Does the JS it have to be off page, I need to have a dyanmic link to the page in some way and would rather render the JS on the page, as I will need to replace the examples with database pulled variables which I will load in as LV before referencing them in the JS.

thanks,