How to draw google line chart with multiple strings data

Question

I want to display the results of students using a single chart.
There are 4 exam phases in a year and 5 activities in each phase and each activity has grades ranging from A to G.
I'm using google line chart for this purpose.

Code for Generating the graph

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

        google.charts.load('current', {'packages':['line']});
        google.charts.setOnLoadCallback(drawLineChart);

        function drawLineChart() {

            var data = new google.visualization.DataTable();
            data.addColumn('string', 'Phase');
            data.addColumn('string', 'Activity 1');
            data.addColumn('string', 'Activity 2');
            data.addColumn('string', 'Activity 3');
            data.addColumn('string', 'Activity 4');
            data.addColumn('string', 'Activity 5');

            data.addRows([
            ['1', 'A','B','C','D','E'],
            ['2', 'E','D','C','B','A'],
            ['3', 'A','B','C','D','E'],
            ['4', 'E','D','C','B','A'],
            ]);

            var options = {
            title: 'Student Result',
            width: 600,
            height: 550,
            legend: { position: 'bottom' },

            vAxis: { ticks: ['A','B','C','D','E','F','G']}
            };

            var chart = new google.charts.Line(document.getElementById('line_top_x'));

            chart.draw(data, google.charts.Line.convertOptions(options));
    }
  </script>
</head>
<body>
  <div id="line_top_x"></div>
</body>
</html>

Link to the Output of this code

The axis is null. It is not generating the chart as per data.

WhiteHat WhiteHat · Accepted Answer · 2019-05-24T18:11:31

if you check the data format for a line chart,
only the first column in the data table may be of type 'string',
the rest should be 'number'

in this case, you could convert each grade to a number.
then use object notation to show the grade instead of the number.
using object notation allows you to provide the value (v:) and the formatted value (f:)
{v: 0, f: 'A'}
the formatted value is displayed by default.

next, if you want to customize the vertical axis, by using ticks,
you won't be able to use a material chart --> google.charts.Line
you will need to use a classic chart instead --> google.visualization.LineChart

there are several options that are not supported by material charts, including ticks
see Tracking Issue for Material Chart Feature Parity for more info.

see following working snippet for an example...

google.charts.load('current', {
  packages:['corechart']
}).then(function () {
  var scale = {
    'A': 0,
    'B': 1,
    'C': 2,
    'D': 3,
    'E': 4,
    'F': 5,
    'G': 6
  };

  var grades = [
    ['1','A','B','C','D','E'],
    ['2','E','D','C','B','A'],
    ['3','A','B','C','D','E'],
    ['4','E','D','C','B','A']
  ];

  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Phase');
  data.addColumn('number', 'Activity 1');
  data.addColumn('number', 'Activity 2');
  data.addColumn('number', 'Activity 3');
  data.addColumn('number', 'Activity 4');
  data.addColumn('number', 'Activity 5');

  grades.forEach(function (activities) {
    var row = [];
    activities.forEach(function (grade, indexGrade) {
      if (indexGrade === 0) {
        row.push(grade);
      } else {
        row.push({
          v: scale[grade],
          f: grade
        });
      }
    });
    data.addRow(row);
  });

  var options = {
    title: 'Student Result',
    width: 600,
    height: 550,
    legend: {
      position: 'bottom'
    },
    vAxis: {
      ticks: [
        {v: 0, f: 'A'},
        {v: 1, f: 'B'},
        {v: 2, f: 'C'},
        {v: 3, f: 'D'},
        {v: 4, f: 'E'},
        {v: 5, f: 'F'},
        {v: 6, f: 'G'}
      ]
    }
  };

  var chart = new google.visualization.LineChart(document.getElementById('line_top_x'));
  chart.draw(data, options);
});

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

How to draw google line chart with multiple strings data

1 Answers