Creating Overlayed Line Chart - Javascript

Andr233Esterhuizen
March 24, 2023
147 views
0 votes
2 Answers

I’m trying to create a comparison line chart for student marks written on different dates.
I want to display the date and the mark for example 2021 on one line and the dates and marks which were on different dates in 2022.
i tried the following but the results keep creating the lines next to each other and not over each other. Attach is the result and then 2nd image I created an image with paint what im trying to accomplish
example

<script type="text/javascript">
    google.charts.load('current', {'packages':['corechart']});
    google.charts.setOnLoadCallback(drawChart);
    function drawChart() {
        
        var data = new google.visualization.DataTable();
        data.addColumn('date', 'Date');
        data.addColumn('number', '2021 Marks');
        data.addColumn('number', '2022 Marks');
        data.addRows([
            [new Date('2021-01-01'), 100, null],
            [new Date('2021-02-15'), 150, null],
            [new Date('2021-03-11'), 200, null],
            [new Date('2021-04-20'), 175, null],
            [new Date('2021-05-01'), 250, null],
            [new Date('2022-01-26'), null, 150],
            [new Date('2022-02-02'), null, 175],
            [new Date('2022-03-15'), null, 225],
            [new Date('2022-04-21'), null, 200],
            [new Date('2022-05-16'), null, 275]
        ]);

        var options = {
            title: 'Comparison Line Graph',
            hAxis: {
                title: 'Months',
                format: 'MMM'
            },
            vAxis: {
                title: 'Mark',
                viewWindow: {
                    min: 0,
                    max: 300
                }
            },
            series: {
                0: {
                    pointSize: 10,
                    label: '2021 Mark',
                    lineDashStyle: [2, 2],
                    targetAxisIndex: 0
                },
                1: {
                    pointSize: 10,
                    label: '2022 Mark',
                    lineDashStyle: [5, 5],
                    targetAxisIndex: 0
                }
            },
            legend: {
                position: 'top'
            }
        };

        
        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
       
        options.series[0].targetAxisIndex = 0;
        options.series[1].targetAxisIndex = 0;
        chart.draw(data, options);
    }
</script>

Answers

Workaround:

The current graph you have is the expected result since your data is in different years, 2021 and 2022.

As per Tedinoz, to obtain your desired output you can update the date to be in the same year (either 2021 or 2022) and plot the data on the chart.

Please see the updated code below changing data with year 2022 to year 2021.

Code:

<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
    
    var data = new google.visualization.DataTable();
    data.addColumn('date', 'Date');
    data.addColumn('number', '2021 Marks');
    data.addColumn('number', '2022 Marks');
    data.addRows([
        [new Date('2021-01-01'), 100, null],
        [new Date('2021-02-15'), 150, null],
        [new Date('2021-03-11'), 200, null],
        [new Date('2021-04-20'), 175, null],
        [new Date('2021-05-01'), 250, null],
        [new Date('2022-01-26'), null, 150],
        [new Date('2022-02-02'), null, 175],
        [new Date('2022-03-15'), null, 225],
        [new Date('2022-04-21'), null, 200],
        [new Date('2022-05-16'), null, 275]
    ]);

    // Loop through each row in the data table and update the year from 2022 to 2021
    for (var i = 0; i < data.getNumberOfRows(); i++) {
        var date = data.getValue(i, 0);
        if (date.getFullYear() == 2022) {
            date.setFullYear(2021);
            data.setValue(i, 0, date);
        }
    }

    var options = {
        title: 'Comparison Line Graph',
        hAxis: {
            title: 'Months',
            format: 'MMM',
            viewWindow: {
                min: new Date('2021-01-01'),
                max: new Date('2021-12-31')
            }
        },
        vAxis: {
            title: 'Mark',
            viewWindow: {
                min: 0,
                max: 300
            }
        },
        series: {
            0: {
                pointSize: 10,
                label: '2021 Mark',
                lineDashStyle: [2, 2],
                targetAxisIndex: 0
            },
            1: {
                pointSize: 10,
                label: '2022 Mark',
                lineDashStyle: [5, 5],
                targetAxisIndex: 0
            }
        },
        legend: {
            position: 'top'
        }
    };

    
    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
   
    options.series[0].targetAxisIndex = 0;
    options.series[1].targetAxisIndex = 0;
    chart.draw(data, options);
}

</script>

Output:

References:

https://developers.google.com/chart/interactive/docs/drawing_charts

https://developers.google.com/chart/interactive/docs/gallery/linechart

google charts allows multiple domain columns through the use of column roles.
on a typical chart, the first column in the data table is used as the x-axis and the only domain column by default.

but by adding multiple domain columns, we can thus create a comparison chart.
a domain column is defined by using the column role property, as follows…

data.addColumn({label: 'Date', type: 'date', role: 'domain'});  // <-- define role property

note: we must use object notation ({}) to define the column.

for our comparison chart, we will use two domain columns.

data.addColumn({label: 'Date', type: 'date', role: 'domain'});
data.addColumn({label: '2021 Marks', type: 'number'});
data.addColumn({label: 'Date', type: 'date', role: 'domain'});
data.addColumn({label: '2022 Marks', type: 'number'});

ideally, the values we are comparing would fall on the same date, just different years.
this would allow us to add the values from both years on the same row.

in this case, the values do not fall on the same date.
and since both domain columns require a value,
each row must have the same date in both domain columns (just different years).

[new Date('01/01/2021'), 100, new Date('01/01/2022'), null],
[new Date('01/26/2021'), null, new Date('01/26/2022'), 150],
[new Date('02/02/2021'), null, new Date('02/02/2022'), 175],
[new Date('02/15/2021'), 150, new Date('02/15/2022'), null],
[new Date('03/11/2021'), 200, new Date('03/11/2022'), null],
[new Date('03/15/2021'), null, new Date('03/15/2022'), 225],
[new Date('04/20/2021'), 175, new Date('04/20/2022'), null],
[new Date('04/21/2021'), null, new Date('04/21/2022'), 200],
[new Date('05/01/2021'), 250, new Date('05/01/2022'), null],
[new Date('05/16/2021'), null, new Date('05/16/2022'), 275]

structuring the data in this manner results in the desired chart.

note: since we are including null values in our dataset,
we need to include option: interpolateNulls: true
this will prevent the line from breaking when a null value is encountered.

see following working snippet for comparison chart…

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = new google.visualization.DataTable();

  data.addColumn({label: 'Date', type: 'date', role: 'domain'});
  data.addColumn({label: '2021 Marks', type: 'number'});
  data.addColumn({label: 'Date', type: 'date', role: 'domain'});
  data.addColumn({label: '2022 Marks', type: 'number'});
  data.addRows([
    [new Date('2021-01-01'), 100, new Date('2022-01-01'), null],
    [new Date('2021-01-26'), null, new Date('2022-01-26'), 150],
    [new Date('2021-02-02'), null, new Date('2022-02-02'), 175],
    [new Date('2021-02-15'), 150, new Date('2022-02-15'), null],
    [new Date('2021-03-11'), 200, new Date('2022-03-11'), null],
    [new Date('2021-03-15'), null, new Date('2022-03-15'), 225],
    [new Date('2021-04-20'), 175, new Date('2022-04-20'), null],
    [new Date('2021-04-21'), null, new Date('2022-04-21'), 200],
    [new Date('2021-05-01'), 250, new Date('2022-05-01'), null],
    [new Date('2021-05-16'), null, new Date('2022-05-16'), 275]
  ]);

  var options = {
    interpolateNulls: true,
    title: 'Comparison Line Graph',
    hAxis: {
      title: 'Months',
      format: 'MMM'
    },
    vAxis: {
      title: 'Mark',
      viewWindow: {
        min: 0,
        max: 300
      }
    },
    series: {
      0: {
        pointSize: 10,
        label: '2021 Mark',
        lineDashStyle: [2, 2],
        targetAxisIndex: 0
      },
      1: {
        pointSize: 10,
        label: '2022 Mark',
        lineDashStyle: [5, 5],
        targetAxisIndex: 0
      }
    },
    legend: {
      position: 'top'
    }
  };

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

  options.series[0].targetAxisIndex = 0;
  options.series[1].targetAxisIndex = 0;
  chart.draw(data, options);
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

note: when I run the above snippet, the tooltips display the date prior to the value entered on the row.
this is a result of the date format used: yyyy-mm-dd
changing the date format to: mm/dd/yyyy will correct this issue.

Please signup or login to give your own answer.

Click here to cancel reply.

Creating Overlayed Line Chart – Javascript

Answers

Workaround:

Code:

Output:

References: