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/