jqueryjquery-uijquery-pluginsstruts2-jquery-plugin

Jquery plugin for drawing trend for both negative and positive valus


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: enter image description here

Is there any good plugin to fit this requirement?


Solution

  • 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'
        }
    });
    }
        });