Thanks a lot Sergey for the response... :)
I think, I was not clear enough.
In fact the data (that I have hard-code in the example) for the different
charts would be different. Thats the reason why, I want to pass the data as
parameter(s) to drawChart function. The different charts wont be exact
replicas of each other, but the different data would be used to render
different charts.
i.e. the following data would be different for each chart:
[new Date(2015,04, 19), 360536, 3851],
[new Date(2015,04, 20), 9712420, 96731],
[new Date(2015,04, 21), 9314494, 94807],
[new Date(2015,04, 22), 8850065, 90029],
[new Date(2015,04, 23), 11075714, 124361],
[new Date(2015,04, 24), 8855860, 90138],
[new Date(2015,04, 27), 3057707, 30282],
[new Date(2015,04, 28), 8609144, 87688],
[new Date(2015,04, 29), 8088795, 82579],
[new Date(2015,04, 30), 7293100, 74013],
Please let me know if I misunderstood you - I am a complete novice at
Javascript.
Regards,
Kamal
On Wednesday, 13 May 2015 19:22:52 UTC+5:30, Sergey wrote:
>
> Hi Kamal,
>
> You don't need to pass chart parameters as an argument to the callback
> function in order to draw multiple charts. You can just call other
> functions from the callback function itself. That's the beauty of functions
> =)
>
> Here's a simple example:
> function drawChart1(data) {
> // Draw the first chart in this function using the DataTable in the
> "data" argument
> }
>
> function drawChart2(data) {
> // Draw the second chart...
> }
>
> google.setOnLoadCallback(drawCharts);
> function drawCharts() {
> var data = new google.visualization.DataTable();
> //data.addColumn('number', 'X');
> data.addColumn('date', 'Extract Date');
> data.addColumn('number', 'File Size (in bytes)');
> data.addColumn('number', 'Record Count');
> data.addRows([
> [new Date(2015,04, 19), 360536, 3851],
> [new Date(2015,04, 20), 9712420, 96731],
> [new Date(2015,04, 21), 9314494, 94807],
> [new Date(2015,04, 22), 8850065, 90029],
> [new Date(2015,04, 23), 11075714, 124361],
> [new Date(2015,04, 24), 8855860, 90138],
> [new Date(2015,04, 27), 3057707, 30282],
> [new Date(2015,04, 28), 8609144, 87688],
> [new Date(2015,04, 29), 8088795, 82579],
> [new Date(2015,04, 30), 7293100, 74013],
> ]);
>
> drawChart1(data);
> drawChart2(data);
> }
>
> You also don't need to pass that maxValue to the chart, since it is
> automatically determined from your data. You're effectively just passing it
> the same value it would use anyway.
>
> On Wed, May 13, 2015 at 8:08 AM Kamal Nandan <[email protected]
> <javascript:>> wrote:
>
>> Hi,
>>
>> I want to display multiple (hundreds) of line charts on a single
>> web-page. How do I do so? Would it be possible to write only one javascript
>> function and pass the parameters for each graph to the same function?
>> I don't want to have hundreds of redundant javascript code blocks on the
>> same html page.
>>
>> Here is a snippet of my code for one chart:
>>
>>
>>
>>
>>
>>
>>
>>
>>
>>
>>
>>
>>
>>
>>
>>
>>
>>
>>
>>
>>
>>
>>
>>
>>
>>
>>
>>
>>
>>
>>
>>
>>
>>
>>
>>
>>
>>
>>
>>
>>
>>
>>
>>
>>
>>
>>
>>
>>
>>
>>
>>
>>
>>
>>
>>
>>
>>
>>
>>
>> *<HEAD><script type="text/javascript" src="https://www.google.com/jsapi
>> <https://www.google.com/jsapi>"></script><script
>> type="text/javascript"> google.load("visualization", "1",
>> {packages:["corechart"]}); google.setOnLoadCallback(drawChart);
>> function drawChart() { var data = new
>> google.visualization.DataTable(); //data.addColumn('number', 'X');
>> data.addColumn('date', 'Extract Date'); data.addColumn('number', 'File
>> Size (in bytes)'); data.addColumn('number', 'Record Count');
>> data.addRows([ [new Date(2015,04, 19), 360536, 3851], [new
>> Date(2015,04, 20), 9712420, 96731], [new Date(2015,04, 21), 9314494,
>> 94807], [new Date(2015,04, 22), 8850065, 90029], [new
>> Date(2015,04, 23), 11075714, 124361], [new Date(2015,04, 24),
>> 8855860, 90138], [new Date(2015,04, 27), 3057707, 30282],
>> [new Date(2015,04, 28), 8609144, 87688], [new Date(2015,04, 29),
>> 8088795, 82579], [new Date(2015,04, 30), 7293100, 74013],
>> ]); var chart = new
>> google.visualization.LineChart(document.getElementById('chart_div'));
>> chart.draw(data, { title: 'asset type / asset version',
>> width: 1000, height: 600, series: { 0:
>> { targetAxisIndex: 0 }, 1:
>> { targetAxisIndex: 1 } }, vAxes:
>> { 0: { minValue: 0, maxValue:
>> 11075714, label: 'File Size (in bytes)',
>> title: 'File Size (in bytes)' }, 1: {
>> minValue: 0, maxValue: 124361, label: 'Record
>> Count', title: 'Record Count' } }
>> });}</script><HEAD><div id="chart_div" style="width: 800px; height:
>> 300px;"></div>*
>>
>> I want to pass the highlighted data as a parameter to the function
>> 'drawChart()' above.
>>
>> (P.S. My question might be a basic one, but I am a novice in javascript
>> or UI designing).
>>
>> --
>>
>>
--
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 [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.
