Google Charts Options and Javascript Syntax

April 21, 2023

I have a javascript function that succesfully draws a line chart using the google charts api.

google.load('visualization', '1.1', { packages: ['corechart'] });
google.setOnLoadCallback(drawChart);

function drawChart() {

    var data = new google.visualization.DataTable();
    data.addColumn('number', 'Day In Theater');
    data.addColumn('number', 'Movie 1');
    data.addColumn('number', 'Movie 2');
    data.addColumn('number', 'Movie 3');

    data.addRows([
        [1,   37.8, 80.8, 41.8],
        [2,   30.9, 69.5, 32.4],
        [3,   25.4, 57, 25.7],
        [4,   11.7, 18.8, 10.5],
        [5,   11.9, 17.6, 10.4],
        [6,   8.8, 13.6, 7.7],
        [7,   7.6, 12.3, 9.6],
        [8,   12.3, 29.2, 10.6],
        [9,   16.9, 42.9, 14.8],
        [10,   12.8, 30.9, 11.6],
        [11,   5.3, 7.9, 4.7],
        [12,   6.6, 8.4, 5.2],
        [13,   4.8, 6.3, 3.6],
        [14,   4.2, 6.2, 3.4]
    ]);

    // var Series_To_Highlight=1;

    var options = {
        chart: {
            title: 'Box Office Earnings in First Two Weeks of Opening',
            subtitle: 'in millions of dollars (USD)'
        },
        series: {
            1: { lineWidth: 5 },
        },
        width: 900,
        height: 500
    };

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

    chart.draw(data, options);
}

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<div id='chart' style='width:800px;height:400px;'></div>

I am trying to highlight one of the series.
When I hard-code the series I want to highlight, all goes well.

var options = {
    chart: {
        title: 'Box Office Earnings in First Two Weeks of Opening',
        subtitle: 'in millions of dollars (USD)'
    },
    series: {
        1: { lineWidth: 5 },
    },
    width: 900,
    height: 500
};

However, when the series I want to highlight is a variable, it doesn’t work…

    var Series_To_Highlight=1;

    var options = {
        chart: {
            title: 'Box Office Earnings in First Two Weeks of Opening',
            subtitle: 'in millions of dollars (USD)'
        },
        series: {
            Series_To_Highlight: { lineWidth: 5 },
        },
        width: 900,
        height: 500
    };

Any advice?
Thanks

>Solution :

You need to wrap the variable with square braces to interpolate the underlying literal value of 1.

const Series_To_Highlight = 1;

const options = {
  series: {
    [Series_To_Highlight]: { lineWidth: 5 }
  }
};

See: MDN – Object initializer – Computed property names

The object initializer syntax also supports computed property names. That allows you to put an expression in brackets [], that will be computed and used as the property name. This is reminiscent of the bracket notation of the property accessor syntax, which you may have used to read and set properties already.