Ranges, polar charts and gauges released

11 years ago | Posted by News | 0 comments

Post categories:

Ranges polar charts and gauges

Finally we are ready to present gauges, range sereis and polar charts in Highcharts!

Picking from the most frequently requested features on UserVoice, we took great care in designing the new features for 2.3. Most of it is kept in a separate file, highcharts-more.jsto avoid bloating the core file.

The new features are released as Highcharts 2.3 and Highstock 1.2. Ranges are also available in Highstock with data grouping.

The new features are released under the existing Highcharts license. If you purchased a license within the last year, you may upgrade for free and start using the new charts immediately. If your license is older than that, you may purchase a maintenance license from our webshop.

ARTICLE TABLE OF CONTENTS

POLAR CHARTS

We took great care to reuse existing options and patterns when designing the option set of polar charts. The result is one single switch to turn a regular X-Y chart into a polar chart. Add the chart.polar option, and the X axis is wrapped around the perimeter while the Y axis extends from the center to the top. Every aspect of the chart anatomy, including series types like lines, areas, splines and columns as well as features like plot bands, data labels, tooltips, click events, stacking and axis setup, are transformed to the polar coordinate system.

NEW OPTIONS RELATED TO POLAR CHARTS

chart.polarWhen true, cartesian charts are transformed into the polar coordinate system.
paneThis configuration object holds general options for the combined X and Y axes set. Each xAxis or yAxis can reference the pane by index.
pane.backgroundAn object, or array of objects, for backgrounds. Sub options include backgroundColor (which can be solid or gradient),innerWidth, outerWidth, borderWidth, borderColor.
pane.centerThe center of the polar chart, given as an array of [x, y] positions. Positions can be given as integers that transform to pixels, or as percentages of the plot area size. Defaults to [‘50%’, ‘50%’]
pane.endAngleThe end angle of the polar X axis, given in degrees where 0 is north. Defaults to startAngle + 360.
pane.startAngleThe start angle of the polar X axis, given in degrees where 0 is north. Defaults to 0.
plotOptions.series.pointPlacementThis option applies to cartesian charts as well. In a column chart, when the pointPlacement is "on", the point will not create any padding of the X axis, and thus the first column will point directly north in a polar chart. If the pointPlacement is "between", the columns will be laid out between ticks. This is useful for example for visualising an amount between two points in time or in a certain sector of a polar chart.

POLAR CHART EXAMPLES

 

ANGULAR GAUGES

Angular gauges are also known as dials or speedometer-like widgets, and provide a great visualisation for dashboards. Like with polar charts, we extended the already existing series/points/axis model, and implemented the gauges as a new series type with one value axis, the yAxis. Which means that everything you learned about working dynamically and statically with other Highcharts series types, also apply to the angular gauges. Normally there is only one point in a gauge series, but it also handles multiple point, like in our clock example with three dials. You can add as many background elements as you like to the gauge, allowing you to style it all the way from the minimal default design to heavy, 3D like works of art with shadows and reflections created with linear and radial gradients.

NEW OR ALTERED OPTIONS RELATED TO GAUGES

paneSee the table above for details of pane and its child properties, including backgrounds for the gauge.
plotOptions.gaugeThe new series type is called "gauge".
plotOptions.gauge.dataLabelsFor gauges, the dataLabels are enabled by default and shown in a bordered box below the pivot.
plotOptions.gauge.dialThe “dial” configuration object holds the setup for the pointer of the gauge. Available sub-options are “backgroundColor”, “baseLength”, “baseWidth”, “borderColor”, “borderWidth”, “radius” and “rearLength”.
plotOptions.gauge.pivotThe “pivot” configuration object holds the setup for the center of rotation of the gauge. Available sub-options are “backgroundColor”, “borderColor”, “borderWidth” and “radius”.

GAUGE EXAMPLES

RANGE SERIES

Highcharts now includes range series in different flavours, namely “arearange”, “areasplinerange” and “columnrange”. Instead of cluttering up the API with a “barrange” series type, we let you achieve this by setting chart.inverted to true with a column range series. Data points for range series can be defined either as objects ({ x: 0, low: 1, high: 9 }) or as arrays ([0, 1, 9]). In either case, the x value can be skipped.

NEW OR ALTERED OPTIONS RELATED TO RANGES

dataLabelsSince both the low values and high values for a series need a separate data label, we added a new set of options, “xLow”, “xHigh”, “yLow” and “yHigh”. With these options, the relative position can be altered.

RANGE SERIES EXAMPLES

RADIAL GRADIENTS

Another new feature of Highcharts 2.3 is radial gradients, which falls into the eye candy category. Countless times we have been asked whether it is possible to fill our pie charts with a radial gradient to apply a 3D-like feel. We’ve answered that it should be possible with SVG, but unsupported in VML. After all, according to netmarketshare.com, 34% of Internet users are still on a VML powered browser. So we really set out to solve this problem, and eventually found a way to display a circular gradient in legacy IE by loading a pattern image. The bad news are that you need to load another file from our CDN or your web server. The good news are it works. And you can always choose to let legacy IE show the solid color fill.