With the above you could change it like this:
var columnoptions = {
title: title,
fontSize: 14,
width: 400,
height: 300
};
var pieoptions = {
title: title,
fontSize: 14,
width: 400,
height: 400
};
var opt;
var chart;
if (chartType == 'PieChart') {
chart = new google.visualization.PieChart(document.
getElementById(elementId));
opt = pieoptions;
}
else if (chartType == 'ColumnChart') {
chart = new google.visualization.ColumnChart(document.
getElementById(elementId));
opt = columnoptions;
}
else {
// invalid chart type, throw error
}
chart.draw(data, opt);
});
On Tuesday, 25 November 2014 22:50:59 UTC, paul bor wrote:
>
> 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.
