I am looking to get legend pagination on the new google chars API. I saw it was possible before but not finding any documentation for it now.
If it's not possible anymore, how can I get my linechart legends to expand the charts div?
I set the div as a min-height: 400px and it forces the SVG to 400px and doesnt resize the div.
I made this super quick demo showing off 35 legends and you can see how it just cuts them off. I either want it to allow some pagination or to expand the size of the chart as needed, or show a 2nd column of legends.
https://jsfiddle.net/4y800onc/
If you switch to classic mode you see it tries a really weird horizonal legend pagination. Unfortunately I cannot switch to classic mode (my app relies on material mode)
google.charts.load('current', {
'packages': ['line', 'corechart']
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var button = document.getElementById('change-chart');
var chartDiv = document.getElementById('chart_div');
var data = new google.visualization.DataTable();
data.addColumn('date', 'Month');
data.addColumn('number', "Average Temperature");
data.addColumn('number', "Average Hours of Daylight");
data.addColumn('number', "Average Hours of Daylight");
data.addColumn('number', "Average Hours of Daylight");
data.addColumn('number', "Average Hours of Daylight");
data.addColumn('number', "Average Hours of Daylight");
data.addColumn('number', "Average Hours of Daylight");
data.addColumn('number', "Average Hours of Daylight");
data.addColumn('number', "Average Hours of Daylight");
data.addColumn('number', "Average Hours of Daylight");
data.addColumn('number', "Average Hours of Daylight");
data.addColumn('number', "Average Hours of Daylight");
data.addColumn('number', "Average Hours of Daylight");
data.addColumn('number', "Average Hours of Daylight");
data.addColumn('number', "Average Hours of Daylight");
data.addColumn('number', "Average Hours of Daylight");
data.addColumn('number', "Average Hours of Daylight");
data.addColumn('number', "Average Hours of Daylight");
data.addColumn('number', "Average Hours of Daylight");
data.addColumn('number', "Average Hours of Daylight");
data.addColumn('number', "Average Hours of Daylight");
data.addColumn('number', "Average Hours of Daylight");
data.addColumn('number', "Average Hours of Daylight");
data.addColumn('number', "Average Hours of Daylight");
data.addColumn('number', "Average Hours of Daylight");
data.addColumn('number', "Average Hours of Daylight");
data.addColumn('number', "Average Hours of Daylight");
data.addColumn('number', "Average Hours of Daylight");
data.addColumn('number', "Average Hours of Daylight");
data.addColumn('number', "Average Hours of Daylight");
data.addColumn('number', "Average Hours of Daylight");
data.addColumn('number', "Average Hours of Daylight");
data.addColumn('number', "Average Hours of Daylight");
data.addColumn('number', "Average Hours of Daylight");
data.addColumn('number', "Average Hours of Daylight");
data.addColumn('number', "Average Hours of Daylight");
data.addRows([
[new Date(2014, 0), -.5, 5.7, 8, 13, 2, 9, 1, 10, 1, 11, 13, 12, 7, 6, 13, 2, 12, 3, 13, 11, 10, 5, 4, 12, 7, 11, 11, 12, 2, 9, 2, 4, 7, 8, 3, 1],
[new Date(2014, 1), .4, 8.7, 10, 10, 7, 5, 7, 2, 13, 4, 6, 6, 10, 2, 2, 3, 10, 6, 8, 10, 1, 12, 13, 3, 3, 6, 3, 11, 12, 7, 12, 10, 8, 4, 12, 10],
[new Date(2014, 2), .5, 12, 1, 10, 10, 7, 4, 5, 10, 11, 7, 7, 4, 13, 8, 5, 8, 8, 7, 5, 12, 4, 3, 6, 4, 2, 11, 7, 7, 7, 9, 11, 13, 9, 12, 11],
[new Date(2014, 3), 2.9, 15.3, 2, 3, 7, 10, 12, 11, 11, 11, 1, 5, 8, 3, 7, 2, 1, 3, 2, 8, 13, 8, 11, 6, 8, 9, 1, 8, 9, 4, 6, 8, 9, 2, 2, 1],
[new Date(2014, 4), 6.3, 18.6, 2, 13, 8, 2, 1, 3, 13, 9, 4, 4, 11, 1, 2, 13, 4, 5, 9, 8, 7, 4, 12, 1, 6, 11, 5, 5, 7, 6, 3, 5, 5, 7, 3, 11],
[new Date(2014, 5), 9, 20.9, 3, 8, 2, 5, 9, 13, 12, 3, 9, 7, 8, 3, 2, 13, 1, 1, 10, 11, 4, 4, 6, 2, 5, 13, 2, 12, 6, 13, 9, 6, 7, 12, 4, 3],
[new Date(2014, 6), 10.6, 19.8, 6, 10, 6, 12, 1, 4, 2, 6, 12, 7, 9, 12, 3, 1, 12, 7, 6, 12, 5, 9, 6, 13, 9, 1, 12, 13, 10, 5, 12, 1, 4, 6, 7, 1],
[new Date(2014, 7), 10.3, 16.6, 6, 10, 11, 2, 10, 8, 5, 7, 9, 10, 11, 3, 13, 4, 10, 9, 7, 4, 8, 3, 11, 11, 1, 1, 13, 3, 4, 8, 2, 8, 11, 2, 3, 11],
[new Date(2014, 8), 7.4, 13.3, 3, 12, 1, 10, 10, 5, 1, 1, 12, 8, 13, 9, 2, 3, 9, 9, 2, 6, 12, 5, 13, 1, 10, 11, 7, 8, 3, 12, 9, 4, 2, 10, 9, 12],
[new Date(2014, 9), 4.4, 9.9, 10, 7, 5, 1, 6, 5, 5, 1, 13, 6, 1, 4, 7, 12, 12, 10, 1, 7, 4, 12, 12, 11, 10, 13, 7, 12, 13, 5, 10, 11, 5, 5, 5, 7],
[new Date(2014, 10), 1.1, 6.6, 12, 5, 2, 13, 5, 8, 12, 8, 12, 8, 5, 1, 2, 11, 6, 11, 13, 3, 9, 7, 2, 13, 3, 2, 7, 11, 8, 8, 9, 9, 13, 12, 13, 11],
[new Date(2014, 11), -.2, 4.5, 5, 8, 3, 2, 4, 12, 10, 6, 10, 11, 4, 1, 8, 6, 13, 13, 9, 8, 10, 1, 11, 2, 9, 3, 1, 13, 12, 4, 1, 1, 9, 10, 8, 5]
]);
var materialOptions = {
chart: {
title: 'Average Temperatures and Daylight in Iceland Throughout the Year'
},
width: 900,
height: 500,
series: {
// Gives each series an axis name that matches the Y-axis below.
0: {
axis: 'Temps'
},
1: {
axis: 'Daylight'
}
},
axes: {
// Adds labels to each axis; they don't have to match the axis names.
y: {
Temps: {
label: 'Temps (Celsius)'
},
Daylight: {
label: 'Daylight'
}
}
}
};
var classicOptions = {
title: 'Average Temperatures and Daylight in Iceland Throughout the Year',
width: 900,
height: 500,
// 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: 'Temps (Celsius)'
},
1: {
title: 'Daylight'
}
},
hAxis: {
ticks: [new Date(2014, 0), new Date(2014, 1), new Date(2014, 2), new Date(2014, 3),
new Date(2014, 4), new Date(2014, 5), new Date(2014, 6), new Date(2014, 7),
new Date(2014, 8), new Date(2014, 9), new Date(2014, 10), new Date(2014, 11)
]
},
vAxis: {
viewWindow: {
max: 30
}
}
};
function drawMaterialChart() {
var materialChart = new google.charts.Line(chartDiv);
materialChart.draw(data, materialOptions);
button.innerText = 'Change to Classic';
button.onclick = drawClassicChart;
}
function drawClassicChart() {
var classicChart = new google.visualization.LineChart(chartDiv);
classicChart.draw(data, classicOptions);
button.innerText = 'Change to Material';
button.onclick = drawMaterialChart;
}
drawMaterialChart();
}
