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.
Related
I'm trying to create a chart similar to the one on the link in JavaScript (going to have the chart in Design Studio). I need there to be a line chart with the current years data and tick marks under with last years data. Between the line chart and the tick I want a bar connecting the two.
I've tried several things but I can only get somewhat close. Due to a few outliers, I also need to keep all values above a certain value and below a certain value to stay in a certain range to avoid the plummets seen.
This graph was created in Excel.
[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):
I'm working on a project where we have some Highcharts graphs populated from database; one of them is an scatter graph and we need to surround the points placed on the outside area of the graph.
We need a graph like this but we need the area surrounding the outside points of the scatter; is there a easy way to do this with Highcharts?
We need it to work on IE11 (client's specs).
We can do it with a new polygon serie to make by getting it from codebehind or from database, but that may take too much development time and will slow down the queries. So we need to know if there is an easier way to do it via Highcharts or Javascript
Thanks in advance.
I am not very familiar with Highcharts, but i could not find such functionality in their API. However there is an easy algorithm to solve your problem.
All you need is to have an array containing the border elements and connect the points from this list like here.
Finding those points is not too hard. Compute the linear equation between two extreme points (like the one on the very top and very right). The resulting formula looks like f(x) = m*x + b
Now you check for all points within that x-range if their y-coordinate is higher than this line (or lower when doing it with the point on the very bottom). If so just add them to your border array and continue with the other extreme points.
I am looking to create a line chart which will plot an array of data which has a corresponding x value (date/time) and y value associated with it. The chart can have any number of series (different lines on the same graph). You can think of this as like how yahoo/google graph a particular stock and if you want to compare different companies stock prices on the same chart.
The problem I am facing is that the data I am given might not be given in regular intervals (e.g. series 1 might give an array of plots that occur every 15 mins, series2 might be 10 mins, etc). Also the data might not have the same start / end time (e.g. series 1 starts at 8:40 am, series 2 starts at 8:42 am). There can also be holes in the data where no data was gathered (want to display this as nothing in the chart)
I have thought about some potential ways to solve this problem
Put everything on a 1 minute interval (the smallest possible interval) and place null values for everything we do not have data for. I need to have null values because there are datatips on the graph when you hover over a point to tell you what the value is at that point. The problem with this is that this will cause the graph to become a point graph rather than a line graph and will look ugly. I can tell dojo to interpret the data between null values but I also want to have explicit null values (e.g. when the market is not open leave the space as nothing rather than connecting the lines)
Round the data to the closest interval. The problem with this is the data is no longer accurate for that particular moment which is a problem.
Don't allow them to be plotted together (not an option).
Use a different charting library (last resort)
I am using the dojox charting library and I cannot change the back end code that gives me the data.
What are my options?
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