line charts with different negative colors

Question

Is it possible to have something like this with Jqplot or Google Visualizations

So far I was able to create something similar but not entirely what I want with jqplot

Code:

var style = {
seriesDefaults: {
    fill: true,
    fillToZero: true,
    fillAndStroke: true,
    color: "rgba(190,230,110, 0.8)",
    fillColor: "rgba(206,236,145, 0.8)",
    shadow: false,
    lineWidth: 1,
    rendererOptions: {
        highlightMouseOver: false
    }
},
seriesColors: ["#009900", "#000099", "#00cc00", "#0000cc"],
negativeSeriesColors: ["#bb0000", "#ffe700", "#dd0000"]   };

Answer 1

You could do something like that in the Google Visualization API, but you would have to calculate the 0-line intersections for the line and add them in as data points, then split your data into two different series (one positive and one negative). These axis crossing points will become part of your data (they will spawn tooltips when you hover over them), but it otherwise meets your requirements:

function drawChart () {
    var data = new google.visualization.DataTable();
    data.addColumn('number', 'X');
    data.addColumn('number', 'Y');
    data.addColumn('boolean', 'axis-crossing point');

    var y = 0;
    for (var x = 0; x < 100; x++) {
        y += ~~(Math.random() * 5) * Math.pow(-1, ~~(Math.random() * 2));
        if (y < -50) {
            y += 5;
        }
        if (y > 50) {
            y -= 5;
        }
        data.addRow([x, y, false]);
    }

    // parse the data looking for points where the data crosses the x-axis (at y = 0)
    // work backwards because we will be adding new rows to the data set
    var p1, p2, m, b, intersect;
    for (var i = data.getNumberOfRows() - 1; i > 0; i--) {
        p1 = {x: data.getValue(i - 1, 0), y: data.getValue(i - 1, 1)};
        p2 = {x: data.getValue(i, 0), y: data.getValue(i, 1)};

        if ((p1.y >= 0 && p2.y < 0) || (p1.y < 0 && p2.y >= 0)) {
            m = (p2.y - p1.y) / (p2.x - p1.x);
            b = p1.y - m * p1.x;
            intersect = -1 * b / m;
            data.insertRows(i, [
                [intersect, p1.y, true],
                [intersect, p2.y, true]
            ]);
        }
    }

    var view = new google.visualization.DataView(data);
    view.setColumns([0, {
        type: 'number',
        label: 'Positive',
        calc: function (dt, row) {
            var y = dt.getValue(row, 1);
            return data.getValue(row, 2) ? 0 : ((y >= 0) ? y : null);
        }
    }, {
        type: 'number',
        label: 'Negative',
        calc: function (dt, row) {
            var y = dt.getValue(row, 1);
            return data.getValue(row, 2) ? 0 : ((y < 0) ? y : null);
        }
    }]);

    var chart = new google.visualization.LineChart(document.querySelector('#chart_div'));
    chart.draw(view, {
        height: 400,
        width: 600,
        vAxis: {
            viewWindow: {
                min: -50,
                max: 50
            }
        }
    });
}
google.load('visualization', '1', {packages:['corechart'], callback: drawChart});

See working example: http://jsfiddle.net/asgallant/Qc869/