Google Line chart, remove extra lines

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