Множество значений в одной строке Google Graph

Question

Я хочу сгенерировать в графическом графике google то же самое на картинке, но я не могу этого сделать. У меня есть A, B и C, каждая из этих букв имеет некоторые значения (A1, A2, B1, B2 ... например). Дата такая же, она отличается только временем (минуты или секунды, но день похож). Я мог бы генерировать только один указывают на одну букву в одну дату:

[cols] => Array 
     (
      [0] => Array 
       (
        [id] => 
        [label] => Timestamp 
        [type] => string 
       ) 

      [1] => Array 
       (
        [id] => 
        [label] => A 
        [type] => number 
       ) 

      [2] => Array 
       (
        [id] => 
        [label] => B 
        [type] => number 
       ) 

      [3] => Array 
       (
        [id] => 
        [label] => C 
        [type] => number 
       ) 

     ) 

[rows] => Array 
    (
     [0] => Array 
      (
       [c] => Array 
        (
         [0] => Array 
          (
           [v] => 2014-01-30 
          ) 

         [1] => Array 
          (
           [v] => 120 
          ) 

         [2] => Array 
          (
           [v] => 100 
          ) 

         [3] => Array 
          (
           [v] => 35 
          ) 

        ) 

      ) 

     [1] => Array 
      (
       [c] => Array 
        (
         [0] => Array 
          (
           [v] => 2014-01-30 
          ) 

         [1] => Array 
          (
           [v] => 334 
          ) 

         [2] => Array 
          (
           [v] => 55 
          ) 

         [3] => Array 
          (
           [v] => 15 
          ) 

        ) 

      ) 
    ) 

Эти код дает мне 3 раздельные линии с только 3 значений в одну дату (2014-01-30) и на следующий день является также то же самое (2014-01-30) Но я хочу собрать все эти данные в одной строке, как я упоминал на фотографии ниже. Заранее благодарю всех!

Answer 1

Выполнение этой работы будет требовать немного обмана. Вам нужно организовать данные, как это: нуждается в

Date  | Type | Value | Label 
--------------------------------- 
30.01.2014 | A | 75 | A1 
30.01.2014 | A | 100 | A2 
30.01.2014 | A | 125 | A3 
30.01.2014 | B | 150 | B1 
30.01.2014 | B | 175 | B2 
30.01.2014 | B | 200 | B3 
30.01.2014 | C | 180 | C1 
30.01.2014 | C | 210 | C2 
30.01.2014 | C | 270 | C3 

31.01.2014 | A | 75 | A1 
31.01.2014 | A | 100 | A2 
31.01.2014 | A | 125 | A3 
31.01.2014 | B | 150 | B1 
31.01.2014 | B | 175 | B2 
31.01.2014 | B | 200 | B3 
31.01.2014 | C | 180 | C1 
31.01.2014 | C | 210 | C2 
31.01.2014 | C | 270 | C3 

Данные, которые можно заказать в порядке, вы хотите нарисовать линию (так что если вы хотите, чтобы линия, чтобы быть в порядке A1, A2, A3, B1, B2, B3 30.01.2014, то это порядок, который должен быть в таблице).

Далее, вам нужно использовать DataView, чтобы разделить это на множество рядов данных, чтобы получить точки цвета, как ваша легенда:

var view = new google.visualization.DataView(data); 
view.setColumns([0, { 
    type: 'number', 
    label: 'A', 
    calc: function (dt, row) { 
     return (dt.getValue(row, 1) == 'A') ? dt.getValue(row, 2) : null; 
    } 
}, { 
    type: 'string', 
    role: 'annotation', 
    calc: function (dt, row) { 
     return (dt.getValue(row, 1) == 'A') ? dt.getValue(row, 3) : null; 
    } 
}, { 
    type: 'number', 
    label: 'A', 
    calc: function (dt, row) { 
     return (dt.getValue(row, 1) == 'B') ? dt.getValue(row, 2) : null; 
    } 
}, { 
    type: 'string', 
    role: 'annotation', 
    calc: function (dt, row) { 
     return (dt.getValue(row, 1) == 'B') ? dt.getValue(row, 3) : null; 
    } 
}, { 
    type: 'number', 
    label: 'A', 
    calc: function (dt, row) { 
     return (dt.getValue(row, 1) == 'C') ? dt.getValue(row, 2) : null; 
    } 
}, { 
    type: 'string', 
    role: 'annotation', 
    calc: function (dt, row) { 
     return (dt.getValue(row, 1) == 'C') ? dt.getValue(row, 3) : null; 
    } 
}, 2]); 

Затем, при составлении диаграммы, установите series опцию сделать точки и линии отображаются правильно:

series: { 
    0: { 
     // series A options 
     pointSize: 3, 
     lineWidth: 0 
     // you can set the color here with the "color" option if you want 
    }, 
    1: { 
     // series B options 
     pointSize: 3, 
     lineWidth: 0 
     // you can set the color here with the "color" option if you want 
    }, 
    2: { 
     // series C options 
     pointSize: 3, 
     lineWidth: 0 
     // you can set the color here with the "color" option if you want 
    }, 
    3: { 
     // this series draws the line 
     pointSize: 0, 
     lineWidth: 1, 
     visibleInLegend: false, 
     enableInteractivity: false 
     // you can set the color here with the "color" option if you want 
    } 
} 

Смотрите пример здесь: http://jsfiddle.net/asgallant/bn9tE/