Line with different colors for ups and downs

As you see, the line graph can use different color for ups and downs. If previous value is bigger than current value, the line will use <strong>negativeLineColor</strong>. This feature can also be used with <strong>step </strong>and <strong>column </strong>graphs. To use it, you must set <strong>useNegativeColorIfDown </strong>to true. In case you define <strong>openField</strong> for the graph, values will be compared to <strong>openField</strong> instead of previous values.

by amcharts

HTML

<script type="text/javascript" src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/serial.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/themes/none.js"></script>
<div id="chartdiv"></div>
<input type="number" onkeyup="changeGuide(this,event)" value="2" />

CSS

#chartdiv {
	width		: 100%;
	height		: 500px;
	font-size	: 11px;
}

JavaScript

var chartData = generatechartData();

function generatechartData() {
    var chartData = [];
    var firstDate = new Date();
    firstDate.setDate(firstDate.getDate() - 150);

    for (var i = 0; i < 150; i++) {
        // we create date objects here. In your data, you can have date strings
        // and then set format of your dates using chart.dataDateFormat property,
        // however when possible, use date objects, as this will speed up chart rendering.
        var newDate = new Date(firstDate);
        newDate.setDate(newDate.getDate() + i);

        var visits = Math.round(Math.random() * 100 - 50);

        chartData.push({
            date: newDate,
            visits: visits
        });
    }
    return chartData;
}


var chart = AmCharts.makeChart("chartdiv", {
    "theme": "none",	
    "type": "serial",
		"autoMargins": false,
		"marginLeft":8,
		"marginRight":8,
		"marginTop":10,
		"marginBottom":26,
    "pathToImages": "http://www.amcharts.com/lib/3/images/",
    "dataProvider": chartData,
    "valueAxes": [{
        "id":"v1",
        "axisAlpha": 0,
        "inside": true
    }],
    "guides": [{
        "value": 0,
        "toValue": 2,
        "fillAlpha": .5
    }],
    "graphs": [{
               "useNegativeColorIfDown":true,
        "balloonText": "[[category]]<br><b>value: [[value]]</b>",
        "bullet": "round",
        "bulletBorderAlpha": 1,
        "bulletBorderColor": "#FFFFFF",
        "hideBulletsCount": 50,
        "lineThickness": 2,
        "lineColor": "#fdd400",
        "negativeLineColor": "#67b7dc",
        "valueField": "visits"
    }],
    "chartScrollbar": {
    },
    "chartCursor": {
        "valueLineEnabled":true,
        "valueLineBalloonEnabled":true
    },
    "categoryField": "date",
    "categoryAxis": {
        "parseDates": true,
        "axisAlpha": 0,
        "minHorizontalGap":60
    }
});

chart.addListener("dataUpdated", zoomChart);
//zoomChart();

function zoomChart(){
  if(chart.zoomToIndexes){
   ...