Highcharts

<div dir="ltr" style="text-align: left;" trbidi="on"><br /><div id="hs-component"><br /> <div class="container"><br /> <div class="item-page"><br /> <h1><br /></h1><br /><div class="intro"><br /><h2><br />What is Highcharts?</h2><br />Highcharts is a charting library written in pure JavaScript, offering<br /> an easy way of adding interactive charts to your web site or web <br />application. Highcharts currently supports line, spline, area, <br />areaspline, column, bar, pie, scatter, angular gauges, arearange, <br />areasplinerange, columnrange, bubble, box plot, error bars, funnel, <br />waterfall and polar chart types.<br /><br /><br /><div class="text-center product-buttons"><br /><a class="button" href="http://www.highcharts.com/download">Download</a><a class="button" href="http://www.highcharts.com/demo">Demos</a><a class="button" href="http://shop.highsoft.com/highcharts.html">License / Pricing</a></div><br /><h2><br />Features</h2><br /><h4 id="compatible"><br /><img alt="browsers" border="0" class="float-left" height="124" src="http://www.highcharts.com/images/stories/features/browsers.png" width="164" />Compatible</h4><br />It works in all modern mobile and desktop browsers including the <br />iPhone/iPad and Internet Explorer from version 6. On iOS and Android, <br />multitouch support provides a seamless user experience. Standard <br />browsers use SVG for the graphics rendering. In legacy Internet Explorer<br /> graphics are drawn using VML.<br /><br /><br /><h4 id="non-commercial"><br /><img alt="free" border="0" class="float-right" height="124" src="http://www.highcharts.com/images/stories/features/free.png" width="164" />Free for Non-commercial</h4><br />Do you want to use Highcharts for a personal website, a school site <br />or a non-profit organisation? Then you don't need the author's <br />permission, just go on and use Highcharts. For commercial websites and <br />projects, see <a href="http://shop.highsoft.com/highcharts.html">License and Pricing</a>.<br /><br /><br /><h4 id="open"><br /><img alt="open" border="0" class="float-left" height="124" src="http://www.highcharts.com/images/stories/features/open.png" width="164" />Open</h4><br />One of the key features of Highcharts is that under any of the <br />licenses, free or not, you are allowed to download the source code and <br />make your own edits. This allows for personal modifications and a great <br />flexibility.<br /><br /><br /><h4 id="javascript"><br /><img alt="no-backend" border="0" class="float-right" height="124" src="http://www.highcharts.com/images/stories/features/no-backend.png" width="164" />Pure JavaScript</h4><br />Highcharts is solely based on native browser technologies and doesn't<br /> require client side plugins like Flash or Java. Furthermore you don't <br />need to install anything on your server. No PHP or ASP.NET. Highcharts <br />needs only two JS files to run: The highcharts.js core and either the <br />jQuery, MooTools or Prototype framework. One of these frameworks is most<br /> likely already in use in your web page.<br /><br /><br /><h4 id="numerous"><br /><img alt="chart-types" border="0" class="float-left" height="124" src="http://www.highcharts.com/images/stories/features/chart-types.png" width="164" />Numerous Chart Types</h4><br />Highcharts supports line, spline, area, areaspline, column, bar, pie,<br /> scatter, angular gauges, arearange, areasplinerange, columnrange and <br />polar chart types. Many of these can be combined in one chart.<br /><br /><br /><br /><br /><h4><br /><img alt="config-syntax" border="0" class="float-right" height="124" src="http://www.highcharts.com/images/stories/features/config-syntax.png" width="164" />Simple Configuration Syntax</h4><br />Setting the Highcharts configuration options requires no special <br />programming skills. The options are given in a JavaScript object <br />notation structure, which is basically a set of keys and values <br />connected by colons, separated by commas and grouped by curly brackets.<br /><br /><br /><h4 id="dynamic"><br /><img border="0" class="float-left" src="http://www.highcharts.com/images/stories/features/events.png" />Dynamic</h4><br />Through a full API you can add, remove and modify series and points <br />or modify axes at any time after chart creation. Numerous events supply <br />hooks for programming against the chart. In combination with jQuery, <br />MooTools or Prototype's Ajax API, this opens for solutions like live <br />charts constantly updating with values from the server, user supplied <br />data and more.<br /><br /><br /><h4><br /><img border="0" class="float-right" src="http://www.highcharts.com/images/stories/features/multiaxes.png" />Multiple Axes</h4><br />Sometimes you want to compare variables that are not the same scale -<br /> for example temperature versus rainfall and air pressure. Highcharts <br />lets you assign an y axis for each series - or an x axis if you want to <br />compare data sets of different categories. Each axis can be placed to <br />the right or left, top or bottom of the chart. All options can be set <br />individually, including reversing, styling and position.<br /><br /><br /><h4><br /><img alt="tooltip" border="0" class="float-left" height="124" src="http://www.highcharts.com/images/stories/features/tooltip.png" width="164" />Tooltip Labels</h4><br />On hovering the chart Highcharts can display a tooltip text with <br />information on each point and series. The tooltip follows as the user <br />moves the mouse over the graph, and great efforts have been taken to <br />make it stick to the nearest point as well as making it easy to read a <br />point that is below another point.<br /><br /><br /><h4><br /><img alt="datetime" border="0" class="float-right" height="124" src="http://www.highcharts.com/images/stories/features/datetime.png" width="164" />Datetime Axis</h4><br />75% of all charts with an X and Y axis have a date-time X axis. <br />Therefore Highchart is very intelligent about time values. With <br />milliseconds axis units, Highcharts determines where to place the ticks <br />so that they always mark the start of the month or the week, midnight <br />and midday, the full hour etc.<br /><br /><br /><h4><br /><img alt="exporting" border="0" class="float-left" height="124" src="http://www.highcharts.com/images/stories/features/exporting.png" width="164" />Export and print</h4><br />With the exporting module enabled, your users can export the chart to<br /> PNG, JPG, PDF or SVG format at the click of a button, or print the <br />chart directly from the web page.<br /><br /><br /><h4><br /><img alt="zooming" border="0" class="float-right" height="124" src="http://www.highcharts.com/images/stories/features/zooming.png" width="164" />Zooming</h4><br />By zooming in on a chart you can examine an especially interesting <br />part of the data more closely. Zooming can be in the X or Y dimension, <br />or both.<br /><br /><br /><h4><br /><img alt="ajax" border="0" class="float-left" height="124" src="http://www.highcharts.com/images/stories/features/ajax.png" width="164" />External Data Loading</h4><br />Highcharts takes the data in a JavaScript array, which can be defined<br /> in the local configuration object, in a separate file or even on a <br />different site. Furthermore, the data can be handled over to Highcharts <br />in any form, and a callback function used to parse the data into an <br />array.<br /><br /><br /><h4><br /><img alt="gauges" border="0" class="float-right" height="124" src="http://www.highcharts.com/images/stories/features/gauges.png" width="164" />Angular gauges</h4><br />Ideal for dashboards, angular gauges provides speedometer-like charts, easy to read at a quick glance.<br /><br /><br /><h4><br /><img alt="ajax" border="0" class="float-left" height="124" src="http://www.highcharts.com/images/stories/features/polar.png" width="164" />Polar charts</h4><br />Cartesian chart types like line, area, spline or areaspline can be converted to polar or radial chart by one simple option.<br /><br /><br /><h4><br /><img alt="inverted" border="0" class="float-right" height="124" src="http://www.highcharts.com/images/stories/features/inverted.png" width="164" />Inverted Chart or Reversed Axis</h4><br />Sometimes you need to flip over your chart and make the X axis appear<br /> vertical, like for example in a bar chart. Reversing the axis, with the<br /> highest values appearing closest to origo, is also supported.<br /><br /><br /><h4><br /><img alt="rotation" border="0" class="float-left" height="124" src="http://www.highcharts.com/images/stories/features/rotation.png" width="164" />Text Rotation for Labels</h4><br />All text labels, including axis labels, data labels for the point and axis titles, can be rotated in any angle.<br /><br /><br /><br /><br /><br /></div><br /></div><br /></div><br /></div><br /></div><br />

Highcharts

What is Highcharts? Highcharts is a charting library written in pure JavaScript, offering an easy way of adding interacti...

Read more »