Evgene Karachevtsev
Posts: 12
Joined: Mon Apr 28, 2014 1:12 pm

Integrating Google Charts

Hello Kendal,

If you create a new JS asset, it will be available on every page by default: http://devcenter.appery.io/documentat....
Thus, you should create new JS asset with function drawChart() and load external JavaScript library with url https://www.google.com/jsapi

Michael Droll
Posts: 0
Joined: Wed Mar 04, 2015 5:05 am

Integrating Google Charts

This was a extremely helpful thread! thank you for the help and explanations.

I have one question to add:
How can I redraw the chart from an event?
I'm assuming that I would have to call a function through Java script. But I don't know how, or what to call.

I got the chart to work and display on the page. I had the same problem as the other poster with the white screen issue. I resolved that with a full screen refresh on page navigation to the page with the chart.

Serhii Kulibaba
Posts: 150
Joined: Tue Aug 27, 2013 1:47 pm

Integrating Google Charts

You should call

chart.draw(data, options);

on any event you want (https://devcenter.appery.io/documenta...)

Michael Droll
Posts: 0
Joined: Wed Mar 04, 2015 5:05 am

Integrating Google Charts

Thank you Sergiy! I knew it was going to be something simple.

Enfiled Riders
Posts: 0
Joined: Fri Jun 05, 2015 6:07 am

Integrating Google Charts

How to read the columns and rows for the google chart from the database?

She
Posts: 0
Joined: Wed Oct 08, 2014 12:46 am

Integrating Google Charts

Hi Team,
I just want to know if how can i center/fullscreen the chart and remove the scroll bar:
https://d2r1vs3d9006ap.cloudfront.net...

how can i insert value in json?

Thank you,
She

She
Posts: 0
Joined: Wed Oct 08, 2014 12:46 am

Integrating Google Charts

I tried the following code:
code
function drawChart() {
// Create the data table.
var empname = localStorage.getItem('EmpName');
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':'Late Percentage of ' + empname,
'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);
}
/code

the error is:
https://d2r1vs3d9006ap.cloudfront.net...

this chart is not accepting json?

Thank you,
She

Serhii Kulibaba
Posts: 150
Joined: Tue Aug 27, 2013 1:47 pm

Integrating Google Charts

Hello Enfiled, you should just save service's response into JS variable.

You can do it on service's success event e.g.:

Apperyio.storage.myArray.set(data); More info about storage here: https://devcenter.appery.io/documenta...

Serhii Kulibaba
Posts: 150
Joined: Tue Aug 27, 2013 1:47 pm

Integrating Google Charts

Hello,
You can remove scrolls with CSS property overflow: https://css-tricks.com/almanac/proper...

this chart is not accepting json?
Please reed it's documentation

Enfiled Riders
Posts: 0
Joined: Fri Jun 05, 2015 6:07 am

Integrating Google Charts

so basically myArray varialbe will have the response for that database service.
of how to add the columns and rows in the format below:

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]
]);

Return to “Issues”