Daniel,
I found another workaround: mix material options with classic options. This
works for two charts, but I don't know about more than two.
The following script solves the problem I was having:
<script type="text/javascript">
google.load('visualization', '1.1', {packages: ['line', 'corechart']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var materialChart;
var classicChart;
var button = document.getElementById('change-chart');
var materialDiv = document.getElementById('material');
var classicDiv = document.getElementById('classic');
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', "One");
data.addColumn('number', "Two");
data.addColumn('number', "Three");
data.addRows([
[new Date(2015,3,2), 199, 274.2, 86.2],
[new Date(2015,3,5), 189, 244.9, 74.6],
[new Date(2015,3,9), 173, 143, 79.2],
[new Date(2015,3,10), 194, 202.8, 113.2],
[new Date(2015,3,11), 120, 231.2, 74.5],
[new Date(2015,3,12), 197, 248.4, 88.8],
[new Date(2015,3,13), 198, 279.4, 74.1],
[new Date(2015,3,14), 86, 94.4, 44]
]);
var data2 = new google.visualization.DataTable();
data2.addColumn('number', 'Meal');
data2.addColumn('number', "One");
data2.addColumn('number', "Two");
data2.addColumn('number', "Three");
data2.addRows([[1, 15.53985503, 40.3055555, 8.38888888],
[2, 0, 0, 0],
[3, 34.57875, 35.76, 10.05775],
[4, 35.8375, 18.38333333, 25.6],
[5, 0, 0, 0],
[6, 0, 0, 0]
]);
var materialOptions = {
chart: { title: '' },
width: 900,
height: 400,
};
var classicOptions = {
title: '',
width: 400,
height: 300,
// Gives each series an axis that matches the vAxes number below.
series: {
0: {targetAxisIndex: 0},
1: {targetAxisIndex: 1}
},
vAxes: {
// Adds titles to each axis.
0: {title: 'Amount (g)'},
},
hAxis: {
ticks: [1,2,3,4,5,6]
},
vAxis: {
viewWindow: {
// max: 70
}
}
};
materialChart = new google.charts.Line(materialDiv);
classicChart = new google.visualization.LineChart(classicDiv);
classicChart.draw(data2, classicOptions);
materialChart.draw(data, materialOptions);
}
</script>
Best regards,
Richard
On Saturday, March 14, 2015 at 1:32:18 PM UTC-4, Daniel LaLiberte wrote:
>
> Richard,
>
> This sounds like the recently discovered problem where multiple material
> charts affect each other. This will be fixed in the next release,
> starting in a couple weeks.
>
> Someone found a workaround, involving drawing extra charts in between, but
> I can't find the posting that described how to do it.
>
> On Sat, Mar 14, 2015 at 12:36 PM, Richard Lucas <[email protected]
> <javascript:>> wrote:
>
>> The chart options1 and options2 specify different width and height
>> values. I want two separate charts with different overall sizes where the
>> lines fill the entire chart area.
>> The problem is that the larger chart cuts off the lines at 500 and 300
>> pixels instead of filling up the entire chart area.
>> If I specify the same height and width, this problem does not occur.
>>
>> The script is shown below:
>>
>>
>> <script type="text/javascript">
>> google.load('visualization', '1.1', {packages: ['line']});
>> google.setOnLoadCallback(drawChart);
>>
>>
>> function drawChart() {
>>
>>
>> var data = new google.visualization.DataTable();
>> data.addColumn('date', 'Date');
>> data.addColumn('number', 'One');
>> data.addColumn('number', 'Two');
>> data.addColumn('number', 'Three');
>>
>>
>> data.addRows([
>> [new Date(2014,11,16), 184, 201.5, 48],[new Date(2014,11,23), 142, 154.6,
>> 38.9],[new Date(2014,11,24), 242, 274.4, 85.1], [new Date(2014,11,25),
>> 242, 297.8, 76.6]]);
>>
>>
>> var options1 = {
>> 'title': 'Maconutrient Chart',
>> 'width': 900,
>> 'height': 500
>> };
>>
>>
>> var chart = new google.charts.Line(document.getElementById(
>> 'linechart_material'));
>>
>>
>> var data2 = new google.visualization.DataTable();
>> data2.addColumn('number', 'Meal');
>> data2.addColumn('number', 'One');
>> data2.addColumn('number', 'Two');
>> data2.addColumn('number', 'Three');
>>
>> data2.addRows([
>> [1, 15.53985503, 20.3055555, 2.38888888],
>> [2, 21, 8.16666666, 0],
>> [3, 0, 0, 0],
>> [4, 0, 0, 0],
>> [5, 0, 0, 0],
>> [6, 0, 0, 0]
>> ]);
>>
>>
>> var Classicoptions = {
>> 'title': 'Meal Chart',
>> 'width': 500,
>> 'height': 300
>> };
>>
>>
>> var chart2 = new google.charts.Line(document.getElementById(
>> 'day_material'));
>>
>>
>> chart.draw(data, options1);
>> chart2.draw(data2, Classicoptions);
>> }
>> </script>
>>
>>
>> --
>> 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]
>> <javascript:>.
>> To post to this group, send email to [email protected]
>> <javascript:>.
>> Visit this group at
>> http://groups.google.com/group/google-visualization-api.
>> For more options, visit https://groups.google.com/d/optout.
>>
>
>
>
> --
> Daniel LaLiberte <https://plus.google.com/100631381223468223275?prsrc=2>
> - 978-394-1058
> [email protected] <javascript:> 5CC, Cambridge MA
> [email protected] <javascript:> 9 Juniper Ridge Road, Acton MA
>
--
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.
