Multi Value in one line Google Graph

Question

I want to generate in google line graph the same in the picture but I cannot to do it. I have A,B and C each of these letters have some values ( A1, A2, B1, B2 ... e.g ) The date is the same it differs only time ( minutes or seconds but day is similar ) I could generate only one point for one letter in one date:

    [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
                            )

                    )

            )
     )

These code gives me 3 seperate lines with only 3 values in one date ( 2014-01-30 ) and next date is also the same ( 2014-01-30 ) But I want to collect all these data in one line as I mentioned in photo below. Thanks in advance for everybody!

Answer 1

Making this work is going to require a bit of trickery. You need to organize your data like this:

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

The data needs to be ordered in the order you want the line drawn (so if you want the line to be in the order A1, A2, A3, B1, B2, B3 on 30.01.2014, then that is the order it must be in the table).

Next, you need to use a DataView to split this into multiple series of data to get the points color-coded like your legend:

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

Then, when drawing the chart, set the series option to make the points and line appear correctly:

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

See an example here: http://jsfiddle.net/asgallant/bn9tE/