November 11, 2009 by Torstein Hønsi
It works in all modern browsers including the iPhone/iPad and Internet Explorer from version 6. Standard browsers use SVG for the graphics rendering. In legacy Internet Explorer graphics are drawn using VML.
Do you want to use Highstock for a personal website, a school site or a non-profit organisation? Then you don't need the author's permission, just go on and use Highstock. For commercial websites and projects, see License and Pricing.
One of the key features of Highstock is that under any of the licenses, free or not, you are allowed to download the source code and make your own edits. This allows for personal modifications and a great flexibility.
Highstock is solely based on native browser technologies and doesn't require client side plugins like Flash or Java. Furthermore you don't need to install anything on your server. No PHP or ASP.NET. Highstock needs only two JS files to run: The highstock.js core and either the jQuery, MooTools or Prototype framework. One of these frameworks is most likely already in use in your web page.
Highstock supports line, spline, area, areaspline, column, scatter, OHLC, candlestick, flags, arearange, areasplinerange and columnrange chart types. Any of these can be combined in one chart.
Through a full API you can add, remove and modify series and points or modify axes at any time after chart creation. Numerous events supply hooks for programming against the chart. In combination with jQuery, MooTools or Prototype's Ajax API, this opens for solutions like live charts constantly updating with values from the server, user supplied data and more.
While navigating a large dataset, perhaps hourly values over several years, it is important for the charting library to provide a quick way a to view a certain time range. Highstock provides a range selector where the user can zoom in on preselected time ranges like 1m, 1y or YTD, or manually add date ranges.
Another, more visual way of navigating the data set is by dragging the scrollbar, or dragging the edges of the Navigator window to the area of special interst.
Through a specific series type called "flags", you can add event markers and annotations directly related to an interesting are on the series. You can add different visual styles to the markers to differentiate them, and you can add them to the graph or the X axis.
Sometimes you want to compare variables that are not the same scale. Highstock lets you assign an y axis for each series. Each axis can be placed to the right or left, or next to other axes. All options can be set individually, including reversing, styling and position.
On hovering the chart Highstock can display a tooltip text with information on each point and series. The tooltip follows as the user moves the mouse over the graph, making it easy and intuitive to read out the values from the chart.
Highstock is very intelligent about time values. With milliseconds axis units, Highstock determines where to place the ticks so that they always mark the start of the month or the week, midnight and midday, the full hour etc.
If your data array consists of 100,000 points, it wouldn't be very effective for the browser to calculate the translated position for each one and display a graph with 100,000 points on what is often a 800px wide canvas. In comes the Highstock data grouping facility, where the data is blazingly fast grouped into optional groups like months or days, and displayed. When zooming in on smaller ranges, the grouping is redone and you can inspect the full resolution data.
With the exporting module enabled, your users can export the chart to PNG, JPG, PDF or SVG format at the click of a button, or print the chart directly from the web page.
In addition to controling the zooming and panning from the scroller and navigator, you have the option to set mouse and finger zooming and panning.