I'm trying to plot some data on a webpage. I have 4+ series with a common Xaxis but the scaling on the Yaxis should be unique for each series.
Something like the below picture (you can see multiple scales on both Y and Y2 axis)
I've been testing out jqplot it supports a Y and Y2 axis but I cannot see a way to have more that one scale on each axis is this possible?
If not is there another package I can use that can do this?
I have discovered JQplot supports more than two YAxis but each Axis after the first axis will be displayed on the right hand side of the plot I've found no simple way to modify this behaviour. The below picture is a plot I was able to create using 4 yaxis scales
.
Something like the below Javascript in the plot statement will do it.
axes: {
xaxis: {
show: true,
renderer: $.jqplot.LinearAxisRenderer,
drawMajorGridlines: true,
min: 0,
max: 21,
numberTicks: 7,
},
yaxis: {
show: true,
renderer: $.jqplot.LinearAxisRenderer,
},
y2axis: {
show: true,
renderer: $.jqplot.LinearAxisRenderer,
},
y3axis: {
show: true,
renderer: $.jqplot.LinearAxisRenderer,
},
y4axis: {
show: true,
renderer: $.jqplot.LinearAxisRenderer,
},
},
Related
I am using flotchart JS for showing bar graphs. However, I can't seemed to fix the spacing between bars.
I have enabled panning already. However, sets the width of the bar according to the placeholder. How can set each bar's spacing according to its label?
this is my code:
$.plot("#graph", [ data ], {
series: {
bars: {
show: true,
barWidth: 0.6,
align: "center"
}
},
xaxis: {
mode: "categories",
showTicks: false,
gridLines: false,
panRange: [0,null],
},
yaxis: {
panRange: [0, null],
plotPan: false //pan axis is allowed for plot pan
},
pan: {
interactive: true,
mode: "smart",
active: true
}
});
An alternative solution to your problem could be to rotate the tick labels for example by using the tickrotor plugin:
xaxis: {
mode: "categories",
showTicks: false,
gridLines: false,
panRange: [0,null],
rotateTicks: 90
},
You may need to increase the height of the chart since the labels now take up more space. See this fiddle for a full example.
You can achieve this by limiting the number of bars shown at once by giving a max property for the xaxis:
xaxis: {
mode: "categories",
showTicks: false,
gridLines: false,
panRange: [0,null],
max: 7, // set according to your needs, maybe dynamic depending on chart width
min: 0
},
You then have to use panning to see the other bars. See this fiddle for an example.
I am displaying a area spline dynamic data graph where the dynamic values are fetching from a particular API. The problem is, when the dynamic data are displaying, the graph series goes below the y-axis or above the graph's customized design.
From my side, I found that the problem is with y-axis spacing. So, my question is: could I use a common spacing at y-axis? And the series must display above a particular pixels (height) from x-axis. At the same time, I can use the options min, max, tickinterval because of changing the data from external source.
Here is my y-axis,
yAxis: {
title: {
text: '',
},
opposite: true,
offset: 0,
crosshair: {
color: '#335A81',
label: {
enabled: true,
format: '{value:.5f}'
}
},
gridLineWidth: 0.1,
labels: {
enabled: true,
align: 'right',
x: 10,
format: '{value: .5f}'
},
opposite: true,
minorGridLineWidth: 0,
}
I am checking Stacked Charts in Flot and I found out something weird in the Bar Chart.
I tried using this :
http://jsfiddle.net/zNXBd/41/
In this sample codes, try to hover your mouse on the stacked lines. Hover is working.
Now, this time, please try to change "lines" to "bars" and run again.
ds.push({
data:completes,
label: "Complete",
yaxis: 2,
stack:true,
bars: {
show: true,
fill: true,
order: 2,
}
});
ds.push({
data:screeners,
label: "Pre-Screened",
yaxis: 1,
bars: {
show: true,
fill: true,
order: 1,
}
});
ds.push({
data:holds,
label: "Holds",
yaxis: 2,
stack:true,
bars: {
show: true,
fill: true,
order: 3,
}
});
Notice that the bars are not anymore hoverable. Seems like there's an issue in this part.
Could you please help me how to fix this issue?
It seems your bars are too thin for the hover to trigger.
You might need to put a barWidth in your bars options.
By default, the barwidth is 1, in x-axis unit. In a time axis, 1 = 1ms, and at your scale, a one ms width bar isnt represented (we only see the stroke, not the bar itself)
From the doc:
"barWidth" is the width of the bars in units of the x axis (or the y axis if "horizontal" is true), contrary to most other measures that are specified in pixels. For instance, for time series the unit is milliseconds so 24 * 60 * 60 * 1000 produces bars with the width of a day.
example:
bars: {
show: true,
fill: true,
order: 2,
barWidth: 1*3600*1000
}
Here is your fiddle with barwidth set at 1 hour:
http://jsfiddle.net/zNXBd/42/
How do I keep jqplot options for max, min and numberTicks when I use
plot1.replot({resetAxes: true });
I get shifted chart on the both sideof x axis. Example: chart x axis starts with 0, when I execute replot, my x axis starts with -40.
Here is the fix to your problem:
plot1.replot({
resetAxes:true,
axes: {
xaxis: {
show: true,
label: "Date/Time",
showLabel: false,
showTicks: true,
renderer:$.jqplot.CategoryAxisRenderer
},
yaxis: {
label: 'y1',
showLabel: false,
tickInterval: y1AxisInterval,
min: minYaxis,
max: maxYaxis
}
}
});
Here you can specify your old max and min values, when you replot.
I want to render a very simple horizontal stacked bar with only two facts. Without any axes.
Like this: My target.
But the only thing i could do is this: My actuell Version.
The Problem is that when i only insert two values (e.g. "2" and "7") it only shows me one bar for the "7".And the second problem is the tick on the left side with these little lines. Dont know how to solve this. Any ideas ?
My Code:
$(document).ready(function(){
var s1 = [2];
var s2 = [7];
var s3 = [10];
plot3 = $.jqplot('chart1', [s1, s2, s3], {
// Tell the plot to stack the bars.
stackSeries: true,
captureRightClick: true,
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
rendererOptions: {
barDirection: 'horizontal',
// 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: {
yaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
},
xaxis: {
// 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,
//max: 15,
}
},
axesDefaults:{
showTicks: false,
showTickMarks: false,
},
legend: {
show: false,
location: 'e',
placement: 'outside'
},
grid:{
drawGridlines: false,
borderWidth: 0,
shadow: false,
background:'#ffffff',
gridLineColor: '#FFFFFF',
},
});
// 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);
}
);
});
It looks like the padMin: 0 setting on xaxis is causing the second series to be incorrectly displayed. If you remove that altogether it works as you want.
As for removing the grid line ticks, try adding this to the axesDefaults settings
tickOptions: {
markSize: 0,
}
So it will now look like this:
axesDefaults:{
showTicks: false,
showTickMarks: false,
tickOptions: {
markSize: 0,
}
},
If it doesn't work with just that, try using the canvasAxisTickRenderer, more details here: http://www.jqplot.com/tests/rotated-tick-labels.php