Chapter 1. Getting Started with Highcharts

Highcharts is a JavaScript library that adds interactive charts to websites or web applications. It supports more than 20 chart types that can further be combined into different combinations to make data more meaningful. Highcharts comes with a plethora of features, and yet its API is simple enough to get beginners up and running.

In this chapter, we will present an overview of Highcharts and its various features. We will take a look at the advantages that Highcharts offers over its alternatives and how it can help us with visualizing data by providing deep browser support and extensibility. We will also learn how to install Highcharts and familiarize ourselves with the file structure and different modules. At the end of this chapter, we will construct a simple column chart to kick-start our coding journey and get hands-on experience with Highcharts configurations.

Why choose Highcharts?

While there are other charting libraries available in the market, and some of them come with really nice features, Highcharts has its own place in JavaScript charting. Here are some of the Highcharts features that make it stand out from its competitors.

Plenty of chart types

Highcharts supports more than 20 chart types, and these include common chart types such as column chart, bar chart, pie chart, and area chart as well as advanced chart types including angular gauges, scatter charts, and range charts. If that's not enough for plotting the data, Highcharts also supports combining these chart types into various combinations for a more meaningful representation of data.

Responsive

Highcharts looks great in any screen resolution or size. Be it a desktop or a handheld device, Highcharts adjusts itself according to the viewport.

Dynamic

Highcharts supports dynamic plotting of data. Series can be added or removed and axes can be modified at any time after the creation of the chart. Charts can be updated constantly with data streaming from the server or being supplied by the user.

Deep browser support

Highcharts works on all modern browsers including Chrome, Mozilla, Internet Explorer, Netscape, and Safari. Legacy versions of Internet Explorer including IE6 and 7 are also supported by Highcharts.

Highcharts takes full advantage of the Scalable Vector Graphics (SVG) feature in modern browsers in order to render charts. In older browsers, it makes use of Vector Markup Language (VML) to draw the graphics. For Android 2.x devices, it uses Canvas to render graphics. When talking about performance, SVG gives the best results followed by VML and then Canvas.

Data preprocessing

When working with a large amount of data, it is not viable to write it in the form of static code. So, the data in CSV, XML, or JSON can be preprocessed before it can be plotted by Highcharts. Highcharts can also take preprocessed data from a database.

Custom theming support

While Highcharts comes with eight predefined themes that can be easily modified, it can be completely rebranded. Custom themes can be created by merely defining a JavaScript object with colors and fonts passed as values to their respective elements.

Multilingual

Highcharts allows charts to be presented in any language. Since it uses SVG for plotting the charts, support for bidirectional text is built right into it.

Extensibility

Highcharts comes with a great many features to make charting much more intuitive and elegant, yet it provides a simple API model to extend the core to include more features and support according to one's needs.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.220.125.100