jqplot won't give me padding on my inner grid - javascript

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
}

Related

Plotly JS How can I draw a line graph that has no beginning before the start point and no end after the last point?

For example I have wrote this code below to generate the following graph:
const trace = {
x: [-51.0, -50.0, 0.0, 0.6, 0.7, 0.75],
y: [-100.0, -0.0001, 0.0, 0.0051, 0.0155, 100.0],
// x: [-50.0, 0.0, 0.6, 0.7, 0.75],
// y: [-0.0001, 0.0, 0.0051, 0.0155, 100.0],
type: "scatter",
mode: "lines+markers",
name: "diode-curve-graph",
fill: "tonexty",
};
const layout = {
margin: {
l: 20,
r: 10,
b: 25,
t: 5,
pad: 0
},
font: {
size: 11,
family: "IBM Plex Sans, sans-serif",
color: "#161b1d"
},
modebar: {
activecolor: "#161b1d"
},
xaxis: {
autorange: true,
rangemode: "auto",
zeroline: true,
ticks: 'outside',
},
yaxis: {
autorange: true,
rangemode: "tozero",
zeroline: true,
tickformatstops: [
{
enabled: true,
dtickrange: [null, 0.01],
value: ".e"
},
{
enabled: true,
dtickrange: [0.01, 100],
value: ".f"
},
{
enabled: true,
dtickrange: [100, null],
value: ".e"
},
],
// ticks: 'outside',
}
};
const config = {
responsive: true,
displaylogo: false,
locale: "pt-BR",
displayModeBar: false,
scrollZoom: true
}
Plotly.newPlot("diode-curve-graph", [trace], layout, config);
But I'm trying to pass the information that the line is infinity, without beginning and end, like this red line represents:
It could be a simple arrow in the first point and last point pointing to the direction that the lines continues, but I couldn't do it too.
Thanks in advance!

Flot: Customizing the bar chart

I am currently working with the creating a bar chart and would like to accomplish the following requirements:
labels for each bar
Center the bars in the middle of the grid
Here is my jquery code:
var data = [[0,206],[1,118],[2,37]];
var dataset = [
{ label: "", data: data, color: "#296292" }
];
var ticks = [[0,"CPU"],[1,"Hung Process"],[2,"Disk Queue"]];
var options = {
series: {
bars: {
show: true
}
},
bars: {
align: "center",
barWidth: 0.5, fill: 1
},
xaxis: {
axisLabel: "Alerts",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Verdana, Arial',
axisLabelPadding: 10,
ticks: ticks
},
yaxis: {
//axisLabel: "Count",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Verdana, Arial',
axisLabelPadding: 3,
},
legend: {
noColumns: 0,
labelBoxBorderColor: "#000000",
position: "nw"
},
grid: {
hoverable: true,
borderWidth: 2,
backgroundColor: { colors: ["#ffffff", "#EDF5FF"] }
}
};
$(document).ready(function () {
debugger
$.plot($("#top5Alerts_canvas"), dataset, options);
});
Here is my expectation:
I would like to display the label at the top of each bar, how do i set this?
How do I set the equal width between the grid and the bar tick?
Currently, I am getting this:
Any help would be greatly appreciated. Thanks in advance.
You have to use a plugin for that (or write the code yourself). For example https://github.com/winne27/flot-valuelabels .
You can achieve that by setting min and max values for the x axis.
See the code snippet for the full example.
// valuelabel plugin code (https://github.com/winne27/flot-valuelabels)
!function(a){"use strict";function e(e){e.hooks.draw.push(function(e,t){var l,s,o,i,r,n,d,f,u,b,h,v,x,g,c,L,w,p,m,M,y,z,O,C={},P="left";a.each(e.getData(),function(a,B){if(B.valueLabels.show||B.stack){var k=B.valueLabels.showLastValue,A=B.valueLabels.showMaxValue,S=B.valueLabels.showMinValue,F=B.valueLabels.showTextLabel,V=B.valueLabels.labelFormatter,Z=B.valueLabels.xoffset,T=B.valueLabels.yoffset,I=B.valueLabels.xoffsetMin||Z,D=B.valueLabels.yoffsetMin||T,R=B.valueLabels.xoffsetMax||Z,X=B.valueLabels.yoffsetMax||T,Y=B.valueLabels.xoffsetLast||Z,j=B.valueLabels.yoffsetLast||T,Q=B.valueLabels.valign,W=B.valueLabels.valignLast||Q,q=B.valueLabels.valignMin,E=B.valueLabels.valignMax,G=B.valueLabels.align,H=B.valueLabels.rotate||0,J=B.valueLabels.horizAlign,K=B.valueLabels.horizAlignMin||J,N=B.valueLabels.horizAlignMax||J,U=B.valueLabels.horizAlignLast||J,$=B.valueLabels.fontcolor||"#222222",_=B.valueLabels.shadowColor,aa=B.valueLabels.font||B.xaxis.font||"9pt san-serif",ea=B.valueLabels.hideZero,ta=B.valueLabels.hideSame,la=B.valueLabels.reverseAlignBelowZero,sa=B.valueLabels.showShadow,oa=B.valueLabels.useDecimalComma,ia=B.stack,ra=B.valueLabels.decimals,na=B.valueLabels.useBackground,da=B.valueLabels.backgroundColor,fa=B.valueLabels.useBorder,ua=B.valueLabels.borderColor,ba=B.bars.order||0;B.seriesIndex=a;var ha=null,va=-1e3,xa=-1e3,ga="categories"==B.xaxis.options.mode,ca="categories"==B.yaxis.options.mode;if(O=B.points.show?B.points.radius-B.points.lineWidth/2:0,(S||A)&&"undefined"!=typeof B.data[0]){B.data[0][0]=+B.data[0][0],B.data[0][1]=+B.data[0][1];for(var La=+B.data[0][0],wa=+B.data[0][0],pa=+B.data[0][1],ma=+B.data[0][1],Ma=1;Ma<B.data.length;++Ma)B.data[Ma][0]=+B.data[Ma][0],B.data[Ma][1]=+B.data[Ma][1],+B.data[Ma][0]<La&&(La=+B.data[Ma][0]),+B.data[Ma][0]>wa&&(wa=+B.data[Ma][0]),+B.data[Ma][1]<pa&&(pa=+B.data[Ma][1]),+B.data[Ma][1]>ma&&(ma=+B.data[Ma][1])}else{S=!1,A=!1;for(var Ma=0;Ma<B.data.length;++Ma)B.data[Ma][0]=+B.data[Ma][0],B.data[Ma][1]=+B.data[Ma][1]}g=S||A||k;for(var Ma=0;Ma<B.data.length;++Ma)if(null!==B.data[Ma]){if(s=B.data[Ma][0],d=B.data[Ma][1],l=F&&B.data[Ma].length>2?B.data[Ma][2]:!1,g){if(c=!1,S&&pa==d&&!B.bars.horizontal?(c=!0,n=I,h=D,v=q,S=!1):S&&La==s&&B.bars.horizontal?(c=!0,n=I,h=D,x=K,S=!1):A&&ma==d&&!B.bars.horizontal?(c=!0,n=R,h=X,v=E,A=!1):A&&wa==s&&B.bars.horizontal?(c=!0,n=R,h=X,x=N,A=!1):k&&Ma==B.data.length-1&&!B.bars.horizontal?(c=!0,n=Y,h=j,v=W):k&&Ma==B.data.length-1&&B.bars.horizontal&&(c=!0,n=Y,h=j,x=U),!c)continue}else la&&0>d&&!B.bars.horizontal?(n=Z,h=-1*T,"above"==Q?Q="below":"below"==Q&&(Q="above"),v=Q):(n=Z,h=T,v=Q,x=J);if("top"==v&&(v="above"),ga&&(s=B.xaxis.categories[s]),ca&&(d=B.yaxis.categories[d]),!(s<B.xaxis.min||s>B.xaxis.max||d<B.yaxis.min||d>B.yaxis.max)){if(l!==!1)L=l;else{if(L=B.bars.horizontal?s:d,null==L&&(L=""),0===L&&(ea||ia))continue;ra!==!1&&(L=parseFloat(L).toFixed(ra))}if(B.valueLabels.valueLabelFunc&&(L=B.valueLabels.valueLabelFunc({series:B,seriesIndex:a,index:Ma})),L=""+L,L=V(L,{series:B,point:B.data[Ma]}),!ta||L!=ha||Ma==B.data.length-1){if(B.bars.horizontal&&(t.font=aa,y=fa||na?10:6,Math.abs(B.xaxis.p2c(s)-B.xaxis.p2c(0))<t.measureText(L).width+Math.abs(n)+y&&"outside"!=x&&(n=-1*n,x="outside")),oa&&(L=L.toString().replace(".",",")),w=0,ia){var ya=s+"-"+ba;if(C[ya]||(C[ya]=0),w=C[ya],C[ya]=C[ya]+d,!B.valueLabels.show)continue}o=B.xaxis.p2c(s)+e.getPlotOffset().left,f=B.yaxis.p2c(d+w)+e.getPlotOffset().top,(!ta||Math.abs(f-xa)>20||o>va)&&(ha=L,va=o+8*L.length,xa=f,B.bars.horizontal?(b=f,z="middle",s>=0?"outside"==x?(P="left",n+=4):"insideMax"==x?(P="right",n-=4):"insideCenter"==x?(P="center",o=e.getPlotOffset().left+B.xaxis.p2c(0)+(B.xaxis.p2c(s)-B.xaxis.p2c(0))/2+n):"insideZero"==x&&(P="left",o=e.getPlotOffset().left+B.xaxis.p2c(0)+3+n):"outside"==x?(P="right",n-=4):"insideMax"==x?(P="left",n+=4):"insideCenter"==x?(P="center",o=e.getPlotOffset().left+B.xaxis.p2c(0)+(B.xaxis.p2c(s)-B.xaxis.p2c(0))/2+n):"insideZero"==x&&(P="right",o=e.getPlotOffset().left+B.xaxis.p2c(0)-4+n),r=o+n):("bottom"==v?(z="bottom",f=e.getPlotOffset().top+e.height()):"middle"==v?(z="middle",M=e.getPlotOffset().top+e.height(),f=(M+f)/2):"below"==v?(z="top",h=h+4+O):"above"==v&&(z="bottom",h=h-2-O),r=o+n,b=f+h,0>=f&&(b+=16),o>=e.width()+e.getPlotOffset().left?(r=e.width()+e.getPlotOffset().left+n-3,P="right"):P=G),t.font=aa,(fa||na)&&(m=t.measureText(L).width+5,m%2==1&&m++,p=parseInt(aa,10)+7,"top"==z?(u=b,b+=3):"bottom"==z?(u=b-p-2,b-=2):"middle"==z&&(u=b-(p+1)/2,b+=1),"right"==P?(i=r-m+1,r-=2):"left"==P?(i=r,r+=3):i=r-m/2,t.shadowOffsetX=0,t.shadowOffsetY=0,t.shadowBlur=0,fa&&(t.strokeStyle=ua,t.strokeRect(i,u,m,p)),na&&(t.fillStyle=da,t.fillRect(i,u,m,p))),t.fillStyle=$,t.save(),sa?(t.shadowOffsetX=0,t.shadowOffsetY=0,t.shadowBlur=1.5,t.shadowColor=_):t.shadowBlur=0,t.translate(r,b),0!=H&&t.rotate(H*Math.PI/180),t.textAlign=P,t.textBaseline=z,t.fillText(L,0,0),t.restore())}}}}})})}var t={series:{valueLabels:{show:!1,showTextLabel:!1,showMaxValue:!1,showMinValue:!1,showLastValue:!1,labelFormatter:function(a){return a},align:"center",valign:"above",valignMin:"below",valignMax:"above",horizAlign:"insideMax",xoffset:0,yoffset:0,rotate:0,useDecimalComma:!1,decimals:!1,hideZero:!1,hideSame:!1,reverseAlignBelowZero:!1,showShadow:!1,shadowColor:!1,useBackground:!1,backgroundColor:"#cccccc",fontcolor:"#222222",useBorder:!1,borderColor:"#999999"}}};a.plot.plugins.push({init:e,options:t,name:"valueLabels",version:"2.2.0"})}(jQuery);
// code for chart
var data = [
[0, 206],
[1, 118],
[2, 37]
];
var dataset = [{
label: "",
data: data,
color: "#296292",
valueLabels: {
show: true
}
}];
var ticks = [
[0, "CPU"],
[1, "Hung Process"],
[2, "Disk Queue"]
];
var options = {
series: {
bars: {
show: true
}
},
bars: {
align: "center",
barWidth: 0.5,
fill: 1
},
xaxis: {
axisLabel: "Alerts",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Verdana, Arial',
axisLabelPadding: 10,
ticks: ticks,
min: -0.5,
max: 2.5
},
yaxis: {
//axisLabel: "Count",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Verdana, Arial',
axisLabelPadding: 3,
},
legend: {
noColumns: 0,
labelBoxBorderColor: "#000000",
position: "nw"
},
grid: {
hoverable: true,
borderWidth: 2,
backgroundColor: {
colors: ["#ffffff", "#EDF5FF"]
}
}
};
$(document).ready(function() {
debugger
$.plot($("#top5Alerts_canvas"), dataset, options);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.min.js"></script>
<div id="top5Alerts_canvas" style="height: 300px;"></div>

Flot Charts. Custom color below x-axis value

I have a Flot Bar Chart code.
$(function() {
var barOptions = {
series: {
bars: {
show: true,
barWidth: 0.4,
fill: true,
fillColor: {
colors: [{
opacity: 0.8
}, {
opacity: 0.8
}]
}
}
},
xaxis: {
mode: "categories",
tickLength: 0
},
yaxis: {
min:-200, max: 200, tickSize: 50,
},
colors: ["#1ab394"],
grid: {
color: "#999999",
hoverable: true,
clickable: true,
tickColor: "#D4D4D4",
borderWidth:0
},
legend: {
show: false
},
tooltip: true,
tooltipOpts: {
content: "Cost: %y %"
}
};
var barData = {
label: "bar",
data: [
["First", -100],["Second", 66.67],["Third", -177.77],]
};
$.plot($("#flot-bar-chart"), [barData], barOptions);
});
I want that every bar below 0 would be specific (for example red) color. I have tried to do that with threshold plugin, but it adds additional values. Is there any solution to make it?
The threshold plugin should not add additional values, see this fiddle or the snippet below:
$(function() {
var barOptions = {
series: {
bars: {
show: true,
barWidth: 0.4,
fill: true,
fillColor: {
colors: [{
opacity: 0.8
}, {
opacity: 0.8
}]
},
align: 'center'
}
},
xaxis: {
mode: "categories",
tickLength: 0,
ticks: [
[1, 'First'],
[2, 'Second'],
[3, 'Third']
]
},
yaxis: {
min: -200,
max: 200,
tickSize: 50,
},
colors: ["#1ab394"],
grid: {
color: "#999999",
hoverable: true,
clickable: true,
tickColor: "#D4D4D4",
borderWidth: 0
},
legend: {
show: false
},
tooltip: true,
tooltipOpts: {
content: "Cost: %y %"
}
};
var barData = {
label: "bar",
data: [
[1, -100],
[2, 66.67],
[3, -177.77],
],
threshold: {
below: 0,
color: "rgb(200, 20, 30)"
},
};
$.plot($("#flot-bar-chart"), [barData], barOptions);
});
#flot-bar-chart {
height: 300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.threshold.min.js"></script>
<div id="flot-bar-chart"></div>

jQuery Flotcharts - straight series line ending on a datapoint

I'm having problems with the formatting of the following flot chart:
I want my second series (gray) straight, just as square. It should start from 682 and end in 683. How to solve it?
Options for my flot:
var options = {
grid: {
clickable: true,
hoverable: true
},
series: {
lines: {
show: true,
fill: true,
lineWidth: 0,
fillColor: { colors: [{opacity: 1 }, { opacity: 1}] },
},
},
colors: ["rgba(41, 150, 206, 0.9)", "rgba(67, 90, 110, 0.4)",],
crosshair: {
mode: "xy",
color: "#323232",
lineWidth: 1,
},
xaxis: {
mode: mode,
show: true,
position: "bottom",
color: "#323232",
font: {
size: 10,
lineHeight: 15,
},
labelHeight: 15,
},
yaxis: {
show: true,
position: "left",
color: "#323232",
labelWidth: 20,
font: {
size: 10,
},
max: 150,
min: 0,
},
pan: {
interactive: true,
cursor: "move",
frameRate: 60,
},
tooltip: true,
tooltipOpts: {
id: 'flotTip',
content: '%x : %y km/h',
shifts: {
x: 10,
y: 20,
},
defaultTheme: true,
lines: {
track: false,
threshold: 0.05,
},
}
};
If you have zero values outside the range where your data has non-zero values the graph will connect those (valid) datapoints with diagonal lines. If you want to end the graph at a specific point change the values after that point to null.
This is described in the documentation:
If a null is specified as a point or if one of the coordinates is null or couldn't be converted to a number, the point is ignored when drawing. As a special case, a null value for lines is interpreted as a line segment end, i.e. the points before and after the null value are not connected.

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
}
}
]

Categories

Resources