We are currently using HighCharts for our typical bar, pie, line charts. But, we have been asked to plot some medical data that would end up resembling an irregular loop.
If I have an array of x,y points, would it be possible for me to draw this sort of graph with HighCharts? And, if so, can you point me to the right section of the documentation. I see that drawing things like rectangles and circles is possible, but I haven't found any info on drawing lines between arbitrary points.
I can see only three ways to achieve that, and none of them is easy, and have some limitations:
1) Use spline series with unsorted data - looks almost good, only tooltip doesn't work for unsorted data
2) Use scatter series with unsorted data - issue with tooltip is gone, but curves aren't smooth
3) Use renderer.path - doesn't have tooltip at all, and requires to add path manually.
And example of all three: http://jsfiddle.net/kEu3w/
Related
I'm drawing a chart in an iOS app and I want the gridlines to start in the x axis but end in the data point instead of extending all the way up to the top.
Is this possible?
Thanks in advance.
NC
Disclaimer: I work for ShinobiControls
The shinobicharts framework doesn't currently support this as an out-of-the-box feature.
A workaround may exist though. You may be able to add your own gridline subviews by using the SChartAxis method pixelValueForDataValue: to work out where in the plot area coordinate space you should draw your vertical line up to for a given data point.
Once you have your coordinates there are various ways you could draw your gridlines:
Add a canvas view behind or in front of the chart (depending on what effect you want). Then use your coordinates to draw your gridlines using CoreGraphics or some other drawing technique.
Create individual UIViews that each represent a gridline using your coordinates and add these behind or in front of the chart.
One thing to be aware of with this technique is that the gridlines will not automatically update when you pan and zoom. In order to do this you will need to override one of the chart's delegate methods that notify you of range changes and update your drawn gridlines to match the new data point positions.
Another potential workaround could be to use a column series to mimic gridlines. If you create a column series and feed it the same data points as your original series this will result in columns that go up to the y-value of each data point. You could then use the property interSeriesSetPadding on SChartAxisStyle to cause the columns to appear very thin.
I hope that information is useful!
2nd EDITION:
I'm re-frasing the question in hope to be more clear.
I have a data series like:
[ [-3,30], [-2,40], [1,50], [3,60], [2,50], [-1,40], [-4,30] ]
I need Highcharts to plot it in a graphic like a line. Highcharts gives the error 15 because the series is not sorted.
Problem is that the series cannot be sorted because it would falsify the data output. The examples on the pictures and the fiddle show the expected result and what happens if the series get sorted (a blurred plot):
Result expected
Result from sorting data
fiddle plot in my comment (can't attach the link here)
I tried spline and area but both give the error 15.
I tried polygon that avoids the error 15 but it plots a filled area and I cannot get only the borders.
Is there a way to work around this?
Just got a solution from the Highcharts forum, by Izothep (big thanks for him):
with scatter http://jsfiddle.net/izothep/pfddg2je/17/
with polygon http://jsfiddle.net/izothep/45v6xefb/1/
Sorry but I don't have the rights yet to post the fiddle links directly.
If you have more than one series you can, for instance, loop through the Highcharts.getOptions().colors[ i ], were i is the series number, and set it on the lineColor and the color on the called 'fake' on the presented solutions.
I'm working with a CorePlot scatter plot, and I'm having trouble putting the finishing touches on the axis label styling. I'd like for the plot to overlap above the Y-axis labels, but the opposite is happening. I've scoured the documentation, but can't find any options to do this.
Here's the output:
I've tried manipulating the ZPosition of both the plot & axis labels, but that doesn't seem to be working:
[plot setZPosition:99];
[axisSet.yAxis.axisLabels each:^(CPTAxisLabel *label) {
[label.contentLayer setZPosition:-1];
}];
Note - Objective Sugar used for loop comprehension
Any ideas as to how to accomplish this?
The plot area has a property called topDownLayerOrder that allows you to rearrange the different graph elements in exactly this way.
I would like to fill the area between two serieses (when serieses cross each other). See below. I tried the 'arearange' chart type but it filled most of the chart with solid colors. I saw a similar question but I wanted to know if Highcharts supports what I want or I have to use the solution posted in that question.
Chart now:
What I want:
type:'arearange'
You need to use three series, first / second as lines, third as arearange with defined values.
Related topic: How to fill the Area between two series with multiples yAxis in HighChart?
I want to make a multiple plots with the x-axis aligned so that we can compare two set of data. I want it to look like this
https://stackoverflow.com/a/11796553/229075
In my case there are some addition requirement that some of the plot are lines and some are bar. So the default scale does not align even if the data range are the same.
I found some good suggestion about "stacking" the charts. It is a little bit complicated but a promising way to try.
https://stackoverflow.com/a/12179023/229075
However I also have other use case that may push the envelop of simple stacking. For example, I'd like to do scatter plot matrix sometime when both x-axis and y-axis have to align like this
http://www.statmethods.net/graphs/images/spmatrix3.png
Rather than putting many chart in one Highchart, this may requires have many separate charts but have better control in how the axis is layout.
If you want to use one one chart, you can use linkedTo option to connect axis.
If you want more simple charts, you can manage to connect axis using event afterSetExtremes, where you can call setExtremes() for another chart.