Несколько значений в одной строке Google Graph

Я хочу создать линейный график 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). Но я хочу собрать все эти данные в одну строку, как я уже упоминал в фото ниже. Заранее спасибо всем!

введите здесь описание изображения


google-visualization linegraph
person Umidjon Urunov    schedule 30.01.2014    source источник
comment
Возможно ли сделать так?   -  person Umidjon Urunov    schedule 31.01.2014

Ответы (1)


arrow_upward
1
arrow_downward

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

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/

person asgallant    schedule 30.01.2014
comment
Большое спасибо! Мне помогает это было очень полезно! - person Umidjon Urunov; 31.01.2014
comment
Я попытался сгенерировать другой график, похожий на этот, и я попытался сделать это ( postimg.org/image/e7yvgip7t ), но он не работает, показывая пустую страницу, пожалуйста, если вы можете дать мне направление - person Umidjon Urunov; 31.01.2014