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? :

enter image description here

But expected one is below :

enter image description here

Please share the code you've tried, and why it doesn't work. — jmac, Jan 31 '14 at 02:49
jmac I added code which I am trying, it would be better if you help me. Thanks — Umidjon Urunov, Jan 31 '14 at 11:40

score 1 · Accepted Answer · edited May 23 '17 at 11:49

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

edited May 23 '17 at 11:49

Community

1
1

answered Jan 31 '14 at 17:31

asgallant

26,060
6
72
87

asgallant thank you very much it is working! And now I need to implement it to my project, I need to generate json and give this data through the "DataTable" what is the data structure in php array? As I asked my previous question I gave a sample php array. E.g – Umidjon Urunov Jan 31 '14 at 17:50
Are you asking what the structure is in general, or how to replicate your DataTable specifically? – asgallant Jan 31 '14 at 17:59
Yes, I want to know how would be data structure, I will get data from array and is it possible use this script dynamically I mean user will select some options and depending this options the array will be generated there may be 5 letters ( A, B, C, D, E ) and now everything is hard coded, I don't know how many letters will be I mean I don't know how many series will be – Umidjon Urunov Jan 31 '14 at 18:19
What programming language are you using for building the DataTable? – asgallant Jan 31 '14 at 18:23
I am using PHP and for database MySQL – Umidjon Urunov Jan 31 '14 at 19:01
Open a new question for this, including the database structure and the format you need the data to be in. – asgallant Jan 31 '14 at 19:56
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/46591/discussion-between-umidjon-urunov-and-asgallant) – Umidjon Urunov Feb 01 '14 at 12:19

Google Line chart, remove extra lines

1 Answers1