Hi Andrew,
I need your help once again.
Right now I have 5 charts on my page and thanks to you they work perfect!
However, I need to different options on each chart, but I have no idea how
to do that. Can you please help me?
Thanks,
Paul
On Wednesday, June 25, 2014 7:38:34 PM UTC-7, Andrew Gallant wrote:
>
> You can add a chart type parameter as well:
>
> function drawChart(){
> drawChartFromCSV('data.csv', 'chart_div', 'Metrics 1', 'ColumnChart');
> drawChartFromCSV('data1.csv', 'chart_div2', 'Metrics 2', 'PieChart');
> drawChartFromCSV('data3.csv', 'chart_div3', 'Metrics 3', 'PieChart');
> }
> function drawChartFromCSV(filename, elementId, title, chartType,
> verticalUnit){
>
> $.get(filename, function(csvString) {
> var arrayData = $.csv.toArrays(csvString, {onParseValue:
> $.csv.hooks.castToScalar});
> var data = new google.visualization.arrayToDataTable(arrayData);
>
> var view = new google.visualization.DataView(data);
> view.setColumns([0,1]);
>
> var options = {
> title: title,
>
> fontSize: 14,
> width: 400,
> height: 300
> };
> var chart;
> if (chartType == 'PieChart') {
> chart = new
> google.visualization.PieChart(document.getElementById(elementId));
> }
> else if (chartType == 'ColumnChart') {
> chart = new
> google.visualization.ColumnChart(document.getElementById(elementId));
> }
> else {
> // invalid chart type, throw error
> }
> chart.draw(data, options);
> });
> }
>
> On Wednesday, June 25, 2014 6:50:50 PM UTC-4, paul bor wrote:
>>
>> Hi Andrew,
>>
>> Actually, I have a question, let’s say that I need 2 Pie charts and 1
>> Column chart. How do I do it?
>>
>> Thanks,
>>
>> Paul
>>
>> On Tuesday, June 24, 2014 6:18:39 PM UTC-7, Andrew Gallant wrote:
>>>
>>> Since your chart options are otherwise identical for each chart, would
>>> this work for you?
>>>
>>> function drawChart(){
>>> drawChartFromCSV('data.csv', 'chart_div', 'Metrics 1');
>>> drawChartFromCSV('data1.csv', 'chart_div2', 'Metrics 2');
>>> drawChartFromCSV('data3.csv', 'chart_div3', 'Metrics 3');
>>> }
>>> function drawChartFromCSV(filename, elementId, title, verticalUnit){
>>> $.get(filename, function(csvString) {
>>> var arrayData = $.csv.toArrays(csvString, {onParseValue:
>>> $.csv.hooks.castToScalar});
>>> var data = new google.visualization.arrayToDataTable(arrayData);
>>>
>>> var view = new google.visualization.DataView(data);
>>> view.setColumns([0,1]);
>>>
>>> var options = {
>>> title: title,
>>> fontSize: 14,
>>> width: 400,
>>> height: 300
>>> };
>>>
>>> var chart = new
>>> google.visualization.PieChart(document.getElementById(elementId));
>>> chart.draw(data, options);
>>> });
>>> }
>>>
>>> On Tuesday, June 24, 2014 7:52:49 PM UTC-4, paul bor wrote:
>>>>
>>>> Hi folks,
>>>>
>>>>
>>>>
>>>> I am trying to change the tittle in my charts, but I am not able. I got
>>>> the data right, but I can't get the tittle right. Please help me.
>>>>
>>>>
>>>>
>>>> Here is what I have:
>>>>
>>>> <script src="https://www.google.com/jsapi";></script>
>>>> <script src="http://code.jquery.com/jquery-1.10.1.min.js";></script>
>>>> <script src="https://jquery-csv.googlecode.com/files/jquery.csv-0.71.js
>>>> "></script>
>>>>
>>>> <script>
>>>>
>>>> google.load("visualization", "1", {packages:["corechart"]});
>>>>
>>>> google.setOnLoadCallback(drawChart);
>>>>
>>>> function drawChart(){
>>>>
>>>> drawChartFromCSV("data.csv" ,'chart_div');
>>>>
>>>> drawChartFromCSV("data1.csv" ,'chart_div2');
>>>>
>>>> drawChartFromCSV("data3.csv" ,'chart_div3');
>>>>
>>>> }
>>>>
>>>> function drawChartFromCSV(filename, elementId, verticalUnit){
>>>>
>>>> $.get(filename, function(csvString) {
>>>>
>>>> var arrayData = $.csv.toArrays(csvString, {onParseValue:
>>>> $.csv.hooks.castToScalar});
>>>>
>>>> var data = new google.visualization.arrayToDataTable(arrayData);
>>>>
>>>> var view = new google.visualization.DataView(data);
>>>>
>>>> view.setColumns([0,1]);
>>>>
>>>> var options = {'title':'Metrics 1',
>>>>
>>>> 'fontSize':14,
>>>>
>>>> 'width':400,
>>>>
>>>> 'height':300};
>>>>
>>>> var options2 = {'title':'Metrics 2',
>>>>
>>>> 'fontSize':14,
>>>>
>>>> 'width':400,
>>>>
>>>> 'height':300};
>>>>
>>>> var options3 = {'title':'Metrics 3',
>>>>
>>>> 'fontSize':14,
>>>>
>>>> 'width':400,
>>>>
>>>> 'height':300};
>>>>
>>>> var chart = new
>>>> google.visualization.PieChart(document.getElementById(elementId));
>>>>
>>>> chart.draw(data, options);
>>>>
>>>> });
>>>>
>>>> }
>>>>
>>>> </script>
>>>>
>>>> </head>
>>>>
>>>> <body>
>>>>
>>>> <span id='chart_div' style='width: 350px; display:
>>>> inline-block'></span>
>>>>
>>>> <span id='chart_div2' style='width: 350px; display:
>>>> inline-block'></span>
>>>>
>>>> <span id='chart_div3' style='width: 350px; display:
>>>> inline-block'></span>
>>>>
>>>> </body>
>>>>
>>>> </html>
>>>>
>>>>
>>>> Thanks,
>>>>
>>>> Paul
>>>>
>>>>
>>>>
>>>
--
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.
