We Keep Coding

JQPLOT bar graph range

I have created a dynamic bar graph using jqplot, the problem is that some values are quite big i.e. 10000000 and others are pretty small i.e. 2000 or 10000. Because of this range issue, i am only able to see the bigger valued graphs while the rest dont even appear up or appear as just a line on the axis.
Could someone please let me know how this range issue could be solved?

Following my comment, and your need to achieve a solution which includes jqplot bar chart, i'll suggest illustrating the massive difference of values by adding a second line graph to the plot.
$(document).ready(function(){
var data = [10000000, 5000000,10000,2000];
var options= {
title: 'Bar and Line Chart',
series:[{
renderer: $.jqplot.BarRenderer,
rendererOptions: {
barMargin: 5,
fillToZero: true
},
pointLabels: {
show: true,
seriesLabelIndex:1,
hideZeros:false
}
}],
axes: {
xaxis: {
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
renderer: $.jqplot.CategoryAxisRenderer,
},
yaxis: {
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
padMin: 0,
pad: 1.1,
label: ' logarithmic scale',
rendererOptions: { forceTickAt0: true}
}
},
};
$.jqplot('graph', [data,data], options );
});
Here is a working solution in jsfiddle

How to specify bar colors in a jqPlot stacked bar chart?

How do I specify my own colors for the bars in a jqPlot stacked bar chart? I am talking about setting different colors for single bars. I have gone through a couple of examples, but all of them use the default colors. Is there a way to explicitly set the colors for the bars in a stacked bar chart?
Here is the code I have now:
var s1=[11,28,22,47,11,11];
var s2=[0,6,3,0,0,0];
var s3=[1,0,3,0,0,0 ];
var dataArray = [s1, s2, s3];
var ticks = bcdarr;
var options = {
title: ' STATUS',
stackSeries: true,
seriesDefaults: {
renderer:$.jqplot.BarRenderer,
pointLabels: {
show: true
},
rendererOptions: {
barWidth: 25,
varyBarColor: true,
},
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ticks,
},
yaxis: {
//autoscale: true,
//label: 'Application Count',
min : 0,
tickInterval : 5,
max:50
}
},
axesDefaults: {
tickRenderer: $.jqplot.CanvasAxisTickRenderer ,
tickOptions: {
angle: -30,
fontSize: '10pt'
}
}
};

The best place to look for documentation on how to do things is the API Documentation. It has documentation on each component and plugin and the options available for each.
As almas shaikh implied, the setting which changes the colors of the sections of the bars in a stacked barchart is the seriesColors attribute. This is an array with the colors defined as text strings as you would provide for CSS, or a style.
In the example from which you took the above image to get (working JSFiddle):
You can add:
//Define colors for the stacked bars:
seriesColors: ["#FDF396", "#ABFD96", "#96A0FD"],
The complete function call would be:
$(document).ready(function(){
var s1 = [2, 6, 7, 10];
var s2 = [7, 5, 3, 4];
var s3 = [14, 9, 3, 8];
plot3 = $.jqplot('chart3', [s1, s2, s3], {
//Define colors for the stacked bars:
seriesColors: ["#FDF396", "#ABFD96", "#96A0FD"],
// Tell the plot to stack the bars.
stackSeries: true,
captureRightClick: true,
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
rendererOptions: {
// Put a 30 pixel margin between bars.
barMargin: 30,
// Highlight bars when mouse button pressed.
// Disables default highlighting on mouse over.
highlightMouseDown: true
},
pointLabels: {show: true}
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer
},
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
}
},
legend: {
show: true,
location: 'e',
placement: 'outside'
}
});
// Bind a listener to the "jqplotDataClick" event. Here, simply change
// the text of the info3 element to show what series and ponit were
// clicked along with the data for that point.
$('#chart3').bind('jqplotDataClick',
function (ev, seriesIndex, pointIndex, data) {
$('#info3').html('series: '+seriesIndex+', point: '+pointIndex+', data: '+data);
}
);
});
Additional (point labels):
The best place to look for documentation on how to do things is the API Documentation. It has documentation on each component and plugin and the options available for each. [Restated here and at the top of the answer because I only just added the link.]
Documentation for the point labels is in the plugin API documentation for : PointLabels (plugins/jqplot.pointLabels.js).
Specifically, the options to show the point labels are specified in
{
seriesDefaults:{
pointLabels: {show: true}
}
}
To show the labels, but not those that are zero, you would use:
{
seriesDefaults:{
pointLabels: {
show: true,
hideZeros: true
}
}
}

Try this:
Within your jqplot you are missing seriesColors. Use it something like below:
$.jqplot('chart3', [s1, s2, s3], {
seriesColors:['#000000', '#ffffff', '#000000'],
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
blah blah

jqplot hide same series of mulltiple charts by one legend possible?

I'm using some code based on jqplot which draws a barchart and allows toggling the series of the chart by clicking on the legendnames, see function code below.
Is it possible to control the series of various charts by means of only one legend? If so, how?
function drawBarchart(name,ticks,labels,s11,s12,s21,s22){
var plot1 = $.jqplot(name, [s11,s12,s21,s22], { //'chart1' -> define wrapper <div id='chart1'> </div>
// The "seriesDefaults" option is an options object that will
// be applied to all series in the chart.
grid:{borderColor:'transparent',shadow:false,drawBorder:false,shadowColor:'transparent'},
seriesDefaults:{renderer:$.jqplot.BarRenderer, //choose bar chart
rendererOptions: {fillToZero: true},
pointLabels: { show: true, location: 'e', edgeTolerance: -15 } //adds values+labels to bars
},//seriesDefaults
// Custom labels for the series are specified with the "label"
// option on the series option. Here a series option object
// is specified for each series.
series:[ //define labels
{label:labels[0], shadow: false},
{label:labels[1], shadow: false},
{label:labels[2], shadow: false},
],//series
// Show the legend and put it outside the grid, but inside the
// plot container, shrinking the grid to accomodate the legend.
// A value of "outside" would not shrink the grid and allow
// the legend to overflow the container.
legend: {
show: true,
placement: 'outsideGrid',
renderer: $.jqplot.EnhancedLegendRenderer //enables toggling data and legends
},//legend
axes: {
// Use a category axis on the x axis and use our custom ticks.
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ticks,
tickOptions: {showGridline: false}
},//xaxis
// Pad the y axis just a little so bars can get close to, but
// not touch, the grid boundaries. 1.2 is the default padding.
yaxis: {
showTicks:false,
label: 'axis1',
pad: 1.05,
tickOptions: { showGridline: false}
},//yaxis
y2axis: {
showTicks:false,
label: 'axis2',
pad: 1.05,
tickOptions: {showGridline: false}
}//yaxis
},//axes
series:[
{yaxis:'yaxis', label:'s11[0]'},
{yaxis:'y2axis', label:'s11[1]'},
{yaxis:'yaxis', label:'s12[0]'},
{yaxis:'y2axis', label:'s12[1]'},
{yaxis:'y2axis', label:'s21'},
{yaxis:'y2axis', label:'s22'},
]
}); //$.jqplot('chart1', [s1, s2, s3],
}//barchart

I have done it. here is the implementation on your code Jsfiddle Link
Take into consideration that you have to draw Legends by your self and not by using jqplot.
if you can do that then my code will take care of the rest.
$(document).ready(function () {
var graphObj = [];
var s11 = [["a",1],["b",1],["c",5],["d",2]];
var s12 = [["a",2],["b",2],["c",6],["d",5]];
var s21 = [["a",3],["b",3],["c",7],["d",1]];
var s22 = [["a",4],["b",4],["c",8],["d",8]];
drawBarchart("chart1", s11, s12, s21, s22, 0);
drawBarchart("chart2", s11, s12, s21, s22, 1);
$(".jqplot-table-legend tr").click(function(){
var index = this.rowIndex;
for(var j =0; j<graphObj.length; j++){
graphObj[j].series[index].show = !graphObj[j].series[index].show;
graphObj[j].redraw();
}
});
function drawBarchart(name, s11, s12, s21, s22, i) {
graphObj[i] = $.jqplot(name, [s11, s12, s21, s22], {
// The "seriesDefaults" option is an options object that will
// be applied to all series in the chart.
grid: {
borderColor: 'transparent',
shadow: false,
drawBorder: false,
shadowColor: 'transparent'
},
seriesDefaults: {
renderer: $.jqplot.BarRenderer, //choose bar chart
rendererOptions: {
fillToZero: true
},
pointLabels: {
show: false,
location: 'e',
edgeTolerance: -15
} //adds values+labels to bars
}, //seriesDefaults
// Custom labels for the series are specified with the "label"
// option on the series option. Here a series option object
// is specified for each series.
// Show the legend and put it outside the grid, but inside the
// plot container, shrinking the grid to accomodate the legend.
// A value of "outside" would not shrink the grid and allow
// the legend to overflow the container.
axes: {
// Use a category axis on the x axis and use our custom ticks.
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
tickOptions: {
showGridline: false
}
}, //xaxis
// Pad the y axis just a little so bars can get close to, but
// not touch, the grid boundaries. 1.2 is the default padding.
yaxis: {
showTicks: false,
label: 'axis1',
pad: 1.05,
tickOptions: {
showGridline: false
}
}, //yaxis
y2axis: {
showTicks: false,
label: 'axis2',
pad: 1.05,
tickOptions: {
showGridline: false
}
} //yaxis
}, //axes
series: [{
yaxis: 'yaxis',
label: 's11[0]'
}, {
yaxis: 'y2axis',
label: 's11[1]'
}, {
yaxis: 'yaxis',
label: 's12[0]'
}, {
yaxis: 'y2axis',
label: 's12[1]'
}, {
yaxis: 'y2axis',
label: 's21'
}, {
yaxis: 'y2axis',
label: 's22'
},
]
});
}
});

No gridlines displayed for y3axis in jqPlot

Please have a look at this jsfiddle example.
series: [{
yaxis: 'yaxis',
tickOptions: {
showGridline: true
}
}, {
yaxis: 'y3axis',
tickOptions: {
showGridline: true
}
}, {
yaxis: 'yaxis',
tickOptions: {
showGridline: true
}
}]
There are no gridlines against y3axis' ticks.
And also this example,
series: [{
yaxis: 'y3axis',
tickOptions: {
showGridline: true
}
}, {
yaxis: 'y3axis',
tickOptions: {
showGridline: true
}
}, {
yaxis: 'y3axis',
tickOptions: {
showGridline: true
}
}]
There are no gridlines at all if all the series are plotted against y3axis. The same is true for y4axis.
Can someone help me with how I can make the gridlines appear for y3axis as well?

You are getting this issue because you are using the 'y3axis' before you have used 'y2axis'. In your 1st jsFiddle change 'y3axis' to 'y2axis' (i.e. yaxis: 'y2axis') and you will then see all the grid lines. Similarly, if you change 'y3axis' to 'yaxis' in your second jsFiddle you will again see all the gridlines.
As the y-values vary greatly between you data sets, why not render your graph so all three y-axes are clearly discernable on screen as follows? :
See this jsfiddle for how I did this.
The jqPlot code used to render this chart is:
var plot1 = $.jqplot('chart1', [line1, line2, line3], {
title:'Plot with 3 Y-Axes',
series:[
{},
{yaxis:'y2axis'},
{yaxis:'y3axis'}
],
axesDefaults:{useSeriesColor: true},
axes:{
xaxis:{min:0, max:7, numberTicks: 8},
yaxis:{min:0, max:60, label: 'line1'},
y2axis:{
min:2000,
max:70000,
tickOptions: { showGridline: false }, label: 'line2'
},
y3axis:{ label: 'line3'}
},
highlighter: {
show: true,
sizeAdjust: 1
}
});
Also not how I've used the highlighter option so it's easy to see the x and y values for a point when a user hovers over a plotted point.
See here for another approach you could take which would make use of jqPlots zoom facility.

Vary Color Bar For Two Series Data in Jqplot

I want to know how to make vary color bar for two series in Jqplot. If I have only one series data, it works perfectly like the image below
The red and green color based on its value.
But if I have two series data, I can't configure to have two series color for each series data. So far, I can only make this graph
I want the two series graph can have vary color based on its value as well as the one series graph.
This is my code
chart = $.jqplot('map-chart', [dataChart, dataChart2], {
title: 'TIME',
legend: {
renderer: $.jqplot.EnhancedLegendRenderer,
show: true,
location: 'ne'
},
series: [{label: 'Current data'}, {label: 'Worst data'}],
//seriesColors: seriesColors1,
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
pointLabels: {show: true}
//rendererOptions:{
//varyBarColor: true
//}
},
axes: {
xaxis: {
label: 'station',
renderer: $.jqplot.CategoryAxisRenderer,
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
ticks: tickers,
tickOptions: {
angle: -30
}
},
yaxis: {
min: 0,
label: 'Time',
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
tickOptions: {
fontSize: '8pt'
}
}
},
highlighter: {show: false}
});
I have tried seriesColors : [seriesColors1, seriesColors2] but it didn't work.

Basically you need to create a series array, that contains a dictionary per entry, with a seriesColors entry. A working example is shown in the following jsfiddle:
plot1 = $.jqplot('chart1', [[50,100,50,50,75],[80,70,50,50,40]],
{
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
rendererOptions:{ varyBarColor : true }
},
series: [
{seriesColors: [ "#f00", "#4b0", "#b40", '#ff0', '#fb0']},
{seriesColors: ["#a30", "#4b0", "#b40", '#af0', '#fa0']}
],
highlighter: { show: false }
});
(The fiddle may stop working if I the external js files are changed; jsfiddle doesn't have jqplot libraries by default.)

I came across this today and as dr jimbob had predicted, all the external files had succumbed to link rot. I found a CDN site and updated the fiddle to the latest jQuery & JQPlot resource files, available here: http://jsfiddle.net/delliottg/WLbGt/96/
Just to satisfy the JSFiddle cop on SO that won't let me post this w/o it:
//this is not my code, it's only here to satisfy the SO require that fiddles have
// code associated with them
plot1 = $.jqplot('chart1', [[50,100,50,50,75],[80,70,50,50,40]], {
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
rendererOptions:{ varyBarColor : true }
},
series: [
{seriesColors: [ "#f00", "#4b0", "#b40", '#ff0', '#fb0']},
{seriesColors: ["#00f", "#b0b", "#a30", "#4b0", '#af0']}
],
highlighter: { show: false }
});
I had nothing to do with the fiddle itself, I just updated it so it worked. Hope this helps someone (turns out it wasn't what I was looking for, but ya pays yer money & ya takes your chances).