javascriptchartsgoogle-visualization

Add emphasis to a series in a Line Chart


I suspect this will be a really easy question.

I am creating a Line Chart with 9 columns; one has a week number (x-axis), and 8 are data values. I would like to add emphasis to the last column. I know that I can use the Role property, but I haven't figured out how to apply it.

I've looked at the Google references for DataView_setColumns, which has some information. But I haven't gotten the right sequence figured out to make this work.

    function buildPerformanceWorkRateChart(data) {
      var data = google.visualization.arrayToDataTable(data);

      var chart = new google.visualization.LineChart(document.getElementById('performanceWorkRateTableDiv'));

      var options = {
        title: 'Performance to Work Rate',
        width:"800",
        height:"500",
      };

      var view = new google.visualization.DataView(data);
      view.setColumns([0, 1, 2, 3, 4, 5, 6, 7, 8]);

      chart.draw(view, options);
    }

That displays the chart just fine, but now I want to add emphasis to that last column. I know that in view.setColumns(), I can add an object, but the documentation isn't clear on exactly how to do that.

I have tried

view.setColumns([0, 1, 2, 3, 4, 5, 6, 7, 8, {role:'emphasis'}]);

and

view.setColumns([0, 1, 2, 3, 4, 5, 6, 7, {8, role:'emphasis']});

which is what the documentation appears to suggest. But since that doesn't work, I'm clearly misunderstanding it.

What's the correct way to add that object to assign the role to that column?

Edit: Adding a data example

[[Week, Receiving, Returns, Putaway, Picking, OB Shipping, Local Delivery, Shuttle, Site]
[Week 13, 1.2912, 0.4478, 0.4818, 0.5712, 1.0184, 0.4309, 1.1566, 0.7591],
[Week 14, 1.8817, 0.2631, 0.8040, 0.6797, 1.0250, 0.6570, 1.0823, 0.8295],
[Week 15, 1.9633, 0.3892, 0.9402, 0.6583, 1.0564, 0.9698, 1.2444, 0.9130]]

Solution

  • when adding roles using a data view,
    you also need to add the calc function to provide the value for each row, as follows...

      view.setColumns([0, 1, 2, 3, 4, 5, 6, 7, 8, {
        calc: function () {
          return true;  // true to turn on emphasis
        },
        role: 'emphasis',
        type: 'boolean'
      }]);
    

    see following working snippet...

    google.charts.load('current', {
      packages: ['corechart']
    }).then(function () {
      var data = google.visualization.arrayToDataTable([
        ['Week', 'Receiving', 'Returns', 'Putaway', 'Picking', 'OB Shipping', 'Local Delivery', 'Shuttle', 'Site'],
        ['Week 13', 1.2912, 0.4478, 0.4818, 0.5712, 1.0184, 0.4309, 1.1566, 0.7591],
        ['Week 14', 1.8817, 0.2631, 0.8040, 0.6797, 1.0250, 0.6570, 1.0823, 0.8295],
        ['Week 15', 1.9633, 0.3892, 0.9402, 0.6583, 1.0564, 0.9698, 1.2444, 0.9130]
      ]);
    
      var view = new google.visualization.DataView(data);
      view.setColumns([0, 1, 2, 3, 4, 5, 6, 7, 8, {
        calc: function () {
          return true;
        },
        role: 'emphasis',
        type: 'boolean'
      }]);
    
      var chart = new google.visualization.LineChart(document.getElementById('performanceWorkRateTableDiv'));
    
      var options = {
        title: 'Performance to Work Rate',
        width: '800',
        height: '500'
      };
    
      chart.draw(view, options);
    });
    <script src="https://www.gstatic.com/charts/loader.js"></script>
    <div id="performanceWorkRateTableDiv"></div>