Создание многолинейных графиков с помощью Google Charts API

Question

Я пытаюсь нарисовать несколько линий на линейном графике, используя диаграммы Google, используя данные JSON, поступающие из API. Я могу нарисовать одну линию, используя данные точек из API, однако не уверен в формате данных для нескольких линий.

Это мой код на стороне клиента, который использует диаграммы Google

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; 

Таблица, которую я наблюдаю, выглядит следующим образом

Однако я пытаюсь сгенерировать изображение, похожее на это

Может ли кто-нибудь помочь мне с форматом данных JSON, который будет генерировать подобное изображение с несколькими строками.

Кроме того, есть ли способ указать, что я хотел бы видеть определенные линии пунктирными и некоторые другие сплошные на многолинейном графике, как показано ниже.

PS: я знаю, что вы можете жестко закодировать точки следующим образом, чтобы создать несколько строк. Однако я бы предпочел, чтобы он исходил из объекта json, как показано выше, поэтому я могу заменить его конечной точкой API REST, которая испускает объект JSON.

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

РЕДАКТИРОВАТЬ: Основываясь на ответе @ WhiteHat ниже, я попытался создать диаграмму из 4 линий, две из которых пунктирные, а две сплошные. Каждая из этих линий будет иметь пять точек на графике: 17-я неделя, 18-я неделя, 19-я неделя, 20-я неделя и 21-я неделя. Однако я вижу, что нарисованы только две линии.

Это мой ввод JSON ниже

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

РЕДАКТИРОВАТЬ для добавления цвета Это моя попытка указать цвет на входе JSON для диаграммы. Тем не менее, я не могу получить цвет по выбору. Пожалуйста, посоветуйте, как я могу указать цвет для добавления.

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

для добавления нескольких строк, добавления нескольких столбцов в таблицу данных

таблица данных должна иметь один столбец для оси x,
каждый дополнительный столбец будет для оси у

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

Вы также можете добавить столбцы для ролей , таких как стиль или уверенность
роль будет применена к столбцу серии следующим образом

роль достоверности изменит строки на пунктирные, если значение роли равно false, в следующем примере третья строка будет пунктирной ...

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