I'm looking for a way to have multiple series on my graphics, with the same scales but displayed only once.
as you can see here :
http://jsfiddle.net/Youkoal/d3xwnqdu/
I have 4 séries and the chart display all 4 axis.
I have noted that this properties do not seem to work here:
TextStyle: {color: 'none'}
nor
{format: 'none'}
when included in the axis options.
How can I 'hide' those axis or put all series on same scales?
the first letter in textStyle should be lowercase...
textStyle: {
color: 'none'
}
this will hide the text, but the chart will still allocate room for the labels,
to minimize, reduce the fontSize...
textStyle: {
color: 'none',
fontSize: 1
}
ideally we could use textPosition: 'none', but this option is not supported for material charts.
Tracking Issue for Material Chart Feature Parity
see following working snippet...
google.charts.load('current', {
packages: ['bar']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['Semaines', 'Test Region', 'Test2 Region', 'Test SerieNE', 'Test2 SerieNE', 'Test SerieS', 'Test2 SerieS', 'Test SerieO', 'Test2 SerieO'],
['Semaine 1', 0, 0, 0, 0, 0, 0, 0, 0],
['Semaine 2', 0, 0, 0, 0, 0, 0, 0, 0],
['Semaine 3', 0, 0, 0, 0, 0, 0, 0, 0],
['Semaine 4', 24, 0, 21, 0, 0, 0, 3, 0],
['Semaine 5', 122, 0, 21, 0, 52, 0, 49, 0],
['Semaine 6', 361, 0, 23, 0, 325, 0, 13, 0],
['Semaine 7', 51, 0, 21, 0, 11, 0, 19, 0],
['Semaine 8', 81, 3, 3, 0, 64, 3, 14, 0],
['Semaine 9', 711, 22, 81, 3, 527, 9, 103, 10],
['Semaine 10', 139, 13, 26, 5, 104, 5, 9, 3],
['Semaine 11', 255, 12, 139, 2, 33, 4, 83, 6],
['Semaine 12', 256, 10, 23, 4, 15, 5, 218, 1],
['Semaine 13', 145, 26, 84, 7, 58, 16, 3, 3],
['Semaine 14', 112, 15, 51, 0, 34, 11, 27, 4],
['Semaine 15', 122, 27, 29, 8, 53, 14, 40, 5],
['Semaine 16', 98, 18, 17, 6, 31, 7, 50, 5],
['Semaine 17', 87, 21, 12, 6, 37, 3, 38, 12],
]);
var options = {
chart: {
title: 'Suivis hebdo',
subtitle: 'Pilotage',
},
bars: 'vertical',
isStacked: true,
height: 600,
series: {
2: {
targetAxisIndex: 1
},
3: {
targetAxisIndex: 1
},
4: {
targetAxisIndex: 2
},
5: {
targetAxisIndex: 2
},
6: {
targetAxisIndex: 3
},
7: {
targetAxisIndex: 3
}
},
vAxis: {
format: 'decimal',
viewWindow: {
min: 0,
max: 1000
}
},
vAxes: {
1: {
textStyle: {
color: 'none',
fontSize: 1
}
},
2: {
textStyle: {
color: 'none',
fontSize: 1
}
},
3: {
textStyle: {
color: 'none',
fontSize: 1
}
}
},
};
var chart = new google.charts.Bar(document.getElementById('chart_div'));
chart.draw(data, google.charts.Bar.convertOptions(options));
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
notes:
1) need to use the correct library, jsapi should no longer be used, instead use loader.js
this will only change the load statement, see above snippet...
2) you can use option vAxis to set the scale for all vAxes
3) it isn't necessary to move the first series to another targetAxisIndex
I'm using google visualization charts in my grails app. I'm using line chart to present some data but it behaves oddly when I add alot rows to data here are screens
how could I prevent such scalling ? I woudl like to scalling be the same when i have alot data and none data. I don't mean the length of chart because its natural it gets bigger when I add more data, but size of labels hAxis labels and vAxis label is getting bigger without reason
here is how I created chart
visualization.draw(visualization_data, {width: 55840, title: 'Wykres wydajno\u015Bci', vAxis: {textPosition: 'in'}, hAxis: {direction: 1, slantedText: true, slantedTextAngle: 90}, pointSize: 10, chartArea: {top: 10, width: '50%', height: '50%', left: 10}, legend: {position: 'right'}});
and styling
#linechart {
overflow-x: scroll;
overflow-y: hidden;
width: 100%;
height: 500px;
}
you can use the textStyle option on both axis' to set the fontSize
textStyle: {
fontSize: 12
}
see following working snippet...
(but width: 55840 seems too wide??)
google.charts.load('current', {
callback: function () {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', '2005');
data.addColumn('number', '2006');
data.addRows([
[new Date('01/01/2016'), 200, 210],
[new Date('01/02/2016'), 190, 220],
[new Date('01/03/2016'), 205, 200],
[new Date('01/04/2016'), 220, 230],
[new Date('01/05/2016'), 212, 210],
[new Date('01/06/2016'), 185, 193],
[new Date('01/07/2016'), 196, 207],
[new Date('01/08/2016'), 200, 210],
[new Date('01/09/2016'), 190, 220],
[new Date('01/10/2016'), 205, 200],
[new Date('01/11/2016'), 220, 230],
[new Date('01/12/2016'), 212, 210],
[new Date('01/13/2016'), 185, 193],
[new Date('01/14/2016'), 196, 207],
[new Date('01/15/2016'), 200, 210],
[new Date('01/16/2016'), 190, 220],
[new Date('01/17/2016'), 205, 200],
[new Date('01/18/2016'), 220, 230],
[new Date('01/19/2016'), 212, 210],
[new Date('01/20/2016'), 185, 193],
[new Date('01/21/2016'), 196, 207],
[new Date('01/22/2016'), 200, 210],
[new Date('01/23/2016'), 190, 220],
[new Date('01/24/2016'), 205, 200],
[new Date('01/25/2016'), 220, 230],
[new Date('01/26/2016'), 212, 210],
[new Date('01/27/2016'), 185, 193],
[new Date('01/28/2016'), 196, 207],
[new Date('01/29/2016'), 200, 210],
[new Date('01/30/2016'), 190, 220],
[new Date('01/31/2016'), 205, 200]
]);
var options = {
width: 55840,
height: 800,
title: 'Wykres wydajno\u015Bci',
vAxis: {
textPosition: 'in',
textStyle: {
fontSize: 12
}
},
hAxis: {
direction: 1,
slantedText: true,
slantedTextAngle: 90,
textStyle: {
fontSize: 12
}
},
pointSize: 10,
chartArea: {top: 10, width: '50%', height: '50%', left: 10},
legend: {position: 'right'}
};
var chart = new google.visualization.LineChart(document.getElementById('linechart'));
chart.draw(data, options);
},
packages: ['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="linechart"></div>
Here is my chart so far:
JSFiddle
<!-- begin snippet: js hide: false console: true -->
<!-- language: lang-js -->
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawVisualization);
function drawVisualization() {
// Some raw data (not necessarily accurate)
var data = google.visualization.arrayToDataTable([
['Day', 'data1', 'data2', 'data3', 'data4', 'data1 compare', 'data2 compare', 'data3 compare', 'data4 compare', '', ''],
[0.85, 165, 938, 522, 998, null, null, null, null, 614.6, 500],
[1.15, null, null, null, null, 165, 938, 522, 998, 614.6, 510],
[1.5, 0, 0, 0, 0, 0, 0, 0, 0, null, null ],
[1.85, 135, 1120, 599, 1268, null, null, null, null, 682, 530],
[2.15, null, null, null, null, 165, 938, 522, 998, 682, 540],
[14, 135, 1120, 599, 1268, null, null, null, null, 682, 530],
[16, null, null, null, null, 165, 938, 522, 998, 682, 540]
]);
var options = {
title : 'Chart',
vAxes: [
{title: 'foo'},
{title: 'bar'}
],
//hAxis: { ticks: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]},
hAxis: {
ticks: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31],
textStyle : {
fontSize: 9 // or the number you want
}
},
seriesType: 'bars',
bar: { groupWidth: 1000 },
isStacked: true,
legend: 'none',
interpolateNulls: true,
series: {
0: {
targetAxisIndex: 0
},
4: {
targetAxisIndex: 0
},
8: {
targetAxisIndex: 1,
type: 'line'
},
9: {
targetAxisIndex: 1,
type: 'line'
}
}
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
<!-- language: lang-html -->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
I wanted to ask if there is a way to make elements in chart make bigger, but have a horizontal scrollbar with vAxes labels fixed and always visible?
Something like this:
Google Charts has this explorer feature whereby you can scroll and zoom in/out of the Chart. However, no buttons or scroll bar will be displayed. You will have to use your mouse to drag and move horizontally on the chart displayed.
To allow this feature, simply add explorer: {axis: 'horizontal'} in your options object. You may notice that you can visit areas where there is no data displayed, to stop this add keepInBounds: true to the explorer options to give explorer: {axis: 'horizontal', keepInBounds: true}.
More information on the explorer options is available here under the table row name explorer.
If you would like a scroll bar feature, then another feature you could explore is a Google Charts ChartRangeFilter available here.
Implementation details and steps are available here and changes need to be made accordingly to your chart type.
this chart below is by Google and it displays 2 data sets (Tea, Coffee). I've been trying to play around with in order to display 5 data sets but failed. I tried changing the button.onclick function and the button.value. I have attached the initial code(2 data sets) and the modified code (5 data sets).
Initial View:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<button type="button" id="b1">Click Me!</button>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>
Google Visualization API Sample
</title>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['corechart']});
</script>
<script type="text/javascript">
// Some raw data (not necessarily accurate)
var rowData1 = [['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua Guinea',
'Rwanda', 'Average'],
['2004/05', 165, 938, 522, 998, 450, 114.6],
['2005/06', 135, 1120, 599, 1268, 288, 382],
['2006/07', 157, 1167, 587, 807, 397, 623],
['2007/08', 139, 1110, 615, 968, 215, 409.4],
['2008/09', 136, 691, 629, 1026, 366, 569.6]];
var rowData2 = [['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua Guinea',
'Rwanda', 'Average'],
['2004/05', 122, 638, 722, 998, 450, 614.6],
['2005/06', 100, 1120, 899, 1268, 288, 682],
['2006/07', 183, 167, 487, 207, 397, 623],
['2007/08', 200, 510, 315, 1068, 215, 609.4],
['2008/09', 123, 491, 829, 826, 366, 569.6]];
// Create and populate the data tables.
var data = [];
data[0] = google.visualization.arrayToDataTable(rowData1);
data[1] = google.visualization.arrayToDataTable(rowData2);
var options = {
width: 400,
height: 240,
vAxis: {title: "Cups"},
hAxis: {title: "Month"},
seriesType: "bars",
series: {5: {type: "line"}},
animation:{
duration: 1000,
easing: 'out'
},
};
var current = 0;
// Create and draw the visualization.
var chart = new google.visualization.ComboChart(document.getElementById('visualization'));
var button = document.getElementById('b1');
function drawChart() {
// Disabling the button while the chart is drawing.
button.disabled = true;
google.visualization.events.addListener(chart, 'ready',
function() {
button.disabled = false;
button.value = 'Switch to ' + (current ? 'Tea' : 'Coffee');
});
options['title'] = 'Monthly ' + (current ? 'Coffee' : 'Tea') + ' Production by Country';
chart.draw(data[current], options);
}
drawChart();
button.onclick = function() {
current = 1 - current;
drawChart();
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
Modified View:
<html>
<head>
<button type="button" id="b1" onclick="init();">Click me!</button>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", { packages: ["corechart"] });
google.setOnLoadCallback(init);
function init() {
var rowData1 = [['School', 'Book', 'Book Chapter', 'Journal Article', 'Conference', 'Average'],
['Accountancy', 165, 938, 522, 998, 450],
['Economic & Business Sciences', 135, 1120, 599, 1268, 288],
['Law', 157, 1167, 587, 807, 397],
['WitsPlus (BCom)', 139, 1110, 615, 968, 215],
['Graduate School of Business Administration', 136, 691, 629, 1026, 366]];
var rowData2 = [['School', 'Book', 'Book Chapter', 'Journal Article', 'Conference', 'Average'],
['Architecture & Planning', 122, 638, 722, 998, 450],
['Chemical and Metallurgical Engineering', 100, 1120, 899, 1268, 288],
['Civil & Environmental Engineering', 183, 167, 487, 207, 397],
['Construction Economics & Management', 200, 510, 315, 1068, 215],
['Electrical & Information Engineering', 139, 1110, 615, 968, 215],
['Mechanical, Industrial & Aeronautical Engineering', 165, 938, 522, 998, 450],
['Mining Engineering', 123, 491, 829, 826, 366]];
var rowData3 = [['School', 'Book', 'Book Chapter', 'Journal Article', 'Conference', 'Average'],
['Anatomical Science', 122, 638, 722, 998, 450],
['Clinical Medicine', 320, 1120, 279, 1268, 288],
['Oral Health Sciences', 183, 167, 487, 207, 397],
['Pathology', 200, 560, 315, 679, 215],
['Physiology', 139, 900, 615, 500, 215],
['Public Health', 165, 938, 522, 998, 450],
['Therapeutic Sciences', 183, 500, 487, 207, 397],
['Centre for Health Science Education', 139, 1110, 615, 968, 215],
['Centre for Postgraduate Studies and Research Office', 123, 491, 829, 826, 366]];
var rowData4 = [['School', 'Book', 'Book Chapter', 'Journal Article', 'Conference', 'Average'],
['Wits School of Arts', 122, 638, 722, 998, 450],
['Wits School of Education', 320, 1120, 279, 1268, 288],
['Humanities Graduate Centre', 183, 167, 487, 207, 397],
['Human & Community Development', 200, 560, 315, 679, 215],
['Literature, Language and Media', 139, 900, 615, 500, 215],
['Social Sciences', 165, 938, 522, 998, 450],
['WitsPlus (BA for the World of Work)', 123, 491, 829, 826, 366]];
var rowData5 = [['School', 'Book', 'Book Chapter', 'Journal Article', 'Conference', 'Average'],
['Biological and Life Sciences', 122, 638, 722, 998, 450],
['Animal, Plant & Environmental Sciences', 320, 1120, 279, 1268, 288],
['Molecular & Cell Biology', 183, 167, 487, 207, 397],
['Chemistry', 200, 560, 315, 679, 215],
['Physics', 139, 900, 615, 500, 215],
['Geography, Archaeology & Environmental Studies', 165, 938, 522, 998, 450],
['Geosciences', 183, 167, 487, 207, 397],
['Computer Science & Applied Mathematics', 200, 560, 315, 679, 215],
['Mathematics', 139, 900, 615, 500, 215],
['Statistics & Actuarial Science', 123, 491, 829, 826, 366]];
// Create and populate the data tables.
var data = [];
data[0] = google.visualization.arrayToDataTable(rowData1);
data[1] = google.visualization.arrayToDataTable(rowData2);
data[2] = google.visualization.arrayToDataTable(rowData3);
data[3] = google.visualization.arrayToDataTable(rowData4);
data[4] = google.visualization.arrayToDataTable(rowData5);
var options = {
width: 600,
height: 440,
vAxis: { title: "Submissions" },
hAxis: { title: "School" },
seriesType: "bars",
series: { 4: { type: "line" } },
animation: {
duration: 1000,
easing: 'out'
},
};
var current = 0;
// Create and draw the visualization.
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
var button = document.getElementById('b1');
function drawChart() {
// Disabling the button while the chart is drawing.
button.disabled = true;
google.visualization.events.addListener(chart, 'ready',
function () {
button.disabled = false;
button.value = 'Switch to ' + (current ? 'Commerce, Law & Management' : 'Engineering & the Built Environment');
});
options['title'] = 'Submissions by the ' + (current ? 'Engineering & the Built Environment' : 'Commerce, Law & Management') + ' Faculty';
chart.draw(data[current], options);
}
drawChart();
button.onclick = function () {
current = 1 - current;
drawChart();
}
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
The modified view only displays rowData1 and rowData2. I was trying to fiddle around to get it to display rowData1, rowData2, rowData3, rowData4 and rowData5.
Just to clarify,each rowData represents a faculty in a unversity and the values inside each row represents the schools in each faculty.
The faculties are as follows:
rowData1 - Commerce, Law & Management,
rowData2 - Engineering & the Built Environment,
rowData3 - Health Sciences,
rowData4 - Humanities,
rowData5 - Science.
as you may see the faculties for rowsData1 and rowData2 have been implemented.
This: current = 1 - current; will always switch between 1 and 0, that's why only the first 2 tables will be drawn.
Easier approach: When a chart has been drawn, push the first datatable to the end of the data-array, then you don't need to care about counters, data[0] is always the next table that will be drawn.
google.load("visualization", "1", {
packages: ["corechart"]
});
google.setOnLoadCallback(init);
function init() {
var rowData1 = [
['School', 'Book', 'Book Chapter', 'Journal Article', 'Conference', 'Average'],
['Accountancy', 165, 938, 522, 998, 450],
['Economic & Business Sciences', 135, 1120, 599, 1268, 288],
['Law', 157, 1167, 587, 807, 397],
['WitsPlus (BCom)', 139, 1110, 615, 968, 215],
['Graduate School of Business Administration', 136, 691, 629, 1026, 366]
];
var rowData2 = [
['School', 'Book', 'Book Chapter', 'Journal Article', 'Conference', 'Average'],
['Architecture & Planning', 122, 638, 722, 998, 450],
['Chemical and Metallurgical Engineering', 100, 1120, 899, 1268, 288],
['Civil & Environmental Engineering', 183, 167, 487, 207, 397],
['Construction Economics & Management', 200, 510, 315, 1068, 215],
['Electrical & Information Engineering', 139, 1110, 615, 968, 215],
['Mechanical, Industrial & Aeronautical Engineering', 165, 938, 522, 998, 450],
['Mining Engineering', 123, 491, 829, 826, 366]
];
var rowData3 = [
['School', 'Book', 'Book Chapter', 'Journal Article', 'Conference', 'Average'],
['Anatomical Science', 122, 638, 722, 998, 450],
['Clinical Medicine', 320, 1120, 279, 1268, 288],
['Oral Health Sciences', 183, 167, 487, 207, 397],
['Pathology', 200, 560, 315, 679, 215],
['Physiology', 139, 900, 615, 500, 215],
['Public Health', 165, 938, 522, 998, 450],
['Therapeutic Sciences', 183, 500, 487, 207, 397],
['Centre for Health Science Education', 139, 1110, 615, 968, 215],
['Centre for Postgraduate Studies and Research Office', 123, 491, 829, 826, 366]
];
var rowData4 = [
['School', 'Book', 'Book Chapter', 'Journal Article', 'Conference', 'Average'],
['Wits School of Arts', 122, 638, 722, 998, 450],
['Wits School of Education', 320, 1120, 279, 1268, 288],
['Humanities Graduate Centre', 183, 167, 487, 207, 397],
['Human & Community Development', 200, 560, 315, 679, 215],
['Literature, Language and Media', 139, 900, 615, 500, 215],
['Social Sciences', 165, 938, 522, 998, 450],
['WitsPlus (BA for the World of Work)', 123, 491, 829, 826, 366]
];
var rowData5 = [
['School', 'Book', 'Book Chapter', 'Journal Article', 'Conference', 'Average'],
['Biological and Life Sciences', 122, 638, 722, 998, 450],
['Animal, Plant & Environmental Sciences', 320, 1120, 279, 1268, 288],
['Molecular & Cell Biology', 183, 167, 487, 207, 397],
['Chemistry', 200, 560, 315, 679, 215],
['Physics', 139, 900, 615, 500, 215],
['Geography, Archaeology & Environmental Studies', 165, 938, 522, 998, 450],
['Geosciences', 183, 167, 487, 207, 397],
['Computer Science & Applied Mathematics', 200, 560, 315, 679, 215],
['Mathematics', 139, 900, 615, 500, 215],
['Statistics & Actuarial Science', 123, 491, 829, 826, 366]
];
// Create and populate the data tables.
//Note: we store the title as table-property
var data = [];
data[0] = google.visualization.arrayToDataTable(rowData1);
data[0].setTableProperty('title', 'Commerce, Law & Management');
data[1] = google.visualization.arrayToDataTable(rowData2);
data[1].setTableProperty('title', 'Engineering & the Built Environment');
data[2] = google.visualization.arrayToDataTable(rowData3);
data[2].setTableProperty('title', 'Health Sciences');
data[3] = google.visualization.arrayToDataTable(rowData4);
data[3].setTableProperty('title', 'Humanities');
data[4] = google.visualization.arrayToDataTable(rowData5);
data[4].setTableProperty('title', 'Science');
var options = {
width: 600,
height: 440,
vAxis: {
title: "Submissions"
},
hAxis: {
title: "School"
},
seriesType: "bars",
series: {
4: {
type: "line"
}
},
animation: {
duration: 1000,
easing: 'out'
},
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
var button = document.getElementById('b1');
google.visualization.events.addListener(chart, 'ready', function() {
button.disabled = false;
});
function drawChart() {
options['title'] = 'Submissions by the ' + data[0].getTableProperty('title')
+ ' Faculty';
button.disabled = true;
chart.draw(data[0], options);
//push the first table to the end
data.push(data.shift());
//set value for button
button.value = 'Switch to ' + data[0].getTableProperty('title');
}
drawChart();
button.onclick = drawChart;
}
#b1{
width:100%;
position:fixed;
top:0;
left:0;
z-index:100;
}
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<input type="button" id="b1" value="Click me!" />
<div id="chart_div"></div>
How to do in a google charts API decrease increase point from begin and the end for example 10 pixels from rigth and left or something else
This is as an example:
http://jsfiddle.net/WaUu2/374/
google.load('visualization', '1', {packages: ['controls']});
google.setOnLoadCallback(drawChart);
function drawChart () {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Year');
data.addColumn('number', 'Clicks');
data.addColumn('number', 'Position');
data.addRows([
['2003', 0, 0],
['2004', 0, 0],
['2005', 45, 60],
['2006', 155, 50],
['2007', 35, 31],
['2008', 105, 23],
['2009', 120, 56],
['2010', 65, 19],
['2011', 80, 23],
['2012', 70, 300],
['2013', 0, 0],
['2014', 0, 0]
]);
var columnsTable = new google.visualization.DataTable();
columnsTable.addColumn('number', 'colIndex');
columnsTable.addColumn('string', 'colLabel');
var initState= {selectedValues: []};
for (var i = 1; i < data.getNumberOfColumns(); i++) {
columnsTable.addRow([i, data.getColumnLabel(i)]);
initState.selectedValues.push(data.getColumnLabel(i));
}
var chart = new google.visualization.ChartWrapper({
chartType: 'AreaChart',
containerId: 'chart_div',
dataTable: data,
options: {
fontSize: 11,
width: '90%',
height: '100%',
//colors: ["#36A6FF", "#FF8F36"],
focusTarget: "category",
backgroundColor: "transparent",
pointSize: 3,
legend: { "position": "in" },
hAxis: { minValue: 1, maxValue: 9 },
series: {
0: { color: '#36A6FF' },
1: { color: '#FF8F36' }
}
}
});
var columnFilter = new google.visualization.ControlWrapper({
controlType: 'CategoryFilter',
containerId: 'colFilter_div',
dataTable: columnsTable,
options: {
filterColumnLabel: 'colLabel',
ui: {
label: 'Filter:',
allowTyping: false,
allowMultiple: true,
allowNone: false,
selectedValuesLayout: 'belowStacked'
}
},
state: initState
});
function setChartView () {
var state = columnFilter.getState();
var row;
var view = {
columns: [0]
};
for (var i = 0; i < state.selectedValues.length; i++) {
row = columnsTable.getFilteredRows([{column: 1, value: state.selectedValues[i]}])[0];
view.columns.push(columnsTable.getValue(row, 0));
}
view.columns.sort(function (a, b) {
return (a - b);
});
chart.setView(view);
chart.draw();
}
google.visualization.events.addListener(columnFilter, 'statechange', setChartView);
setChartView();
columnFilter.draw();
}
This is how it's looks like.
try this: just replace your data.addRows([ ..])with
data.addRows([
['2003', 0, 0],
['2004', 0, 0],
['2005', 45, 60],
['2006', 155, 50],
['2007', 35, 31],
['2008', 105, 23],
['2009', 120, 56],
['2010', 65, 19],
['2011', 80, 23],
['2012', 70, 300],
['2013', 0, 0],
['2014', 0, 0]
]);