Google Line Chart: Change color when line down

Question

https://developers.google.com/chart/interactive/docs/gallery/linechart

Hello, guys, I would like to know that is there a way to change the color of the line when it is moving down. I have googled but I was not able to find anything.

like e.g the line graph is moving upwards it's ok as soon as the graph line tilts downward than that downward should only be red. If after that it moves upward then the upward line should not be red.

Here is a screenshot of what I'm trying to obtain: http://imgur.com/a/GuWDx

If anybody knows this please help me

Here is my code of what am I doing right now:

function draw_chart(chart_data, id, action)
{
    var url = base_url + "controller/function/" + id ;
    statData = getAjax(url, '', false, 'json');
    minimum = '';
    maximum = '';
    upside = '';

    if (statData.min) {
        minimum = statData.min;
    }
    if (statData.max) {
        maximum = statData.max;
    }
    if (statData.upside == '1') {
        upside = -1;
    }

    value = $("#value_" + id).val();
    var name = $('#name_' + id).val();
    var names = [];
    if (value == 2) {
        var names = name.split('/');
    } else {
        names[0] = name;
    }
    title = $("#name_" + id).val();
    google.load('visualization', '1.1', {packages: ['line', 'corechart']});
    format = $("#format-select_" + id + " option:selected").val();

    if (statData.row[0].type == 'currency') {
        format = '$#';
    } 
    var options = {
        title: title,
        width: 820,
        height: 500,
        titlePosition: 'none',
        legend: 'none',
        lineWidth: 3,
        annotation: {
            0: { style: "line"},
            1: { style: "line"}
        },
        series: {0: { style: "area"} , 1: {type: "area"}},    
        animation: {duration: 1000, easing: 'in'},
        strictFirstColumnType: true,
        fontColor: "#333333",
        fontSize: "12px",
        colors: ["#5AA023", "#3F5F9F" , ""],
        pointSize: 6,
        fontSize: 11,
        enableEvents: true,
        forceIFrame: false,
        tooltip: {showColorCode: false, },
        vAxis: {
                gridlines:{color: "#E6E6E6"},
                textStyle:{color: "#666666"}, 
                baselineColor: "#CACACA", 
                format: format,
                viewWindow:{
                    min: minimum,
                    max: maximum
                },
                direction: upside,                
            },
        hAxis: {gridlines:{color: "#E6E6E6" , count:chart_data.length}, 
                baselineColor: "#CACACA",  
                textStyle:{color: "#666666"}, 
                format: "MMM dd yyyy",
                textPosition: "out", 
                slantedText: true,
                },
        chartArea: {height: 420, width: 750, top: 14, left: 45, right: 0}
    };
    if (action && action == "update") {
        //alert(action);
    }
    else {

            var chart_div = document.getElementById('chart'+id);
            var chart_div1 = document.getElementById('chart1'+id);

            var  chart = new google.visualization.LineChart(chart_div);
            google.visualization.events.addListener(chart, 'select', clickHandler);

            data = new google.visualization.DataTable();
            data.addColumn('string', 'Season Start Date');
            data.addColumn({type: 'string', role: 'annotation'});
            data.addColumn('number', names[0].trim());

            if (value == 2) {
                data.addColumn('number', names[1].trim());
                for (i = 0; i < chart_data.length; i++)
                    data.insertRows(0, [[new Date(chart_data[i].date), parseInt(chart_data[i].val), parseInt(chart_data[i].val1)]]);
        }
        else {
                for (i = 0; i < chart_data.length; i++) {
                    if (!chart_data[i].quarter) {
                        date = chart_data[i].date.split('-');
                        month = getMonthName(date[1]);
                        day = date[2];
                        year = date[0];
                        data.insertRows(0, [[month+' '+day+' '+year , '.' , parseInt(chart_data[i].val) ]]);
                    } else {
                        data.insertRows(0, [[chart_data[i].quarter , '.' , parseInt(chart_data[i].val) ]]);
                    }
                }    
        }
    }
}
if (statData.row[0].type == 'currency') {
    var formatter = new google.visualization.NumberFormat({prefix: '$'});
    formatter.format(data, 1);
} 
    var dataView = new google.visualization.DataView(data);
  dataView.setColumns([
    // reference existing columns by index
    0, 1,
    // add function for line color
    {
      calc: function(data, row) {
        console.log("ok world!");
        var colorDown = '#0000FF';
        var colorUp = 'green';

        if ((row === 0) && (data.getValue(row, 1) < data.getValue(row + 1, 1))) {
          return colorDown;
        } else if ((row > 0) && (data.getValue(row - 1, 1) < data.getValue(row, 1))) {
          return colorDown;
        }
        return colorUp;
      },
      type: 'string',
      role: 'style'
    }
  ]);
    chart.draw(dataView, options);

Answer 1

use a DataView and setColumns to provide a function that determines line direction
and returns the appropriate line color

see following working snippet...

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

function drawLineColors() {
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'X');
  data.addColumn('number', 'Y');
  data.addRows([
    [0, 2000],
    [3, 1700],
    [6, 1400],
    [9, 2500],
    [12, 3000],
    [15, 4700],
    [18, 2200],
    [21, 1500],
    [24, 1200],
    [27, 1800],
    [30, 2600],
    [33, 2800],
    [36, 3000],
    [39, 2300],
    [42, 2000],
    [45, 4000]
  ]);

  var options = {
    curveType: 'function',
    height: 200,
    legend: {
      position: 'top'
    }
  };

  var dataView = new google.visualization.DataView(data);
  dataView.setColumns([
    // reference existing columns by index
    0, 1,
    // add function for line color
    {
      calc: function(data, row) {
        var colorDown = '#0000FF';
        var colorUp = '#FF0000';

        if ((row === 0) && (data.getValue(row, 1) < data.getValue(row + 1, 1))) {
          return colorDown;
        } else if ((row > 0) && (data.getValue(row - 1, 1) < data.getValue(row, 1))) {
          return colorDown;
        }
        return colorUp;
      },
      type: 'string',
      role: 'style'
    }
  ]);

  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
  chart.draw(dataView, options);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>