How to add colors to spefic columns in Google Charts

I have a chart with 4 lines in different colors. Using checkboxes I can hide/show specific lines. Now when all the lines are showed (all boxes checked) line 1 is red and line 2 is yellow. When line 1 is hidden line 2 is red and line 3 is yellow.

This might be confusing for users, so i want the lines to be assigned to specific columns. Is there a way?

I currently assign colors to the lines like so:

    colors: [red, yellow, green, blue]

This image might make things more clear.

When all lines are shown:

image

When line 1 is hidden:

image2

I hope my question is clear.

EDIT: I also tried to assign the colors in the options.series as shown below, but with the same result

series: {
            0: { color: '#e2431e' ,targetAxisIndex: 0},
            1: { color: '#e7711b' ,targetAxisIndex: 1},
            2: { color: '#f1ca3a' ,targetAxisIndex: 0},
            3: { color: '#6f9654' ,targetAxisIndex: 0},       

Answers:

Answer

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>

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.