Hide 0 valued stack bar in stacked bar chart of JQPlot - javascript

I am generating stacked bar chart using JQPlot where few stacks could have O values. my requirement is that I don't want to show O level of that stat which value is 0. please let me know what JQPLOT API I should use for that
My Code :
function getChart2()
{
var s1 = [32.40, 80.00, 80.00, 16.94, 72.12, 78.10, 80.00];
var s2 = [0.00, 12.34, 3.68, 0.00, 0.00, 0.00, 15.67];
var ticks = ['A', 'B', 'C', 'D','E','F','G'];
plot3 = $.jqplot('chartdiv', [s1, s2], {
// Tell the plot to stack the bars.
stackSeries: true,
captureRightClick: true,
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
rendererOptions: {
fillToZero: true, barDirection: 'horizontal'
},
pointLabels: {show: true}
},
axes: {
xaxis: {
pad: 1.05,
tickOptions: {formatString: '%.2f %'},
formatter:function() {if(this.x > 0.00) {
return this.x;
} }
},
yaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ticks
}
},
legend: {
show: true,
location: 'e',
placement: 'outside'
}
});
}


I used hideZeros:true option for this and it is working now.
pointLabels: {show: true,hideZeros:true,labelsFromSeries:true,xpadding: 6}


Hey guys thanks for helping me
I managed to solve my problem
i used it for to solve my problem:
stackSeries: true,
captureRightClick: true,
seriesDefaults: {
renderer: $.jqplot.BarRenderer,
rendererOptions: {
highlightMouseDown: true,
barWidth: 40,
},
pointLabels: {
show: true,
formatString: '%s',
formatter: function val(x, y) {
//my Solution
if (y != 0)
return y.toString().toHHMMSS();
},
},
},

Related

Jqplot: Why are 0 bars rendering?

I am having an issue with jqplot where stacked bars are sometimes displaying a bar for 0. I don't want a bar for 0. All of the numbers associated with each bar add up to the max. Here is what I am seeing.
Stacked bars with 0 labels removed
The problem is with MS/AL (27 stops). There is a blue bar, but that bar represents 0. This doesn't always happen though. There is actually a third color that could show in the bar, but none of this example shows it.
Here is an example with point labels showing the 0 (instead of hideZeros:true) just to prove that 0 is causing a bar to render.
Stacked bars with labels for 0s
Here is my javascript:
$.jqplot(div_id, customer_amount, {
title:{
text: v.truck_label+' ('+v.count+' stops)',
textAlign: 'left'
},
animate: true,
stackSeries: true,
axesDefaults:{
showTicks: false,
tickOptions:{
show: false,
showTicks: false,
showGridline: false
},
rendererOptions: {
baselineWidth: 1.5,
drawBaseline: false
}
},
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
rendererOptions: {
barDirection: 'horizontal',
highlightMouseOver: false,
//shadow: false
shadowAngle: 35,
shadowAlpha: 0.1,
shadowDepth: 4
},
pointLabels: {
show: true,
formatString: '%d',
hideZeros:true
}
},
axes: {
yaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
showTicks: false,
ticks: [''],
tickOptions:{
show: false,
showGridline: false
}
},
xaxis: {
max: max,
showTicks: false,
tickOptions:{
show: false,
showGridline: false
}
}
},
grid: {
drawGridLines: false,
drawBorder: false,
shadow: false,
borderColor: 'transparent',
background: 'transparent'
},
seriesColors: series_colors
});
Does anybody know what is happening? Any suggestions?

See the working fiddle...
var options = {
title: 'Title ',
stackSeries: true,
seriesColors: ["#eb4b3d", "#ffc800", "#009149"],
seriesDefaults: {
renderer: $.jqplot.BarRenderer,
pointLabels: {
show: true,
hideZeros: true
},
rendererOptions: {
barWidth: 25,
varyBarColor: true,
},
},
axes: {
xaxis: {
// renderer: $.jqplot.CategoryAxisRenderer,
//
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'
}
}
};
http://jsfiddle.net/arzv5j6o/3/

How to remove bar label when bar size is smaller than label text?

Currently working with stack bar chart in jqplot. How to remove bar label, when bar size is smaller than label text?
Fiddle Link
$(document).ready(function(){
var yAxisLabels = ["Label1", "Label2", "Label3", "Label4"];
var legendValues = ["series1", "series2", "series3", "series4"];
var pLabels1 = ['70%','38%','71%','28%'];
var pLabels2 = ['27%','49%','27%','44%'];
var pLabels3 = ['2%','10%','2%','17%'];
var pLabels4 = ['1%','4%','1%','12%'];
var group4 = [52,528,129,264];
var group3 = [94,1388,394,401];
var group2 = [1446,7130,5591,1004];
var group1 = [3772,5512,14957,633];
var series = [
{ pointLabels: { labels: pLabels4 }},
{ pointLabels: { labels: pLabels3 }},
{ pointLabels: { labels: pLabels2 }},
{ pointLabels: { labels: pLabels1 } }];
var plot = $.jqplot('chart', [[[52,1],[528,2],[129,3],[264,4]], [[94,1],[1388,2],[394,3],[401,4]], [[1446,1],[7130,2],[5591,3],[1004,4]], [[3772,1],[5512,2],[14957,3],[633,4]]], {
stackSeries: true,
seriesDefaults: {
shadow: false,
renderer: $.jqplot.BarRenderer,
rendererOptions: { fillToZero: true, barDirection: 'horizontal', highlightMouseOver: true},
pointLabels: {
show: true, stackedValue: true, location: 'w', hideZeros: true
}
},
axes: {
xaxis: {
tickOptions: {
show: true,
mark: 'cross',
formatString: "%'d",
showGridline: true
},
min: null,
max: null,
showTickMarks: true
},
yaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: yAxisLabels
}
},
grid: {
gridLineColor: '#ffffff', /**/
borderColor: '#509790',
shadowWidth: 0,
borderWidth: 0,
background: 'rgba(0,0,0,0)',
shadow: false
},
series: series
});
});
In the above picture, last bar has value as 2% which is displaying outside the bar. How to remove these type of elements while displaying outside bar?

there is a specific property for adjusting what you need:
edgeTolerance
with which you can set the minimum pixels distance between label and bar margin.
For instance...
pointLabels: {
show: true,
stackedValue: true,
location: 'w',
hideZeros: true,
edgeTolerance: 10
}

How to set Stack Series false for particular series of Data in jqPlot

I am using the jqPlot chart in one of my project.
I am creating the chart same as like below.
http://i.stack.imgur.com/p8QiA.jpg
The charts are working fine, but the line chart values should not get stack. But, in my code, the line series values also getting stacked.
For Example: Over all Stacked bar chart value is 10, the line chart value is 50. But, In my scenario the line chart value is plotting at the position 60 instead of 50.
My Code is below.
plot = $.jqplot(chartId, [d1, d2, d3], {
seriesColors: ["#d82b25", "#707b7f", "#083a6d"],
title: titles,
stackSeries: true,
animate: true,
animateReplot: true,
cursor: {
style: 'pointer',
show: true,
zoom: false,
looseZoom: false,
showTooltip: false
},
series:[
{
pointLabels: {
show: false
},
renderer: $.jqplot.BarRenderer,
showHighlight: true,
yaxis: 'yaxis',
rendererOptions: {
animation: {
speed: 2500
},
barWidth: 12,
barPadding: 20,
barMargin: 0,
highlightMouseOver: false
}
},
{
pointLabels: {
show: false
},
renderer: $.jqplot.BarRenderer,
showHighlight: true,
yaxis: 'yaxis',
rendererOptions: {
animation: {
speed: 2500
},
barWidth: 12,
barPadding: 20,
barMargin: 20,
highlightMouseOver: false
}
},
{
yaxis: 'y2axis',
rendererOptions: {
animation: {
speed: 2000
}
},
markerOptions: {
show: false
}
}
],
legend: {
show: true,
renderer: $.jqplot.EnhancedLegendRenderer,
rendererOptions: {
numberRows: 2
},
location: 's',
placement: 'outside',
labels: types,
yoffset: 52
},
axesDefaults: {
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
labelOptions: {
fontFamily: 'Arial, sans-serif',
fontSize: '10pt'
},
tickOptions: {
fontFamily: 'Arial, sans-serif',
fontSize: '10pt'
},
pad: 0
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ticks,
drawMajorGridlines: false,
tickOptions:{
renderer: $.jqplot.CategoryAxisRenderer,
angle:-90
}
},
yaxis: {
showGridline: false,
tickOptions: {
formatString: "%.1f"
},
rendererOptions: {
forceTickAt0: true
},
label:'Volume($ Billions)',
labelRenderer: $.jqplot.CanvasAxisLabelRenderer
},
y2axis: {
showGridline: false,
tickOptions: {
show: true,
formatString: "%.1f"
},
rendererOptions: {
alignTicks: true,
forceTickAt0: true
},
label:'US($ Millions)',
labelRenderer: $.jqplot.CanvasAxisLabelRenderer
}
},
grid:{
background: '#ffffff',
borderColor: '#333333',
borderWidth: 1.0,
gridLineColor: '#575757'
},
highlighter: {
show: true,
showLabel: true,
tooltipAxes: 'y',
sizeAdjust: 7.5,
tooltipLocation : 'ne'
}
});
Please kindly some one help me to solve this.
Thanks in advance...

If to look at the source code of the jqPlot framework and search for stackSeries line, you can find that it is used so:
if (this.stackSeries && !series.disableStack)
And according to the documentation the disableStack property is what you need.
true to not stack this series with other series in the plot. To render properly, non-stacked series must come after any stacked series in the plot’s data series array.
Your line non-stacked series is placed after the bar stacked series, so this parameter will work properly. Use it so:
series:[
{ //...
},
{ // ...
},
{
disableStack: true,
yaxis: 'y2axis',
rendererOptions: {
animation: {
speed: 2000
}
},
markerOptions: {
show: false
}
}
]

Get linear distribution on jqplot line chart ticks

I would like to provide tickInterval on jqPlot chart renderer to get linear distribution on xaxis.
$.jqplot.config.enablePlugins = true;
var chartData = [[1, 224], [3, 672], [5, 1120],[15,2240]];
function PlotChart(chartData) {
var plot2 = $.jqplot('chart1', [chartData], {
title: 'Mouse Cursor Tracking',
seriesDefaults: {
renderer: $.jqplot.CanvasAxisLabelRenderer,
rendererOptions: {
smooth: true
},
pointLabels: {
show: true
}
},
axes: {
xaxis: {
label: 'Number of Cookies',
renderer: $.jqplot.CategoryAxisRenderer,
// renderer to use to draw the axis,
tickOptions: {
formatString: '%d'
}
},
yaxis: {
label: 'Calories',
tickOptions: {
formatString: '%.2f'
}
}
},
highlighter: {
sizeAdjust: 7.5
},
cursor: {
show: true
}
});
} PlotChart(chartData);
jsfiddle example
Above is an example of the chart how it currently look.
I would like to provide the points 1, 5, 10, 15, 20 on the xaxis (tickInterval - 5) and in relation to 1,3,5,15 plots needs to be in coordinate plane to map the values [[1, 224], [3, 672], [5, 1120],[15,2240]]
Where currently its distributed as per the xticks which is uneven. Any help is welcome!
I tried to get it using min/max and tickInterval property, but seems like its not coming up fine.

If you want to provide tickIntervals on your x-axis then you can do it this way.
$.jqplot.config.enablePlugins = true;
var chartData = [[1, 224], [3, 672], [5, 1120],[15,2240]];
function PlotChart(chartData) {
var plot2 = $.jqplot('chart1', [chartData], {
title: 'Mouse Cursor Tracking',
seriesDefaults: {
renderer: $.jqplot.CanvasAxisLabelRenderer,
rendererOptions: {
smooth: true
},
pointLabels: {
show: true
}
},
axes: {
xaxis: {
label: 'Number of Cookies',
min:0,
max:20,
tickInterval:5,
// renderer to use to draw the axis,
tickOptions: {
formatString: '%d'
}
},
yaxis: {
label: 'Calories',
tickOptions: {
formatString: '%.2f'
}
}
},
highlighter: {
sizeAdjust: 7.5
},
cursor: {
show: true
}
});
}
PlotChart(chartData);
jsFiddle link
You can calculate min, max and tickInterval before plotting the graph.
I hope this helps.

By NOT using renderer: $.jqplot.CategoryAxisRenderer you'll get it going your way

jqplot won't give me padding on my inner grid

We have a graph that looks like:
Very nice. Well, except for the first and last bars being split in half!
I know why it's doing it, but I don't know how to fix it. I've tried gridPadding, barPad, and Pad. Probably others. For whatever reason, I cannot seem to get them to push without prepending and appending some blank dummy data. Which makes an extra two confusing entries along the bottom, which is definitely not acceptable.
The code is as follows.
var f = [[0,1.29],[1,1.29],[2,1.48],[3,1.48],[4,1.48],[5,1.48],[6,1.48],[7,1.48]];
var v = [[0,0.71],[1,0.71],[2,0.8],[3,0.8],[4,0.8],[5,0.8],[6,0.8],[7,0.8]];
var p = [[0,-0.26],[1,-0.26],[2,0.67],[3,0.67],[4,0.67],[5,0.67],[6,0.67],[7,0.67]];
// [x position, y height]
var x_line = [[0,1],[1,21],[2,33],[3,39],[4,21],[5,21],[6,21],[7,21]];
var rank_ticks = [0,1,2,3,4,5,6,7];
$('body').on('click', '#load-fvp', function () {
var plot2 = $.jqplot('fvp-chart', [f, v, p, x_line], {
stackSeries: true,
gridPadding: 40,
highlighter: {
show: true,
tooltipAxes: 'y',
useAxesFormatters: false,
formatString: "<span style='display: none;'>%s</span> %s" // hide the first S because it's irrelevant
},
seriesDefaults: {
renderer: $.jqplot.BarRenderer,
rendererOptions: {
barWidth: 24,
shadowAlpha: 0.03,
fillToZero: true,
highlightMouseOver: false
},
pointLabels: {
show: true,
stackedValue: true
}
},
legend: {
show: true,
location: 'nw',
labels: ['Fund.', 'Value', 'Price', 'Rank']
},
series: [
{showLabel: true, useNegativeColors: false},
{showLabel: true, useNegativeColors: false},
{showLabel: true, useNegativeColors: false},
{
disableStack : true,//otherwise it wil be added to values of previous series
renderer: $.jqplot.LineRenderer,
lineWidth: 2,
pointLabels: {
show: false
},
color: '#FF7D7D',
markerOptions: {
size: 5, color: 'red'
},
xaxis: 'x2axis', yaxis: 'y2axis',
}
//, color: '#FFCC66', useNegativeColors: false, shadow: false, fill: false, lineWidth: 3, fillToZero: true
],
axesDefaults: {
//tickRenderer: $.jqplot.CanvasAxisTickRenderer,
},
axes: {
xaxis: {
ticks: rank_ticks,
tickOptions: {
formatString:'%d',
fontSize:'7pt',
fontFamily:'\"Lucida Grande\",Verdana, Georgia, Times, serif',
},
},
x2axis: {
ticks: rank_ticks,
showTicks: false
},
yaxis: {
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
ticks: [-4, -3, -2, -1, 0, 1, 2, 3, 4],
label: "Information Ratio",
labelOptions: {
angle: 270,
fontFamily: "Verdana, Helvetica",
fontSize: "13pt",
textColor: '#111'
},
tickOptions: {
formatString:'%d',
fontSize:'7pt',
fontFamily:'\"Lucida Grande\",Verdana, Georgia, Times, serif',
},
},
y2axis: {
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
ticks: [100, 50, 1],
showLabel: true,
label: "Rank",
labelOptions: {
angle: 90,
fontFamily: "Verdana, Helvetica",
fontSize: "13pt",
textColor: '#FF7D7D'
},
tickOptions: {
formatString:'%d',
fontSize:'7pt',
fontFamily:'\"Lucida Grande\",Verdana, Georgia, Times, serif',
},
}
}});
$('.jqplot-table-legend').css('left', '567px').css('top', '-14px');
});

Try these values :
gridPadding:{
right:40,
left:40
}

Categories

Resources