Menu
I'd like to be able to show/hide the lines on my line graph when clicking the relevant key in the legend, is this possible?
649
The Legend is hidden by setting the legend property to none in the Google Chart Options. title: 'USA City Distribution', legend: 'none' // Hides the Legend.
Double-click the chart you want to change. At the right, click Customize. Click Vertical axis. Make the changes you want.
To hide show lines on your GWT Visualization LineChart, follow these steps:-
1.Create a DataView object based on an existing DataTable object:
DataTable dataTable = DataTable.create();
DataView dataView = DataView.create(dataTable);
2.Hide the column of the curve/line that you want to hide in the DataView:
dataView.hideColumns(new int[]{<id_of_the_column>});
3.Draw the entire chart again based on the DataView:
chart.draw(dataView, getOptions());
Please note that there is a caveat here, step 3 is a costly step, for us it is taking almost 20-30 sec. for the the new graph to be drawn. But if the data is not large it should be manageable in your context.
Note: You will have to make your own legend with a checkbox and do the above stuff when user checks/unchecks a checkbox.
80
If you don't need to include scaling and animation then one option is just hide data using lineWidth and areaOpacity values;
<head>
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script>
function updateTable() {
// quick data - cleaned up for this example real data sources
data = new Array();
data[0] = new Array();
data[0][0] = "Day";
data[0][1] = "Metric 1";
data[0][2] = "Metric 2";
data[0][3] = "Metric 3";
data[1] = new Array();
data[1][0] = 1;
data[1][1] = 200;
data[1][2] = 50;
data[1][3] = 400;
data[2] = new Array();
data[2][0] = 2;
data[2][1] = 440;
data[2][2] = 140;
data[2][3] = 40;
data[3] = new Array();
data[3][0] = 3;
data[3][1] = 300;
data[3][2] = 500;
data[3][3] = 600;
var gdata = google.visualization.arrayToDataTable(data);
var options = {
// title: 'kala',
hAxis: {title: 'Days', titleTextStyle: {color: '#333'}}
,vAxis: {minValue: 0}
,height: 300
,width: 600
,chartArea: {left: 60}
,lineWidth: 2
,series: {0:{color: 'black', areaOpacity: 0.3, lineWidth: 2}
,1:{color: 'red', areaOpacity: 0.3, lineWidth: 2}
,2:{color: 'purple', areaOpacity: 0.3, lineWidth: 2}}
};
var chart = new google.visualization.AreaChart(document.getElementById('my_chart'));
chart.draw(gdata, options);
google.visualization.events.addListener(chart,
'select',
(function (x) { return function () { AreaSelectHander(chart, gdata, options)}})(1));
}
function AreaSelectHander(chart, gdata, options) {
// when ever clicked we enter here
// more code needed to inspect what actually was clicked, now assuming people
// play nicely and click only lables...
var selection = chart.getSelection();
var view = new google.visualization.DataView(gdata);
console.log(options);
// click and data index are one off
i = selection[0].column - 1;
// just simple reverse
if (options.series[i].lineWidth == 0) {
options.series[i].lineWidth = 2;
options.series[i].areaOpacity = 0.3;
}
else {
options.series[i].lineWidth = 0;
options.series[i].areaOpacity = 0.0;
}
chart.draw(gdata, options);
}
</script>
<script type='text/javascript'>
google.load('visualization', '1', {packages:['table', 'corechart']});
google.setOnLoadCallback(updateTable);
</script>
</head>
<body>
<div id='my_chart'></div>
</body>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
