We Keep Coding

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

Display bar chat in jqplot in a specific color for a particular range values

I tried this code for changing the color of -260 range value, but it is not working. For this i used the scripts :
<script type="text/javascript" src="../js/jqplot/jquery.min.js"></script>
<script type="text/javascript" src="../js/jqplot/jquery.jqplot.min.js"></script>
<script type="text/javascript" src="../js/jqplot/jqplot.categoryAxisRenderer.min.js "></script>
<script type="text/javascript" src="../js/jqplot/jqplot.barRenderer.min.js"></script>
<link rel="stylesheet" type="text/css" href="./css/jquery.jqplot.min.css" />
This is the render script that i used to change the color. In this script, $.jqplot.ColorGenerator is not working properly.
<script>
var s1 = [460, -260, 690, 820];
$(document).ready(function() {
// Can specify a custom tick Array.
// Ticks should match up one for each y value (category) in the series.
var ticks = ['May', 'June', 'July', 'August'];
$.jqplot.ColorGenerator = function(P) {
if (this.idx == null)
this.idx = -1; // keep track of our idx
this.next = function()
{
this.idx++; // get the next color
if (s1[this.idx] < -200) // is the value in our data less 200
return 'red';
else
return 'blue';
}
this.get = function() // this is not used but it needed to be defined
{
return 'blue';
}
}
var plot1 = $.jqplot('chart1', [s1], {
animate: true,
animateReplot: true,
// The "seriesDefaults" option is an options object that will
// be applied to all series in the chart.
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
rendererOptions: {fillToZero: true,
animation: {speed: 2500},
varyBarColor: true,
useNegativeColors: false
}
},
// 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:[
{label:'Hotel'},
{label:'Event Regristration'},
{label:'Airfare'}
],
// 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'
},
axes: {
// Use a category axis on the x axis and use our custom ticks.
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ticks
},
// 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: {
pad: 1.05,
tickOptions: {formatString: '$%d'}
}
},
highlighter: {
show: true,
sizeAdjust: 7.5
},
cursor: {
show: false
},
canvasOverlay: {
show: true,
objects: [
{horizontalLine: {
linePattern: 'dashed',
name: "threshold",
y: -250,
color: "#d4c35D",
shadow: false,
showTooltip: true,
tooltipFormatString: "Threshold=%'d",
showTooltipPrecision: 0.5
}}
]
}
});
});
</script>

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.

Highcharts X-Axis New Values

I am using highcharts to draw a column chart as following:
var chart;
var count = 0;
$(function () {
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'graph',
type: 'column',
margin: [ 50, 50, 100, 80]
},
title: {
text: 'Random Data'
},
xAxis: {
categories: [
'T1',
'T2'
],
startOnTick: true,
endOnTick: true,
labels: {
rotation: -45,
align: 'right',
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
},
yAxis: {
min: 0,
title: {
text: 'Y-Axis'
}
},
legend: {
enabled: false
},
tooltip: {
formatter: function() {
return '<b>'+ this.x +'</b><br/>'+
'Tip is: '+ Highcharts.numberFormat(this.y, 1);
}
},
series: [{
name: 'Population',
data: [34.4, 21.8],
dataLabels: {
enabled: true,
rotation: -90,
color: '#FFFFFF',
align: 'right',
x: 4,
y: 10,
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
}]
});
});
});
I added the following function in order to add new points to the chart
function addPoints(name,acc)
{
var series = chart.series[0];
series.addPoint(acc, false, true);
categories = chart.xAxis[0].categories;
categories.push(name+count);
count++;
chart.xAxis[0].setCategories(categories, false);
chart.redraw();
}
The problem is that everytime I add a new point, one column shifts out of the chart. I would like to keep all columns in the chart view, so when I add a new point the chart just zooms out.
Check it on JSFiddle
Thanks in Advance ....

addPoint (Object options, [Boolean redraw], [Boolean shift], [Mixed animation])
Add a point to the series after render time.
Parameters
options: Number|Array|Object
The point options. If options isa single number, a point with that y value is appended to the series.If it is an array, it will be interpreted as x and y values respectively, or inthe case of OHLC or candlestick, as [x, open, high, low, close]. If it is an object, advanced options as outlined under series.data are applied.
redraw: Boolean
Defaults to true. Whether to redraw the chart after the point is added. When adding more thanone point, it is highly recommended that the redraw option beset to false, and instead chart.redraw() is explicitly calledafter the adding of points is finished.
shift: Boolean
Defaults to false. When shift is true, one point is shifted off the start of the series as one is appended to the end. Use this option for live charts monitoring a value over time.
animation: Mixed
Defaults to true. When true, the graph will be animated with default animationoptions. The animation can also be a configuration object with properties durationand easing.
series.addPoint(acc, false, true);
/\ here's the problem, it should be false
Reference
http://api.highcharts.com/highstock#Series
Updated demo

Show Y axis on right side of chart with jqPlot

I am using below code to show Y axis of jqPlot at right side but its only showing me at left side:
$.jqplot.config.enablePlugins = true;
var test2 = readXML(posi);
plot2 = $.jqplot('chart2', [test2], {
series: [{ renderer: $.jqplot.OHLCRenderer, rendererOptions: { candleStick: true, wickColor: '282828',
upBodyColor: '00C000', fillUpBody: true, downBodyColor: 'F81700',
fillDownBody: true, lineWidth: 1.5, tickLength: true, background: 'C8C8C6',
closeColor: '282828', openColor: '282828'
}
}, { xaxis: 'x2axis', yaxis: 'y2axis'}],
axesDefaults: {
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
tickOptions: {
angle: 30
}
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer
},
x2axis: {
renderer: $.jqplot.CategoryAxisRenderer
},
yaxis: {
autoscale: true
},
y2axis: {
autoscale: true
}
}
});
Please tell me where I am where my mistake is.
I have got the code above from the reference: http://www.jqplot.com/tests/canvasAxisTests.php in this the third example is showing values of at right side. I am using candlestick chart of jqPlot.
Thanks

Take a look at the CSS file that comes with the jqplot. It defines the settings for the jqplot-yaxis, and so you can use that for setting the desired location.