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/
Related
I'm using chart.js in my project where I'm having a daily-ticked time scale on the X axis and two linear scales on the Y axis. On one linear scale I'm rendering an usual line chart representing a chronological trend while rendering multiple stacked bar charts on the other linear scale, representing average stats for each day. Pre-v3 versions of chart.js were dictating to use a general chart type bar for this to work, and in my case it did even on a time scale. Only workaround I had to use to was to set the bar chart data to 12:00pm to have it centered on the day while also setting the barThickness manually, as it will default to 0 (?) on a time scale otherwise.
Now I've recently updated to v3.2.0 and adjusted my options and datasets according to the migration documentation. Rendering the charts I noticed that the scale ticks were offset by half a day, thus both charts being off. After some research I found out that it was due to the offset option for the scale being enabled as I was using a bar chart.
Manually turning off the offset option is to no avail either though. Besides the time scale not using up another day anymore, the ticks are still off by half a day.
Cutting out the bar chart dataset resets the ticks back to normal. Unfortunately there doesn't seem to be a way to apply the offset only to the bar charts. Does anyone have an idea how to deal with this?
I have now created a Codepen example for this.
scales: {
x: { // time scale
type: 'time',
offset: false,
time: {
unit: 'day',
displayFormats: {
day: 'iii, dd.MM'
}
},
bounds: 'ticks',
grid: {
color: "#444",
zeroLineColor: "#888",
zeroLineWidth: 2
},
title: {
display: true,
text: 'Date'
}
},
yT: { // line chart scale
position: 'right',
beginAtZero: false,
grid: {
color: "#444",
zeroLineColor: "#888",
zeroLineWidth: 2
},
ticks: {
maxTicksLimit: 24,
stepSize: 9000,
callback: (duration) => String(duration / 3600) + 'h'
}
},
yR: { // bar chart scale
position: 'right',
beginAtZero: false,
grid: {
color: "#444",
zeroLineColor: "#888",
zeroLineWidth: 2
},
ticks: {
maxTicksLimit: 48,
stepSize: 10800,
callback: (duration) => String(duration / 3600) + 'h'
},
title: {
display: true,
text: 'Duration'
},
stacked: true
}
}
I opened an issue on GitHub where I was told that I also had to explicitly set the grid.offset option to false, and this fixed it for me.
I want to disable or hide marked x-axis on the following image:
But I still need to be able to show a plot line.
I tried to play around with "xAxis" Highcharts property and I am able to hide marked x-axis, but then I can not add a plot line. It seems to me this axis is somehow connected with the plot.
Thanks a lot for help.
The plotLines are connected to an axis, but you can separately disable the grid and the labels:
xAxis: [{
...,
grid: {
enabled: false
},
plotLines: [{
color: 'red',
value: today + day * 7,
width: 5
}],
labels: {
enabled: false
},
tickLength: 0
}, {
visible: false
}]
Live demo: https://jsfiddle.net/BlackLabel/c2xLruvp/
API Reference: https://api.highcharts.com/gantt/xAxis.visible
I would like to set my area range (the blue horizontal bar) only on the red bar (fidding the width of the red bar) but I cannot find a solution to do this. Plot band don't work because it's full width on x axis. Could you help me please ?
On this try I managed to set the area range (blue horizontal bar) but it created another entry on X axis ("1"), I want to keep only the first entry "Omburu" with the same disposition of yellow, orange and red bar. With additionnal horizontal blue bar on the red bar who is set between to values following "Puissance kW" scale.
The JSFiddle is here : https://jsfiddle.net/poloh11/1qzfgopy/11/
Thanks a lot
{
name: 'Range',
data: [
[1000, 1500],[1000, 1500]
],
type: 'arearange',
lineWidth: 0,
color: Highcharts.getOptions().colors[0],
fillOpacity: 0.3,
marker: {
enabled: false
},
yAxis: 1
}
Use columnrage series instead. It has common properties with column series (pointRange, pointPadding etc.) that allow to adjust it similarly. The following configuration works for me:
{
name: 'Range',
data: [
[1000, 1500]
],
type: 'columnrange',
lineWidth: 0,
color: 'rgba(149,206,255,0.7)',
marker: {
enabled: false
},
yAxis: 1,
pointPlacement: 0.3,
pointRange: 0.33,
borderWidth: 0
}
Live demo: https://jsfiddle.net/BlackLabel/9czvmhsx/
API reference: https://jsfiddle.net/BlackLabel/9czvmhsx/
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
For values of 0, Flot likes to draw a flat line where the bar would be. Is it possible to configure it to draw nothing?
In my application I solved this issue by setting yaxis min to a value greater than 0 and less than the resolution I was working with. Borders visible, flat line hidden.
var options = {
series: {
stack: 0,
lines: { show: false, fill: true, steps: false },
bars: { show: true, barWidth: 0.6 }
},
xaxis: {
mode: "time",
timeformat: "%H:%M"
},
yaxis: {
min: 0.5
},
selection: { mode: "x" },
grid: { hoverable: true }
};
You can set the value to null when it's zero and that will prevent it from showing and allow you to keep borders around other bars.
One solution: set the lineWidth of the bars to 0. This eliminates the border around the bars.
This comes at the cost of the nice visibility for small values Flot has. With borders, even when your chart has large values, 1 and 2 for example are distinct. Without borders, the small numbers can be hard to see, but this effect can be offset by sticking to darker fillColor values for your bars.