[EDIT] - Resolved: See final chart in the end.
Infomation
Some background first. I have a line chart that plots power produced by a facility in a very simple line chart. This facility has 5 machines producing this power. Sometimes, these machines have some problem or errors.
I would like to show these errors and for how long they have persisted, per machine, along with the power production chart.
The errors chart
Reading the Highcharts docs I realized that the best way to show that would be in a columnrangechart, inverting it to be a horizontal columnrangechart.
Here is an example (jsfidle):
Obs: Consider the [-6 .. 9 ] axis as a datetime axis
This chart would be read like: Machine 0 had two errors: One from -6 to -1, and another one from 0 to 2, and so on.
Where Am I now?
So, now I tried to make this work together with a line chart. And this is where I can not make it work. My columnrangechart stays in the vertical and not in the horizontal and I can figure how to flip it.
Here is the current state: (jsfiddle)
Question
Is there any way I can plot these two charts together?
[EDIT] Answer
Using #jlbriggs comment's idea, I could come up with the right chart (jsfiddle):
Related
Using chart.js, I have a bar chart with datapoints spread across many years:
If you look closely near the x-axis, you can see some grey bars. Here's a line chart with the same data for reference:
While using a line chart for this example could make sense, it makes the charts with less data a bit awkward:
and with bars instead of lines
Is there an option that could be used on bar charts to improve the readability when large x-axis are involved? I am representing occurrences of events over-time, another adapted kind of chart could be acceptable too.
Thanks.
I am not sure there will be an option on chart.js.
One way to deal with it is to render line charts initially and then switch the type to 'bar' when zoomed into certain date ranges.
Depending on the type of data, you could also group up the data by summing (or averaging) the data by day (or week or month). Then pass it into the chart and the time series option should be able to display the x axis dates in a more sensible manner.
Otherwise you will have to look into more power charting libraries that can handle and manipulate bigger datasets like amCharts: https://www.amcharts.com/demos/stock-chart-candlesticks/
Or look into using D3 that is highly customisable, but a bit more complex to work with.
Chart.js 2.6.0
Expected Output
I have a problem to solve, I needed to generate this chart out of data:
I somehow managed to generate this chart.
Problems
I am searching for best way to detect summit/peak of data-mountains so that I could put a point(arc) at the top.
Is there a way to put labels in x-axis like in the picture above? I mean there is label after every 21 seconds.
Code so far
Gist: https://gist.github.com/shivabhusal/efb48db79128ffd926cc25960a1d875c
I overrode the draw function of Chart.js and drew lines and points on my own.
Any help will be appreciated, thanks.
Note: My data is not guaranteed to be pointy at the summit; sometimes it can get plateau.
Necessary CodePen is https://codepen.io/shivabhusal/pen/LjWyMe?editors=0010
I have a stacked area chart that I'm building using D3.js, but I haven't been able to figure out how to get the end-points of my data to behave properly. Here's a screenshot showing the "issue" I'm seeing:
The data associated with both the orange and dark blue segments start on the beginning of their corresponding months (February 1 and March 1, respectively). However, because the default interpolation mechanism "smooths" the curves, it appears as if non-zero values are present on days prior to the start of the month.
How can I get these end-points to drop vertically? I'm aware of the step-before and step-after interpolation models, but I like the look of the default chart. I simply want the ends to "behave" properly. Here's a mockup of what I envision it would look like:
Is this kind of thing even possible?
To be complete, I ended up switching to the step- style interpolations for my graph, since it provides a more accurate picture of my data.
I Was checking out the possibility of implementing a zoomable line chart using Highcharts something that highstock line chart does and came across this example in the demo. This will really work fine for me but I have seen a issue with the chart that When I select complete data in the smaller chart, the Big chart isn't showing anything.
I Want to know how to fix this issue.
When you play with that example and check the JavaScript console for errors, you'll see:
Highcharts error #12: www.highcharts.com/errors/12
Following that link:
Highcharts Error #12
Highcharts expects point configuration to be numbers or arrays in
turbo mode
This error occurs if the series.data option contains object
configurations and the number of points exceeds the turboThreshold. It
can be fixed by either setting the turboThreshold option to a higher
value, or changing your point configurations to numbers or arrays. See
turboThreshold.
Shockingly enough, if increase or disable the turboThreshold, the problem goes away.
Fiddle here.
Looking through the documentation for Highstocks, I found this example:
Shown here is two series on the same chart, therefore with a linked range selector - this is really really useful, but I wish to display something different which is proving to be very difficult.
What I'm looking for is a normal line graph on the top series, representing data plotted onto time (almost like in this example), but a bar chart or horizontal candle chart in the lower graph, representing one or more timelines.
I've drawn an image of what I'm looking for:
I apologise for the crude drawing, but hopefully it shows what I am aiming to achieve: standard graph on top, bar/candle on bottom.
I have attempted various techniques to render this, but I can't find a way to have both series drawn on the same timescale, linked with the same range selector.
In case it helps, here's a starting point on JSFiddle, with all the unnecessary code removed: http://jsfiddle.net/g105b/8JhXv/
and a link to the original demo: http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/stock/demo/candlestick-and-volume/
Answer taken from official Highcharts forum
it is possible, but with some limitations. In the fact you want to show gantt chart. Bar charts aren't possible in your case - bar chart = inverted whole chart (yAxis becames xAxis, etc). Instead take a look at example for gantt chart: http://jsfiddle.net/highcharts/r6emu/
You can combine them into one, ane effect: http://jsfiddle.net/8JhXv/1/
About limits:
tooltip fo bottom chart is availabe only when you mouseover start and end date
bars are on lines, not between them