you could assign the color as a column property on the data table
then build the colors array based on the visible columns
see following working snippet…
google.charts.load('current', {
callback: drawChart,
packages: ['corechart']
});
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Year');
data.addColumn('number', 'Q1');
data.addColumn('number', 'Q2');
data.addColumn('number', 'Q3');
data.addColumn('number', 'Q4');
data.addRow(['January 2016', 500, 100, 1200, 1000]);
data.addRow(['February 2016', 500, 100, 1975, 1000]);
data.addRow(['March 2016', 500, 100, 1200, 1000]);
data.addRow(['April 2016', 500, 100, 1200, 1000]);
var colors = ['red', 'yellow', 'green', 'blue'];
colors.forEach(function (color, index) {
data.setColumnProperty(index + 1, 'color', color);
});
var options = {
chartArea: {
top: 12,
right: 0,
bottom: 72,
left: 72
},
legend: {
position: 'bottom'
},
colors: colors,
hAxis: {
slantedText: true
},
vAxis: {
title: 'Amount',
viewWindow: {
max: 2000
}
},
bar: {
groupWidth: '90%'
},
height: 400
};
$('.series-chk').on('change', drawChart);
$(window).resize(drawChart);
drawChart();
function drawChart() {
var chartColors = [];
var chartColumns = [0];
var view = new google.visualization.DataView(data);
$.each($('.series-chk'), function (index, checkbox) {
var seriesColumn = parseInt(checkbox.value);
if (checkbox.checked) {
chartColumns.push(seriesColumn);
chartColors.push(data.getColumnProperty(seriesColumn, 'color'));
}
});
view.setColumns(chartColumns);
options.colors = chartColors;
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(view, options);
}
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<input class="series-chk" id="chk-0" type="checkbox" value="1" checked /><label for="chk-0">Series 0</label>
<input class="series-chk" id="chk-1" type="checkbox" value="2" checked /><label for="chk-1">Series 1</label>
<input class="series-chk" id="chk-2" type="checkbox" value="3" checked /><label for="chk-2">Series 2</label>
<input class="series-chk" id="chk-3" type="checkbox" value="4" checked /><label for="chk-3">Series 3</label>
<div id="chart_div"></div>