Learning Highcharts

Learning Highcharts

Overview of this book

Highcharts is a popular web charting software that produces stunning and smooth animated JavaScript and HTML5 SVG graphs. It is among the leading web charting software in the market and has been used in many different sectors ó from financial to social websites. Although it is built on top of jQuery, it is so simple to construct that you need little programming skill to create a simple web chart. Highcharts works on all modern browsers and is solely based on native browser technologies and doesn't require client side plugins like Flash or Java."Learning Highcharts" is a comprehensive tutorial with clear and practical examples. This book follows a step by step approach towards making artistic, presentable, or professional style charts and other types of charts that you won't find elsewhere. It also shows you how to integrate Highcharts with other popular frameworks, such as jQuery, jQuery Mobile, and ExtJS and even how to run it on the server side.The book starts off with an introduction to Highcharts and demonstrates usage of its rich set of options. This is followed by an introduction to each type of basic chart, beginning with simple illustrations and ending with more artistic and productive additions to the charts. The book then guides you how to use the Highcharts API and events handling which are important to build interactive applications. It then goes on to show you how to apply Highcharts onto a popular AJAX Framework or even jQuery, jQuery Mobile and Ext JS. Finally the book shows readers how to set up Highcharts running on server side. "Learning Highcharts" aims to teach you everything you need to know about Highcharts, and take the advanced leap from Flash to JavaScript, with this extremely productive and effective Charting software available, thus helping you build basic charts and even multiple series and axes charts. The book also shows you the flexibility of Highcharts and how to create other special charts. The programming side of APIs and event handling will benefit the readers in building advanced web applications with Highcharts. The book also guides readers on how to integrate Highcharts with popular frameworks such as jQuery Mobile and Ext JS. By the end of the book, you should be able to use Highcharts to suit your web page or application needs.

Learning Highcharts

Credits

Foreword

About the Author

About the Reviewers

www.PacktPub.com

Preface

Free Chapter

Web Charts

A short history of web charting

The uprising of JavaScript and HTML5

JavaScript charts on the market

Why Highcharts?

Highcharts – a quick tutorial

Summary

Highcharts Configurations

Configuration structure

Understanding Highcharts layouts

Framing the chart with axes

Revisiting the series configuration

Exploring PlotOptions

Styling the tooltips

Animating charts

Expanding colors with gradients

Summary

Line, Area, and Scatter Charts

Introducing line charts

Sketching an area chart

Mixing line and area series

Combining scatter and area series

Summary

Bar and Column Charts

Introducing column charts

Introducing bar charts

Constructing a mirror chart

Converting a single bar chart into a horizontal gauge chart

Sticking the charts together

Summary

Pie Charts

Understanding the relationship of chart, pie, and series

Plotting simple pie charts – single series

Plotting multiple pies in a chart – multiple series

Preparing a donut chart – multiple series

Building a chart with multiple series types

Summary

Gauge, Polar, and Range Charts

Loading gauge, polar, and range charts

Plotting a speedometer gauge chart

Converting a spline chart to a polar/radar chart

Plotting range charts with market index data

Using a radial gradient on a gauge chart

Summary

Highcharts APIs

Understanding the Highcharts class model

Using Highcharts APIs

Summary

Highcharts Events

Introducing Highcharts events

Portfolio history example

Stocks' growth chart example

Summary

Highcharts and jQuery Mobile

A short introduction of jQuery Mobile

Understanding a mobile page structure

Understanding page initialization

Linking between mobile pages

Highcharts in touch screen environments

Integrating Highcharts and jQuery Mobile using an Olympic medals table application

Drilling down for data with the point click event

Building a dynamic content dialog with the point click event

Applying the gesturechange (pinch actions) event to a pie chart

Summary

Highcharts and Ext JS

Short introduction to Sencha Ext JS

A quick tour of Ext JS components

The Highcharts extension

A commercially Rich Internet Application with Highcharts – AppQoS

Summary

Running Highcharts on the Server Side

Running Highcharts on the server side

Highcharts on the server side

Comparison between the approaches

Summary

Index

Customer Reviews

5 star

4 star

3 star

2 star

1 star

Sticking the charts together

In this section we are building a page with a mixture of charts. The main chart is displayed on the left-hand side panel and three mini charts are displayed on the right-hand side panel in top-down order. The layout is achieved by HTML div boxes and CSS styles.

The left-hand side chart is from the multicolored column chart example that we discussed previously. All the axes lines and labels are disabled in the mini charts.

The first mini chart from the top is a two-series line chart with dataLabels enabled only for the last point in each series, that is, the last point in the data array is a data object instead. The label color is set to the same color as its series. Then plotLine is inserted into the y axis at the 50 percent value mark. The following is a sample of one of the series configurations:

            pointStart: 2001,
            marker: {
                 enabled: false
            },
            data: [ 53.6, 52.7, 52.7, 51.9, 52.4, 
               ...

Learning Highcharts

Learning Highcharts

Overview of this book

Related Content you might be interested in

Current Title:

Learning Highcharts

Sticking the charts together