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/
Related
I have a problem when I use Flot
I notice that it happens at the same minute but different second
2018/10/16 13:12:55 71.755
2018/10/16 13:12:09 71.700
2018/10/16 13:10:52 70.781
Here is my configuration:
//Display graph
$.plot($("#data-chart"), ds, {
colors: [$chrt_second, $chrt_fourth, "#666", "#BBB"],
grid: {
show: true,
hoverable: true,
clickable: true,
tickColor: $chrt_border_color,
borderWidth: 0,
borderColor: $chrt_border_color
},
zoom: {
interactive: true
},
pan: {
interactive: true
},
selection: {
mode: "xy"
},
xaxis: {
ticks: 5,
mode: "time",
timeformat: "%d/%m/%y",
},
yaxis: {
min: 0,
ticks: 5,
max: 110,
panRange: [-10000, 10000]
},
tooltip: true,
legend: {
show: true,
noColumns: 4, // number of colums in legend table
labelFormatter: null, // fn: string -> string
labelBoxBorderColor: "#000", // border color for the little label boxes
container: null, // container (as jQuery object) to put legend in, null means default on top of graph
position: "ne", // position of default legend container within plot
margin: [5, 10], // distance from grid edge to default legend container within plot
backgroundColor: "#efefef", // null means auto-detect
backgroundOpacity: 1 // set to 0 to avoid background
},
tooltipOpts: {
content: "<b>Date: %x</b> = <span>%y.3</span>",
dateFormat: "%d/%m/%y %H:%M:%S",
defaultTheme: false
},
});
Can someone help me?
I got a 3barchart with 2 linechart, the problem is when y put barPadding( or barMargin) there is no change.
How can i add some pad between the charts?
var grafCump = $.jqplot("home-contenedor-grafico", [sCumplimiento, sMarca, sGenesis, sNecesario, sRequerido], {
title: 'Programado vs Necesario',
animate: true,
animateReplot: true,
seriesColors: ['#604A7B', '#599241', '#FFC000', '#C00000', '#558ED5'],
cursor: {
show: true,
zoom: true,
looseZoom: true,
showTooltip: true,
constrainOutsideZoom: true
},
legend: {
show: true,
placement: 'inside',
renderer: $.jqplot.EnhancedLegendRenderer,
renderOptions:{
seriesToggle: true
}
},
series: [
{
pointLabels: {
show: true
},
label: 'Programado',
renderer: $.jqplot.BarRenderer,
showHighlight: true,
yaxis: 'yaxis',
rendererOptions: {
animation: {
speed: 2500
},
barWidth: 2,
barPadding: 0,
barMargin: 0,
highlightMouseOver: true
}
},
{
pointLabels: {
show: true
},
label: 'Marcas',
renderer: $.jqplot.BarRenderer,
showHighlight: true,
yaxis: 'yaxis',
xaxis: 'xaxis',
rendererOptions: {
animation: {
speed: 2500
},
barWidth: 2,
barPadding: 0,
barMargin: 0,
highlightMouseOver: true
}
},
{
pointLabels: {
show: true
},
label: 'Login',
renderer: $.jqplot.BarRenderer,
showHighlight: true,
yaxis: 'yaxis',
xaxis: 'x2axis',
rendererOptions: {
animation: {
speed: 2500
},
barWidth: 2,
barPadding: 0,
barMargin: 0,
highlightMouseOver: true
}
},
{
label: 'Necesario',
lineWidth: 1,
yaxis: 'yaxis',
markerOptions: {
size: 3
},
rendererOptions: {
animation: {
speed: 2000
}
}
},
{
label: 'Requerido',
lineWidth: 1,
yaxis: 'yaxis',
markerOptions: {
size: 3
},
rendererOptions: {
animation: {
speed: 2000
}
}
}
],
axesDefaults: {
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
pad: 0
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ticksNecesario,
numberTicks: 6,
tickOptions: {
formatter: $.jqplot.DateTickFormatter,
formatString: '%Y-%m-%d',
labelPosition: 'right'
},
drawMajorGridlines: false,
drawMinorGridlines: true,
drawMajorTickMarks: false,
rendererOptions: {
tickInset: 0.5,
minorTicks: 1
}
},
x2axis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ticksMarca,
showTicks: false,
numberTicks: 6,
tickOptions: {
formatter: $.jqplot.DateTickFormatter,
formatString: '%Y-%m-%d',
labelPosition: 'right'
},
drawMajorGridlines: false,
drawMinorGridlines: true,
drawMajorTickMarks: false,
rendererOptions: {
tickInset: 0.5,
minorTicks: 1
}
},
yaxis: {
tickOptions: {
formatString: "%'d"
},
rendererOptions: {
forceTickAt0: true
}
},
y2axis: {
tickOptions: {
formatString: "%'d"
},
rendererOptions: {
alignTicks: true,
forceTickAt0: true
}
}
},
highlighter: {
tooltipContentEditor: function (str, seriesIndex, pointIndex) {
return ('<table><tr><td>Datos</td><td></td></tr> \ <tr><td>Fecha:</td><td>' + sFechaN[pointIndex] + '</td></tr> \ <tr><td>Hora Franja:</td><td>' + sHoraFranjaN[pointIndex] + '</td></tr> \ <tr><td>Necesario:</td><td>' + Math.trunc(sNecesario[pointIndex]) + '</td></tr> \ <tr><td>Requerido:</td><td>' + Math.trunc(sRequerido[pointIndex]) + '</td></tr> \ <tr><td>Programado:</td><td>' + Math.trunc(sCumplimiento[pointIndex]) + '</td></tr> \ <tr><td>Marcas:</td><td>' + Math.trunc(sMarca[pointIndex]) + '</td></tr> \ <tr><td>Login:</td><td>' + Math.trunc(sGenesis[pointIndex]) + '</td></tr></table>'); //, sFechaN[pointIndex], sHoraFranjaN[pointIndex], Math.trunc(sNecesario[pointIndex]), Math.trunc(sCumplimiento[pointIndex])).toString();
},
show: true,
showLabel: true,
tooltipAxes: 'xy',
sizeAdjust: 7.5, tooltipLocation: 'ne'
}
});
I have tried changen the barPadding (positive and negative values), the barMargin (positive and negative values), and barWidth (positive values)
Also the axesDefault pad (0 -> 5)
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();
},
},
},
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
}
}
]
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
}