Jquery plugin for drawing trend for both negative and positive valus

Question

I have some numbers including positive and negative and I want to show them in a format of line(lind chart or trending ) . I found gRaphael very interesting and I saw a couple of examples shows that it works with positive numbers perfectly but I could not find any good plug in to show both positive and negative values like the following:

Is there any good plugin to fit this requirement?

Answer 1

You can do this with jqPlot.

Here's the code demo at jsFiddle ,tested in Firefox, using jqPlot showing a trend with negative data points like your example.

I found jqPlot easier to use with more options and better documentation than Flot or gRaphael.

jQuery(document).ready(function() {

    chartData=  [["1", "-1","2","-3","4"]];

ticks = ['Monday','Tuesday','Wed','Thursday','Friday'];

chartHistorical('history',chartData,ticks);

function chartHistorical(chartId,chartData,ticks){

    var chart = jQuery.jqplot(chartId, chartData, {
    animate: !jQuery.jqplot.use_excanvas,
    seriesDefaults: {
        renderer: jQuery.jqplotLineRenderer,
        pointLabels: {
            show: true
        },

    },
    series: [{
            label: 'Series1'
        }  ],
    seriesColors: ["#efa229"],//"#245779",

    axesDefaults: {
        base: 10, // the logarithmic base.
        tickDistribution: 'evens', // 'even' or 'power'.
        // 'even' will produce
        // with even visiual
        // (pixel)
        // spacing on the axis. 'power' will produce ticks
        // spaced by
        // increasing powers of the log base.
    },
    axesDefaults : {
        tickRenderer: jQuery.jqplot.CanvasAxisTickRenderer,
        tickOptions: {
            fontSize: '14pt' // font size for labels
        }
    },
    axes: {
        xaxis: {
            renderer:jQuery.jqplot.CategoryAxisRenderer,
            ticks: ticks
        },
        yaxis: {
            // Don't pad out the bottom of the data range.
            // By default,
            // axes scaled as if data extended 10% above and
            // below the
            // actual range to prevent data points right on
            // grid boundaries.
            // Don't want to do that here.
            padMin: 0,
            max: 4,
            min: -4
        }
    },
    tickOptions: {
        fontSize: '14pt'
    },
    legend: {
        show: true,
        location: 'n', // compass direction, nw, n, ne,
        // e, se, s, sw, w.
        xoffset: 12, // pixel offset of the legend box
        // from the x (or x2) axis.
        yoffset: 12, // pixel offset of the legend box
        // from the y (or y2) axis.
        placement: 'inside'
    },
    cursor: {
        show: false,
        showTooltip: true,
        tooltipLocation: 'ne',
    },
    grid: {
        background: 'white'
    }
});
}
    });