Sure, having multiple DataTable variables is reasonable. If I were you, I would start off with global variables and then try to figure out a structure that makes sense for my page.
On Thu, May 14, 2015 at 7:27 AM Kamal Nandan <[email protected]> wrote: > Is it a good idea to have multiple DataTable variables(one of the options > hinted at, by you) that would contain the data for the respective graphs? > > Regards, > Kamal > > > On Thursday, 14 May 2015 16:48:15 UTC+5:30, Kamal Nandan wrote: >> >> Hi Sergey, >> >> Yes, what you are saying does make sense to me - how to get the data to >> the client. >> AJAX, I think wont be a feasible option because we dont want to let the >> browser make a data query to the database. Neither do I want to make use of >> global variables as you rightly pointed out. >> Can there be some other method so that the data is contained inside the >> HTML e.g. inside 'div' tag, in the form of json, so that the callback gets >> called and json data is passed to it? >> >> Regards, >> Kamal >> >> >> On Wednesday, 13 May 2015 20:27:06 UTC+5:30, Sergey wrote: >>> >>> How do you intend to get your data to the client? Do you intend to have >>> multiple DataTable definitions? Do you intend to fetch the data using an >>> AJAX call? >>> >>> All of these questions affect how you will structure your page. I don't >>> understand how passing the data as parameters to the drawChart function >>> changes anything. You could always define your data as a variable outside >>> of the scope of the drawChart function (although that's not recommended, as >>> global variables are considered harmful by many), which would allow you to >>> use it within the function. >>> >>> On Wed, May 13, 2015 at 10:23 AM Kamal Nandan <[email protected]> >>> wrote: >>> >>>> 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]> >>>>> 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. >>>> >>> -- > 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. > -- 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.
