Google Line chart, remove extra lines - google-visualization

Question

I am new in Google Graphs and I am attemting to generate this graph in the photo ( expected ) below
but I am getting a little bit different graph. I have three different letters and each letter contains their own values (A1, A2, A3, B1, B2 ... e.g.).
There the code which I am trying:
function drawChart () {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('string', 'Type');
data.addColumn('number', 'Value');
data.addRows([
[new Date(2014, 0, 30), 'A', 75],
[new Date(2014, 0, 30), 'A', 100],
[new Date(2014, 0, 30), 'A', 125],
[new Date(2014, 0, 31), 'A', 75],
[new Date(2014, 0, 31), 'A', 100],
[new Date(2014, 0, 31), 'A', 125],
[new Date(2014, 0, 30), 'B', 150],
[new Date(2014, 0, 30), 'B', 175],
[new Date(2014, 0, 30), 'B', 200],
[new Date(2014, 0, 31), 'B', 150],
[new Date(2014, 0, 31), 'B', 175],
[new Date(2014, 0, 31), 'B', 200],
]);
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: 'number',
label: 'B',
calc: function (dt, row) {
return (dt.getValue(row, 1) == 'B') ? dt.getValue(row, 2) : null;
}
}, {
type: 'number',
label: 'C',
calc: function (dt, row) {
return (dt.getValue(row, 1) == 'C') ? dt.getValue(row, 2) : null;
}
}, 2]);
var chart = new google.visualization.LineChart(document.querySelector('#chart_div'));
chart.draw(view, {
height: 400,
width: 600,
hAxis: {
format: 'dd.MM.yyyy',
minValue: new Date(2014, 0, 29, 12),
maxValue: new Date(2014, 0, 31, 10)
},
series: {
0: {
// series A options
pointSize: 5,
lineWidth: 0
},
3: {
// this series draws the line
pointSize: 0,
lineWidth: 1,
visibleInLegend: false,
enableInteractivity: false,
color:'blue'
}
}
});
}
google.load('visualization', '1', {packages: ['corechart'], callback: drawChart});
And it showing me this and I don't know how remove a line in 31.01.2014 -> A3 with 30.01.2014->B1 and color of line for blue dots blue color and for red dots red line is it possible? :
But expected one is below :

Answer 1

This is a case where my answer to your previous question is not the best approach to take for this, but there is an easy solution to modify your existing code to make this work. Remove the 2 from the end of the array passed to view.setColumns:
view.setColumns([0, {
type: 'number',
label: 'A',
calc: function (dt, row) {
return (dt.getValue(row, 1) == 'A') ? dt.getValue(row, 2) : null;
}
}, {
type: 'number',
label: 'B',
calc: function (dt, row) {
return (dt.getValue(row, 1) == 'B') ? dt.getValue(row, 2) : null;
}
}, {
type: 'number',
label: 'C',
calc: function (dt, row) {
return (dt.getValue(row, 1) == 'C') ? dt.getValue(row, 2) : null;
}
}]);
and adjust your series options:
series: {
0: {
// series A options
pointSize: 5,
lineWidth: 1
},
1: {
// series B options
pointSize: 5,
lineWidth: 1
},
2: {
// series C options
pointSize: 5,
lineWidth: 1
}
}