Creating multi line graphs using Google Charts API

Question

I am attempting to draw multiple lines on a line graph using google charts, using JSON data coming from an API. I am able to draw a single line using the point data from the API, however, am unsure of the data format for multiple lines.

This is my client side code that uses google charts

var express = require('express');
var router = express.Router();
var request = require('request');

router.get('/', function(req, res){
    res.send(JSON.stringify({
        "cols": [
            {"id":"","label":"Topping","pattern":"","type":"string"},
            {"id":"","label":"Slices","pattern":"","type":"number"}
        ],
        "rows": [
            {"c":[{"v":"Mushroooooms","f":null},{"v":3,"f":null}]},
            {"c":[{"v":"Onions","f":null},{"v":1,"f":null}]},
            {"c":[{"v":"Olives","f":null},{"v":2,"f":null}]},
            {"c":[{"v":"Zucchini","f":null},{"v":1,"f":null}]},
            {"c":[{"v":"Pepperoni","f":null},{"v":2,"f":null}]}
        ]
    }))

    console.log('done with the sample api 1')
    req.flash('success_msg', 'You successfully retrieved all goals');
    console.log('done with the sample api 2')
});

module.exports = router; 

The chart I observe is as follows

However, I am attempting to generate an image that looks like this

Would somebody be able to help me with the format of JSON data that would generate an image like so, with multiple lines.

Also, is there a way to specify that I'd like to see certain lines dotted and some other solid, in a multi line graph, as below.

PS : I am aware that you could hardcode points as follows, to generate multi lines. However, I'd rather it come from a json object as I show above, so I can replace this with a REST API endpoint that emits a JSON object.

var data = google.visualization.arrayToDataTable([
                ['Year', 'Sales', 'Expenses'],
                ['2004',  1000,      400],
                ['2005',  1170,      460],
                ['2006',  660,       1120],
                ['2007',  1030,      540]
            ]); 

EDIT : Based on @WhiteHat's response below, I have tried to create a chart with 4 lines, two of which are dotted, and two solid. Each of these line would have five points in the chart, for Week 17, Week 18, Week 19, Week 20 and Week 21. However, I see that only two lines get drawn.

This is my json input below

res.send({
    "cols": [
        {"id":"","label":"Topping","pattern":"","type":"string"}, 

        {"id":"","label":"Solid-Series-1","pattern":"","type":"number"},   
        {"id":"","label":"Solid-Series-2","pattern":"","type":"number"},  
        {"id":"","label":"Dotted-Series-1","pattern":"","type":"number"},   
        {"id":"","role":"certainty","type":"boolean"},
        {"id":"","label":"Dotted-Series-2","pattern":"","type":"number"}, 
        {"id":"","role":"certainty","type":"boolean"}
    ],
    "rows": [
        {"c":[{"v":"Week 17","f":null},{"v":6,"f":null},{"v":5,"f":null},{"v":4,"f":null},{"v":3,"f":null},{"v":false}]},
        {"c":[{"v":"Week 18","f":null},{"v":12,"f":null},{"v":11,"f":null},{"v":8,"f":null},{"v":7,"f":null},{"v":false}]},
        {"c":[{"v":"Week 19","f":null},{"v":18,"f":null},{"v":15,"f":null},{"v":12,"f":null},{"v":12,"f":null},{"v":false}]},
        {"c":[{"v":"Week 20","f":null},{"v":24,"f":null},{"v":20,"f":null},{"v":16,"f":null},{"v":14,"f":null},{"v":false}]}
    ]
})

EDIT for adding color This is my attempt at specifying color in the JSON input for the chart. However, I am unable to get the color of choice. Kindly advise on how I can specify the color to add.

res.send({
         "cols": [
                 {"id":"","label":"Topping","pattern":"","type":"string"},

                 {"id":"","label":"Series 1 solid","pattern":"","type":"number"},
                 {"id":"","label":"Series 2 solid","pattern":"","type":"number"},

                 {"id":"","label":"Series 1 dotted","pattern":"","type":"number"},
                 {"id":"","role":"certainty","type":"boolean"},
                 {"id":"","label":"Series 2 dotted","pattern":"","type":"number"},
                 {"id":"","role":"certainty","type":"boolean"},
                 {"id":"","role":"style"}
             ],
             "rows": [
                 {"c":[{"v":"Week 17"},{"v":6},{"v":5},{"v":4},{"v":false},{"v":3},{"v":false},{"color":"red"}]},
                 {"c":[{"v":"Week 18"},{"v":12},{"v":11},{"v":8},{"v":false},{"v":7},{"v":false},{"color":"red"}]},
                 {"c":[{"v":"Week 19"},{"v":18},{"v":15},{"v":12},{"v":false},{"v":12},{"v":false},{"color":"red"}]},
                 {"c":[{"v":"Week 20"},{"v":24},{"v":20},{"v":16},{"v":false},{"v":14},{"v":false},{"color":"red"}]}
             ]
     })

Answer 1

to add multiple lines, add multiple columns to the data table

the data table should have one column for the x-axis,
each additional column will be for the y-axis

{
  "cols": [
    {"id":"","label":"Topping","pattern":"","type":"string"},  // x-axis
    {"id":"","label":"Slices 1","pattern":"","type":"number"},   // y-axis - series 0 - line 1
    {"id":"","label":"Slices 2","pattern":"","type":"number"},   // y-axis - series 1 - line 2
    {"id":"","label":"Slices 3","pattern":"","type":"number"},   // y-axis - series 2 - line 3
  ],
  "rows": [
    {"c":[{"v":"Mushroooooms","f":null},{"v":3,"f":null},{"v":4,"f":null},{"v":5,"f":null}]},
    {"c":[{"v":"Onions","f":null},{"v":1,"f":null},{"v":2,"f":null},{"v":3,"f":null}]},
    {"c":[{"v":"Olives","f":null},{"v":2,"f":null},{"v":3,"f":null},{"v":4,"f":null}]},
    {"c":[{"v":"Zucchini","f":null},{"v":1,"f":null},{"v":2,"f":null},{"v":3,"f":null}]},
    {"c":[{"v":"Pepperoni","f":null},{"v":2,"f":null},{"v":3,"f":null},{"v":4,"f":null}]}
  ]
}

you can also add columns for roles, such as style or certainty
the role will be applied to the series column it follows

the certainty role will change lines to dotted when the role value is false, in the following example, the third line will be dotted...

{
  "cols": [
    {"id":"","label":"Topping","pattern":"","type":"string"},  // x-axis
    {"id":"","label":"Slices","pattern":"","type":"number"},   // y-axis - series 0 - line 1
    {"id":"","label":"Slices","pattern":"","type":"number"},   // y-axis - series 1 - line 2
    {"id":"","label":"Slices","pattern":"","type":"number"},   // y-axis - series 2 - line 3
    {"id":"","role":"certainty","type":"boolean"},             // certainty role - false = dotted
  ],
  "rows": [
    {"c":[{"v":"Mushroooooms","f":null},{"v":3,"f":null},{"v":4,"f":null},{"v":5,"f":null},{"v":false}]},
    {"c":[{"v":"Onions","f":null},{"v":1,"f":null},{"v":2,"f":null},{"v":3,"f":null},{"v":false}]},
    {"c":[{"v":"Olives","f":null},{"v":2,"f":null},{"v":3,"f":null},{"v":4,"f":null},{"v":false}]},
    {"c":[{"v":"Zucchini","f":null},{"v":1,"f":null},{"v":2,"f":null},{"v":3,"f":null},{"v":false}]},
    {"c":[{"v":"Pepperoni","f":null},{"v":2,"f":null},{"v":3,"f":null},{"v":4,"f":null},{"v":false}]}
  ]
}

see following working snippet...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = new google.visualization.DataTable({
    "cols": [
      {"id":"","label":"Topping","pattern":"","type":"string"},  // x-axis
      {"id":"","label":"Slices","pattern":"","type":"number"},   // y-axis - series 0 - line 1
      {"id":"","label":"Slices","pattern":"","type":"number"},   // y-axis - series 1 - line 2
      {"id":"","label":"Slices","pattern":"","type":"number"},   // y-axis - series 2 - line 3
      {"id":"","role":"certainty","type":"boolean"},             // certainty role - false = dotted
    ],
    "rows": [
      {"c":[{"v":"Mushroooooms","f":null},{"v":3,"f":null},{"v":4,"f":null},{"v":5,"f":null},{"v":false}]},
      {"c":[{"v":"Onions","f":null},{"v":1,"f":null},{"v":2,"f":null},{"v":3,"f":null},{"v":false}]},
      {"c":[{"v":"Olives","f":null},{"v":2,"f":null},{"v":3,"f":null},{"v":4,"f":null},{"v":false}]},
      {"c":[{"v":"Zucchini","f":null},{"v":1,"f":null},{"v":2,"f":null},{"v":3,"f":null},{"v":false}]},
      {"c":[{"v":"Pepperoni","f":null},{"v":2,"f":null},{"v":3,"f":null},{"v":4,"f":null},{"v":false}]}
    ]
  });

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

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

to add colors, use the colors configuration option...

  colors: ['cyan', 'magenta', 'lime', 'yellow']

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = new google.visualization.DataTable({
    "cols": [
      {"id":"","label":"x","pattern":"","type":"string"},    // x-axis

      {"id":"","label":"y0","pattern":"","type":"number"},   // y-axis - series 0 - line 1

      {"id":"","label":"y1","pattern":"","type":"number"},   // y-axis - series 1 - line 2

      {"id":"","label":"y2","pattern":"","type":"number"},   // y-axis - series 2 - line 3
      {"id":"","role":"certainty","type":"boolean"},         // certainty role - false = dotted

      {"id":"","label":"y3","pattern":"","type":"number"},   // y-axis - series 3 - line 4
      {"id":"","role":"certainty","type":"boolean"},         // certainty role - false = dotted
    ],
    "rows": [
      {"c":[{"v":"A"}, {"v":3}, {"v":4}, {"v":5},{"v":false}, {"v":6},{"v":false}]},
      {"c":[{"v":"B"}, {"v":4}, {"v":5}, {"v":6},{"v":false}, {"v":7},{"v":false}]},
      {"c":[{"v":"C"}, {"v":3}, {"v":4}, {"v":5},{"v":false}, {"v":6},{"v":false}]}
    ]
  });

  var chart = new google.visualization.LineChart(document.getElementById('chart'));
  chart.draw(data, {
    colors: ['cyan', 'magenta', 'lime', 'yellow']
  });
});

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