See our official histogram demo at http://www.highcharts.com/demo/combo-histogram
@Larry - do you mean having the histogram rotated horizontally?
If so, take a look at this SO answer and demo:
Updated example of a histogram with Highcharts: http://jsfiddle.net/jlbriggs/gud4bp66/
Jon - the value of a beeswarm plot is being able automatically arrange the points in a large data set, to see the distribution of the data. Any data set that you might want to view a distribution of (histogram, boxplot, violin plot, etc) would be fair game for viewing as a beeswarm plot.
Arranging the x values by hand in that manner is not an viable option in such a case.
Here is an example dataset pulled from the same package as the link in the request above:
This fiddle is a demo of a technique that generates a histogram for a given data set, that has also been set to return the individual points, stacked within the bins that they fall into (the idea being to show the histogram, but also show how the data actually fits within each bin, which can sometimes give additional insight about the distribution of the data).
I built this demo a while ago, and it hints at the idea of a beeswarm, but a beeswarm would require much more complexity and flexibility in the layout of the points, with at least some of the configuration options that are listed in the R library linked to in the request, and consideration given to marker radius property, or auto-scaling of marker radius.
Hello Henrik, and thanks.
The allowOverlap feature is a nice start, and may work in many use cases, but when you really need every point label to show, a more complex and intelligent solution is necessary.
With features like the overflow and crop properties already built in, and recognition of positive/negative values, and the detection that goes into the allowOverlap, Highcharts has done a great job in getting most of the way there :)
A fully featured positioning system would be a huge benefit to add on top of these features.
As Jamie says, Highcharts already supports this, you just need to loop over datasets and run Series.setData or Point.update for each step.
But we are currently working on a set of demos to demonstrate this, which will make it easier for you to set up, as you can copy-paste from our samples.
Of course, a motion chart is just a series of charts put together with controls to loop through them. Easy enough to set up, depending on how complex you want the controls to be.
Build the data arrays for each state of the chart, and use a setInterval loop to update the data or series at whatever speed you want it to play.
Parallel coordinates are planned for Highcharts 6. Until then, Ta Kernc contributed with a nice implementation based on multiple Y axes: http://jsfiddle.net/aw90f9d6/6/.
Parallel coordinates chart in Highcharts:
This does not have the rich features that the library posted by Kai below has - this is just a proof of concept to show that it is perfectly feasible in Highcharts to do a basic parallel coordinates plot.
Data is the classic 'cars' data set that is often used as the example.
Yes, I understand parallel coordinates :)
They are still just a line chart.
The labeling of the vertical gridlines is not anything out of the ordinary. You basically have a categorized x axis.
At the most extreme, you might need to transform data points to a normalized scale if your different x axis categories each require different y axis scales.
parallel coordinates charts are just line charts...
New experimantal implementation for Highcharts 4.1 is available at http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/studies/alignthresholds/.
This implementation looks a the threshold on the primary axis (the one first defined), and aligns the threshold of any following axis to that of the primary axis.
Looks good Torstein
One thing I am noticing is that if you hide one of the series, the remaining y axis does not adjust accordingly.
If you hide both series, and then show only one, the axis is scaled appropriately. But once you show both series, and then hide one, the axis retains the scaling for the hidden series, which is counter to highcharts normal behavior.
Bullet graphs can currently be generated using a combined bar and scatter chart: http://jsfiddle.net/highcharts/e96yX/
For anyone still looking for ways to set up bullet graphs, I have examples using a couple of different approaches here:
Includes multiple bullets charts in one plot, as individual charts, and as a simplified horizontal gauge version.
Thanks, works great.
Torstein - the method posted below seems to have an issue (and it may have existed in the previous version as well), where the line moves along the y axis in response to the radius, thereby plotting at a completely inaccurate y axis point.
Is there an easy fix for this problem...?
Any tips would be appreciated!
Thanks Torstein. I had been using a different work around that was slightly more complicated.
You can create linear gauges from columns or scatter charts with one single data value: http://jsfiddle.net/highcharts/9ybLv5je/.
A thermometer is just a column measuring a single data point.
The idea that a chart measuring temperature should include a graphic representation of the reservoir for the liquid in an analog thermometer is a pretty odd one...
Just for the record :)
Ideally, the minPointLength would not apply to 0 values. What you can do for now, however, is set your 0 value data points to null instead.
Here’s a small drop-in snippets that stops tooltips from the mousemove event, and applies them to the click instead. Touch devices should be unaltered.
I have started using a technique as answered here:
I either disable the tooltip, or I display a limited, fixed position tooltip.
Then I use the jQuery UI Dialog, fired by a click event on the point, to show a 'full' tooltip. As noted in the first link, Highslide html popups work well for this purpose also.
Example with jQuery UI Dialog method:
this is a very common question...are there any tips on implementing this ourselves?
I created a plugin to allow the scatter points to align to a column series. See http://www.highcharts.com/jsbin/omevud/edit .
"Could not connect: Access denied for user 'highcharts'@'ec2-54-221-87-5.compute-1.amazonaws.com' (using password: YES)"
can't get to the plugin...
Just to clarify, this issue seems to be about grouping rather than stacking.
I had a very hard time figuring out what you were asking for until I realized that...
this, or at least some built in functionality for toggling visibility of plotlines, plotbands, and their labels would be incredibly useful.
would help eliminate problems like this case:
I created a plugin for draggable legends in Highcharts – see http://jsfiddle.net/highcharts/4jZ7T/.
The plugin hooks on to the legend title, an upcoming feature in Highcharts 3.0, so it is not yet ready for production.
Any comments are appreciated.
That's pretty nice Torstein.
One thing that I think would make it even better is if you could click on the legend title to collapse/expand the body of the legend, so that it could be hidden away.
Thanks for your suggestion. For now, you can just sort your data by value before adding it to the chart.
Just sort your data accordingly...
Though a bar chart is better for such a display anyway.
Here’s a plugin that works with columns as well: http://jsfiddle.net/highcharts/Ha3Wr/
It works by setting the opacity on the group element. I don’t expect it to work in legacy IE though.
This would be a very useful feature.
It could be implemented as a 'dim' property, similar to the 'highlight' property.
Being able to set as a general percentage, or as a specific color would be very useful.
For example, setting all other series to grey when highlighting one series is very handy.
It's easy enough to calculate this yourself and add a series for the projected line.
Almost easier than if you had to set options in the chart for it to handle it for you...