charts - 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"}]}
             ]
     })

标签： chartsgoogle-visualization

Answer 1

添加多行，将多列添加到数据表中

数据表应该有一列用于 x 轴，
每一列将用于 y 轴

{
  "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}]}
  ]
}

您还可以为角色添加列，例如样式或确定
角色将应用于它所遵循的系列列

当角色值为假时，确定性角色将线改为虚线，在以下示例中，第三行将被虚线...

{
  "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}]}
  ]
}

请参阅以下工作片段...

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>

要添加颜色，请使用colors配置选项...

  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>