More google charts on single page

31 views
Skip to first unread message

Tomáš Krsek

unread,
May 3, 2016, 11:23:31 AM5/3/16
to Google Visualization API
Hello, i need to show more than 1 chart on single page - this charts should be separate, not in one block. I found some advice, but i dont know what wrong in my codes is. Everything worked, until i have change the line " google.charts.load('43', {packages: ['corechart']});" I tried changed the function name, but still doesnt work. I am sorry for my english and i am amateur about codes.

Chart 1
<script type="text/javascript"
        src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
    google.charts.load('43', {packages: ['corechart']});
    google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var wrapper = new google.visualization.ChartWrapper(
{"containerId":"visualizationDCA3","dataTable":{"cols":[{"id":"","label":"","pattern":"","type":"string","p":{}},{"id":"","label":"CZK","pattern":"","type":"number","p":{}},{"id":"","label":"zbývá CZK","pattern":"","type":"number"}],"rows":[{"c":[{"v":"březen","f":null},{"v":62036,"f":null},{"v":2213460,"f":null}]}],"p":null},"options":{"isStacked":true,"animation":{"duration":2500,"startup":true},"bar":{"groupWidth": "25%"},"booleanRole":"certainty","hAxis":{"useFormatFromData":true,"viewWindow":{"max":2500000,"min":null},"minValue":null,"maxValue":2500000,"logScale":false},"vAxes":[{"useFormatFromData":true,"minValue":null,"maxValue":null,"viewWindow":null,"viewWindowMode":null},{"useFormatFromData":true}],"legend":"bottom","fontName":"Georgia","title":"Celkový CZK","series":{"1":{"color":"#b7b7b7"}}},"state":{},"view":{},"isDefaultVisualization":true,"chartType":"BarChart"}
);
wrapper.draw();
};
</script>
<div style='border: 0px darkgray solid;width:500px;'>
<div id='visualizationDCA3' style='width:500px; height:200px;'></div>
</div>
Chart 2
<script type="text/javascript"
        src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
    google.charts.load('43', {packages: ['corechart']});
    google.charts.setOnLoadCallback(chart2);
function chart2() {
var wrapper = new google.visualization.ChartWrapper(
{"containerId":"2C2D","dataTable":{"cols":[{"id":"","label":"","pattern":"","type":"string","p":{}},{"id":"","label":"CZK","pattern":"","type":"number","p":{}},{"id":"","label":"zbývá CZK","pattern":"","type":"number"}],"rows":[{"c":[{"v":"březen","f":null},{"v":1844,"f":null},{"v":143739,"f":null}]}],"p":null},"options":{"isStacked":true,"animation":{"duration":2500,"startup":true},"bar":{"groupWidth": "25%"},"booleanRole":"certainty","hAxis":{"useFormatFromData":true,"viewWindow":{"max":150000,"min":null},"minValue":null,"maxValue":160000,"logScale":false,"gridlines":{"count":"4"}},"vAxes":[{"useFormatFromData":true,"minValue":null,"maxValue":null,"viewWindow":null,"viewWindowMode":null},{"useFormatFromData":true}],"legend":"bottom","series":{"1":{"color":"#b7b7b7"}},"fontName":"Georgia","title":"Náklady CZK"},"state":{},"view":{},"isDefaultVisualization":true,"chartType":"BarChart"}
);
wrapper.draw();
};
</script>
<div style='border: 0px darkgray solid;width:500px;'>
<div id='2C2D' style='width:500px; height:200px;'></div>
</div>


Daniel LaLiberte

unread,
May 3, 2016, 11:27:06 AM5/3/16
to Google Visualization API
Hi Tomáš,

You should read this page on what you need to do when drawing multiple charts on one page:  https://developers.google.com/chart/interactive/docs/basic_multiple_charts#draw-multiple-charts-on-one-page

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/89ae326a-a5bc-4d82-b283-fa206fd7d5be%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.



--

Tomáš Krsek

unread,
May 3, 2016, 11:35:06 AM5/3/16
to Google Visualization API
Thank you, i have read this topic, but i need one code for every chart - not everything on one. On my site i use page builder and i need to past this code in space where i want. 

Dne úterý 3. května 2016 17:27:06 UTC+2 Daniel LaLiberte napsal(a):
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.



--

Daniel LaLiberte

unread,
May 3, 2016, 11:41:27 AM5/3/16
to Google Visualization API
You'll have to separate your code into two parts.  One part can only be done once (at this time, until I make changes in the loader).  You can only load the charts/loader.js one time, and you can only call google.charts.load() one time.  The second part is everything else.  The google.charts.setOnLoadCallback can be called multiple times, so the rest of your code should be fine to put in your page builder.

To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.



--

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/d77dc5a0-987c-4b26-baf0-a86ddd9b737a%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.



--

Tomáš Krsek

unread,
May 3, 2016, 11:48:48 AM5/3/16
to google-visua...@googlegroups.com
I am sorry but i dont understand this solution, is there some example. As i wrote i am amteur. Thank you for your patience.

--
You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/LwuIwn6TZqc/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/CAOtcSJOEEOPmEqr9EJk3ckcetEhLDfXYjcr4tRVEMTCFoY8TnQ%40mail.gmail.com.

Daniel LaLiberte

unread,
May 3, 2016, 11:51:32 AM5/3/16
to Google Visualization API
 The examples on the documentation page should help in general, but if that is not enough, you'll have to ask someone who can help you figure out how to apply this to your page builder.

To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/CAKAEuqEDrppN91o8KF6QJE5A-JuANxxqR0KdoV2JnTZu5ot1XA%40mail.gmail.com.

For more options, visit https://groups.google.com/d/optout.
Reply all
Reply to author
Forward
0 new messages