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