Google AreaChart different colors

Question

I have chart like this

google.charts.load('current', {
    packages: ['corechart']
});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
    // Define the chart to be drawn.
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Data');
    data.addColumn('number', 'A');
    data.addColumn('number', 'A');
    data.addColumn('number', 'A');
    data.addColumn('number', 'A');
    data.addRows([
        [
            '01.06',
            null,
            0,
            null,
            null
        ],
        [
            '01.07',
            null,
            49,
            null,
            null
        ],
        [
            '01.08',
            null,
            14,
            null,
            null
        ],
        [
            '01.09',
            null,
            13,
            null,
            null
        ],
        [
            '01.10',
            10,
            null,
            null,
            null
        ],
        [
            '01.11',
            null,
            28,
            null,
            null
        ],
        [
            '01.12',
            null,
            24,
            null,
            null
        ],
        [
            '01.13',
            null,
            22,
            null,
            null
        ],
        [
            '01.14',
            null,
            19,
            null,
            null
        ],
        [
            '01.15',
            null,
            17,
            null,
            null
        ],
        [
            '01.16',
            null,
            15,
            null,
            null
        ],
        [
            '01.17',
            10,
            null,
            null,
            null
        ],
        [
            '01.18',
            null,
            33,
            null,
            null
        ],
        [
            '01.19',
            null,
            29,
            null,
            null
        ],
        [
            '01.20',
            null,
            null,
            null,
            37
        ],
    ]);

    var options = {
        legend: 'none',
        pointSize: 5,
        series: {
            0: {
                color: '#058DC7'
            },
            1: {
                color: 'red'
            },
            2: {
                color: 'green'
            },
            3: {
                color: 'orange'
            }
        }
    };

    // Instantiate and draw the chart.
    var chart = new google.visualization.AreaChart(document.getElementById('myPieChart'));
    chart.draw(data, options);
}

https://jsfiddle.net/bvtzm2td/2/

And i need a chart like this

I am trying to do so

google.charts.load('current', {
    packages: ['corechart']
});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
    // Define the chart to be drawn.
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Data');
    data.addColumn('number', 'A');
    data.addColumn('number', 'A');
    data.addColumn('number', 'A');
    data.addColumn('number', 'A');
    data.addRows([
        [
            '01.06',
            0,
            0,
            null,
            null
        ],
        [
            '01.07',
            null,
            49,
            null,
            null
        ],
        [
            '01.08',
            null,
            14,
            null,
            null
        ],
        [
            '01.09',
            null,
            13,
            null,
            null
        ],
        [
            '01.10',
            10,
            10,
            null,
            null
        ],
        [
            '01.11',
            28,
            28,
            null,
            null
        ],
        [
            '01.12',
            null,
            24,
            null,
            null
        ],
        [
            '01.13',
            null,
            22,
            null,
            null
        ],
        [
            '01.14',
            null,
            19,
            null,
            null
        ],
        [
            '01.15',
            null,
            17,
            null,
            null
        ],
        [
            '01.16',
            null,
            15,
            null,
            null
        ],
        [
            '01.17',
            10,
            10,
            null,
            null
        ],
        [
            '01.18',
            33,
            33,
            null,
            null
        ],
        [
            '01.19',
            null,
            29,
            null,
            null
        ],
        [
            '01.20',
            null,
            37,
            null,
            37
        ],
    ]);

    var options = {
        legend: 'none',
        pointSize: 5,
        series: {
            0: {
                color: '#058DC7'
            },
            1: {
                color: 'red'
            },
            2: {
                color: 'green'
            },
            3: {
                color: 'orange'
            }
        }
    };

    // Instantiate and draw the chart.
    var chart = new google.visualization.AreaChart(document.getElementById('myPieChart'));
    chart.draw(data, options);
}

https://jsfiddle.net/bvtzm2td/3/

But it works bad and looks like this The problem is google api automatically connects red dots between 01.10 and 01.11 and between 01.17 and 01.18, but it is not needed.

Any help will be appreciated

Answer 1

In your example, you are creating chart with multiple series where each series has a different color. When there are multiple series, only adjacent points in same series will be linked with a line.

From the description of your desired result, I would suggest creating a chart with a single series where each point has a different color.

<head>
 <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
 <script type="text/javascript">
    google.charts.load('current', {
        packages: ['corechart']
    });
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {
        // Define the chart to be drawn.
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Data');
        data.addColumn('number', 'A');
        data.addColumn({type: 'string', role: 'style'});
        data.addRows([
            [
                '01.06',
                0,
                'color: red'
            ],
            [
                '01.07',
                49,
                'color: red'
            ],
            [
                '01.08',
                14,
                'color: red'
            ],
            [
                '01.09',
                13,
                'color: red'
            ],
            [
                '01.10',
                10,
                'color: #058DC7'
            ],
            [
                '01.11',
                28,
                'color: red'
            ],
            [
                '01.12',
                24,
                'color: red'
            ],
            [
                '01.13',
                22,
                'color: red'
            ],
            [
                '01.14',
                19,
                'color: red'
            ],
            [
                '01.15',
                17,
                'color: #058DC7'
            ],
            [
                '01.16',
                15,
                'color: red'
            ],
            [
                '01.17',
                10,
                'color: red'
            ],
            [
                '01.18',
                33,
                'color: red'
            ],
            [
                '01.19',
                29,
                'color: red'
            ],
            [
                '01.20',
                37,
                'color: orange'
            ],
        ]);

        var options = {
            legend: 'none',
            pointSize: 5,
            series: {
                0: {
                },
            }
        };

        // Instantiate and draw the chart.
        var chart = new google.visualization.AreaChart(document.getElementById('myPieChart'));
        chart.draw(data, options);
    }
  </script>
</head>
<body>
<!-- Identify where the chart should be drawn. -->
<div id="myPieChart"/>
</body>

Note that the point color is used for the line/area before the point which is slightly different that what you originally requested.