Book Image

Learning Highcharts

Book Image

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.
Table of Contents (19 chapters)
Learning Highcharts
Credits
Foreword
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

Index

A

  • Abstract Window Toolkit (AWT) / Java applet (client side) and servlet (server side)
  • adapters directory / Directories structure
  • Add & Plot button / Using Highcharts APIs, Getting data in Ajax and displaying new series with Chart.addSeries
  • Add button / Plot averaging series from displayed stocks series
  • addSeries event / Plot averaging series from displayed stocks series
  • addSeries function / Plot averaging series from displayed stocks series
  • addSeries method / Plot averaging series from displayed stocks series, addSeries
  • Adobe Shockwave Flash (client side)
    • about / Adobe Shockwave Flash (client side)
    • advantages / Adobe Shockwave Flash (client side)
    • disadvantages / Adobe Shockwave Flash (client side)
  • Ajax query, top-level chart
    • launching, with chart load event / Launching an Ajax query with the chart load event
  • align property, chart label properties / Chart label properties
  • allowDecimals option / Introducing line charts
  • allowPointSelect / Configuring the pie with sliced off sections
  • allowPointSelect option / Constructing the series configuration for a top-level chart
  • amCharts / amCharts
  • AppQoS
    • about / A commercially Rich Internet Application with Highcharts – AppQoS
  • area chart
    • sketching / Sketching an area chart
  • area spline chart
    • about / Sketching an area chart
  • automatic layout
    • about / Experimenting with the automatic layout
  • automatic layout, Highcharts layout
    • about / Understanding Highcharts layouts
  • Average line / Plot averaging series from displayed stocks series
  • Axis.addPlotLine, Highchart APIs
    • using / Using Axis.getExtremes and Axis.addPlotLine
  • Axis.getExtremes, Highchart APIs
    • using / Using Axis.getExtremes and Axis.addPlotLine
  • axis class / Understanding the Highcharts class model
  • axis configuration
    • about / Framing the chart with axes
    • axis data type, accessing / Accessing the axis data type
    • background, accessing / Adjusting intervals and background
    • intervals, accessing / Adjusting intervals and background
    • axis lines alignment, resolving issues / Adjusting intervals and background
    • plot bands, using / Using plot lines and plot bands
    • plot lines, using / Using plot lines and plot bands
    • multiple axes, extending to / Extending to multiple axes
  • axis data type
    • accessing / Accessing the axis data type
  • axis title alignment / Axis title alignment

B

  • bar charts
    • about / Introducing column charts, Introducing bar charts
    • looks, modifying / Giving the bar chart a simpler look
  • baseLength option / Gauge series – dial and pivot
  • baseWidth option / Gauge series – dial and pivot

C

  • callback / Comparison between the approaches
  • callback function / Highcharts constructor – Highcharts.Chart
  • callback handler, too; tips
    • using / Using the callback handler
  • canvas
    • about / Canvas
    • code, example / Canvas
  • categories option / Directories structure
  • center option / Building a chart with multiple series types, Extending to multiple panes
  • chart
    • multiple plies, plotting / Plotting multiple pies in a chart – multiple series
    • building, with multiple series type / Building a chart with multiple series types
    • polishing, with fonts and colors / Polishing the chart with fonts and colors
  • Chart.addSeries, Highcharts APIs
    • new series, displaying / Getting data in Ajax and displaying new series with Chart.addSeries
    • about / Getting data in Ajax and displaying new series with Chart.addSeries
    • using, to reinsert series with new data / Using Series.remove and Chart.addSeries to reinsert series with new data
  • chart.alignTicks option / Managing axes with different scales
  • chart.animation option / Setting up a Highcharts export example on the client side
  • chart.events.load handler / Highcharts constructor – Highcharts.Chart
  • Chart.get method, Highcharts components / Navigating through Highcharts components
    • using / Using the Chart.get method
    • and object hierarchy, using / Using the object hierarchy and Chart.get method
  • Chart.getSelectedPoints, Highchart APIs
    • using / Using Chart.getSelectedPoints and Chart.renderer methods
  • Chart.getSVG, Highcharts APIs
    • SVG data, extracting / Extracting SVG data with Chart.getSVG
  • chart.getSVG method / Setting up a Highcharts export example on the client side
  • chart.inverted option / Extending to multiple series line charts, Introducing bar charts
  • chart.polar option / Converting a spline chart to a polar/radar chart
  • Chart.renderer methods, Highchart APIs
    • using / Using Chart.getSelectedPoints and Chart.renderer methods
  • chart.selectionMarkerFill option / Zooming the selected area with the chart selection event
  • chart.showLoading method / Getting data in Ajax and displaying new series with Chart.addSeries
  • chart class / Understanding the Highcharts class model
  • chart click event, detail chart
    • applying / Applying the chart click event
  • chart component / Configuration structure
  • chartConfig option / Module APIs
  • chartConfig property / Module APIs
  • chart configurations, Highcharts APIs
    • about / Chart configurations
  • chart draw event, top-level chart
    • user interface, activating / Activating the user interface with the chart redraw event
  • chart label properties
    • about / Chart label properties
    • align property / Chart label properties
    • floating property / Chart label properties
    • margin property / Chart label properties
    • verticalAlign property / Chart label properties
    • x property / Chart label properties
    • y property / Chart label properties
    • subtitle alignment / Title and subtitle alignments
    • title alignment / Title and subtitle alignments
    • legend alignment / Legend alignment
    • axis title alignment / Axis title alignment
    • credits alignment / Credits alignment
  • chart load event, top-level chart
    • Ajax query, launching / Launching an Ajax query with the chart load event
  • chart margin setting
    • about / Chart margins and spacings
  • chart object / Introducing Highcharts events
  • ChartOptions object / Rhino and Batik (Java solution)
  • chartOptions parameter / Extracting SVG data with Chart.getSVG
  • charts
    • sticking together / Sticking the charts together
  • chart selection event
    • used for zooming selected area / Zooming the selected area with the chart selection event
  • class model, Highcharts
    • about / Understanding the Highcharts class model
    • series class / Understanding the Highcharts class model
    • chart class / Understanding the Highcharts class model
    • renderer class / Understanding the Highcharts class model
    • axis class / Understanding the Highcharts class model
    • point class / Understanding the Highcharts class model
  • click event / Highcharts in touch screen environments, Plotting a Highcharts chart on mobile device, Building a dynamic content dialog with the point click event
  • click event, detail chart
    • plot line action, setting / Setting up a plot line action with the click event
  • click event function / Editing the pie chart's slice with the point click, update, and remove events
  • click event handler / Setting up a plot line action with the click event
  • click handler / Building a dynamic content dialog with the point click event
  • Color object / Preparing a donut chart – multiple series
  • colors gradient
    • about / Expanding colors with gradients
    • linearGradient / Expanding colors with gradients
    • stops / Expanding colors with gradients
  • column charts
    • about / Introducing column charts
    • overlapped / Overlapped column chart
    • grouping / Stacking and grouping a column chart
    • stacking / Stacking and grouping a column chart
    • stacked and single columns, mixing / Mixing the stacked and single columns
    • columns in stacked percentage, comparing / Comparing the columns in stacked percentages
    • colum colors and data labels, adjusting / Adjusting column colors and data labels
  • columns
    • in stacked percentage, comparing / Comparing the columns in stacked percentages
    • colors, adjusting / Adjusting column colors and data labels
  • Common Gateway Interface (CGI) / HTML image map (server-side technology)
  • connectNulls option / Plotting charts with missing data
  • constr / Comparison between the approaches
  • contextify module / Installing Node and modules
  • context menu, Highcharts extension
    • displaying, on data point / Displaying a context menu by clicking on a data point
  • createChart method / Plotting a Highcharts chart on mobile device
  • createServer call / Starting the Node server and issuing a URL query
  • credits.position property / Credits alignment
  • credits alignment / Credits alignment
  • crosshairs configuration / Styling the tooltips
  • Customer Data Attributes / Understanding a mobile page structure
  • CutyCapt tool / Applying server-side change

D

  • <div> tag / Plotting multiple pies in a chart – multiple series
  • dashStyle option / Styling the tooltips
  • data
    • drilling, with point click event / Drilling down for data with the point click event
  • data field / Revisiting the series configuration
  • dataIndex option / Example of using JsonStore and GridPanel
  • data labels
    • adjusting / Adjusting column colors and data labels
  • dataLabels.distance option / Preparing a donut chart – multiple series
  • dataLabels.formatter option / Configuring the pie with sliced off sections
  • dataLabel settings / Introducing bar charts
  • data point, detail chart
    • hovering, with mouseOver point event / Hovering over a data point with the mouseOver and mouseOut point events
    • hovering, with mouseOut point event / Hovering over a data point with the mouseOver and mouseOut point events
  • data point, top-level chart
    • uselecting with unselect events / Selecting and unselecting a data point with the point select and unselect events
    • selecting with point select / Selecting and unselecting a data point with the point select and unselect events
  • data points, Highchart APIs
    • selecting / Selecting data points and adding plot lines
    • updating, with Point.update / Updating data points with Point.update
  • datetime scale / Plotting a speedometer gauge chart
  • datetime type / Chart configurations
  • deliverChart method / Extracting SVG data with Chart.getSVG
  • detail chart
    • about / Detail chart
    • series configuration, constructing / Constructing the series configuration for the detail chart
    • mouseOver, used for hovering over data point / Hovering over a data point with the mouseOver and mouseOut point events
    • mouseOut, used for hovering over data point / Hovering over a data point with the mouseOver and mouseOut point events
    • chart click event, applying / Applying the chart click event
    • mouse cursor over plot lines, changing with mouseover event / Changing the mouse cursor over plot lines with mouseover event
  • device properties
    • detecting / Detecting device properties
  • dial option / Gauge series – dial and pivot
  • directories, Highcharts
    • index.html / Directories structure
    • examples / Directories structure
    • graphics / Directories structure
    • exporting-server / Directories structure
    • is / Directories structure
    • adapters / Directories structure
    • themes / Directories structure
  • donut chart
    • preparing / Preparing a donut chart – multiple series
  • donut charts, Highcharts extension
    • plotting / Plotting donut charts
  • draw method / draw
  • duration, animation jQuery / Animating charts
  • dynamic content dialog
    • creating, with point click event / Building a dynamic content dialog with the point click event

E

  • easing, animation jQuery / Animating charts
  • examples directory / Directories structure
  • exportChart method / Extracting SVG data with Chart.getSVG
  • exporting-server directory / Directories structure
  • exporting component / Configuration structure
  • export modules / Event handling and export modules
  • Ext.decode / Ajax
  • Ext.onReady / Implementing and loading Ext JS code
  • extension
    • URL, for downloading / Short introduction to Sencha Ext JS
  • Ext JS 4 Charts / Ext JS 4 Charts
  • Ext JS code
    • loading / Implementing and loading Ext JS code
    • implementing / Implementing and loading Ext JS code
  • Ext JS components
    • about / A quick tour of Ext JS components
    • Ext JS code, loading / Implementing and loading Ext JS code
    • Ext JS code, implementing / Implementing and loading Ext JS code
    • creating / Creating and accessing Ext JS components
    • accessing / Creating and accessing Ext JS components
    • viewport class / Using layout and viewport
    • panel / Panel
    • window / Window
    • Ajax / Ajax
    • store / Store and JsonStore
    • JsonStore / Store and JsonStore

F

  • Fiat 500 speedometer, twin dials chart
    • plotting / Plotting a twin dials chart – a Fiat 500 speedometer
  • fixed layout
    • about / Experimenting with the fixed layout
  • fixed layout, Highcharts layout
    • about / Understanding Highcharts layouts
  • flashVars / Adobe Shockwave Flash (client side)
  • floating property / Title and subtitle alignments, Polishing a chart with an artistic style
  • floating property, chart label properties / Chart label properties
  • Flot / Flot and Flotr
  • Flotr / Flot and Flotr
  • fontWeight option / Configuring the pie with sliced off sections
  • formatter function / Accessing the axis data type, Constructing a mirror chart
  • formatter option / Introducing line charts
  • formatWithLineBreakst method / Configuring the pie with sliced off sections
  • FormPanel / FormPanel
  • fs module / Preparing the PhantomJS script
  • FusionCharts / FusionCharts
  • fx option / Using a radial gradient on a gauge chart
  • fy option / Using a radial gradient on a gauge chart

G

  • -g option / Installing Node and modules
  • gauge chart
    • about / Loading gauge, polar, and range charts
    • speedometer gauge chart, plotting / Plotting a speedometer gauge chart
    • radial gradient, using / Using a radial gradient on a gauge chart
  • gauge chart pane
    • plotting / Plotting a gauge chart pane
    • backgrounds, setting / Setting pane backgrounds
    • axes with different scale, managing / Managing axes with different scales
    • multiple panes, extending to / Extending to multiple panes
  • gauge series
    • dial and pivot / Gauge series – dial and pivot
    • plotOptions.gauge.dial / Gauge series – dial and pivot
    • plotOptions.gauge.pivot / Gauge series – dial and pivot
  • gesturechange (pinch actions) event
    • applying, to pie chart / Applying the gesturechange (pinch actions) event to a pie chart
  • gesturestart event / Applying the gesturechange (pinch actions) event to a pie chart
  • get method / Using the Chart.get method
  • getSVG method / Extracting SVG data with Chart.getSVG, Running the Node-Highcharts module
  • gold medals page
    • loading up / Loading up the gold medals page
  • gold_chart page block / Loading up the gold medals page
  • Google Web Toolkit (GWT) / Short introduction to Sencha Ext JS
  • graphics directory / Directories structure
  • graph options
    • switching, with jQuery Mobile dialog box / Switching graph options with the jQuery Mobile dialog box
  • graph orientation
    • switching, with orientationchange event / Switching graph orientation with the orientationchange event
  • graph presentation
    • changing, with swipeleft motion event / Changing the graph presentation with a swipeleft motion event
  • GridPanel / GridPanel
  • GridPanel content / Example of using JsonStore and GridPanel
  • groupPadding / Overlapped column chart

H

  • High & Low range series / Plotting range charts with market index data
  • Highcharts
    • about / Why Highcharts?, Understanding the relationship of chart, pie, and series
    • and JavaScript frameworks / Highcharts and JavaScript frameworks
    • using, under MooTools environment / Highcharts and JavaScript frameworks
    • using, under prototype / Highcharts and JavaScript frameworks
    • presentation / Presentation
    • license / License
    • APIs / Simple API model
    • online documentation / Documentations
    • openness (feature request with user voice) / Openness (feature request with user voice)
    • tutorial / Highcharts – a quick tutorial
    • directories, structure / Directories structure
    • directories / Directories structure
    • configuration, structure / Configuration structure
    • layout / Understanding Highcharts layouts
    • axis configuration / Framing the chart with axes
    • animating / Animating charts
    • line charts / Introducing line charts
    • area charts / Sketching an area chart
    • area spline chart / Sketching an area chart
    • scatter series / Combining scatter and area series
    • bar charts / Introducing column charts, Introducing bar charts
    • column charts / Introducing column charts
    • mirror chart / Constructing a mirror chart
    • single bar chart / Converting a single bar chart into a horizontal gauge chart
    • donut chart / Preparing a donut chart – multiple series
    • source code and demo, URL / Preparing a donut chart – multiple series
    • polar chart / Loading gauge, polar, and range charts
    • gauge chart / Loading gauge, polar, and range charts
    • range chart / Loading gauge, polar, and range charts
    • gauge chart pane, plotting / Plotting a gauge chart pane
    • class model / Understanding the Highcharts class model
    • in touch screen environments / Highcharts in touch screen environments
    • and jQuery Mobile integrating, Olympic Medals Table application used / Integrating Highcharts and jQuery Mobile using an Olympic medals table application
  • Highcharts, running on server side
    • about / Running Highcharts on the server side
    • Xvfb and web browsers (Unix solution) used / Using Xvfb and web browsers (Unix solution)
    • Highcharts export example, setting up on client side / Setting up a Highcharts export example on the client side
    • Xvfb, installing / Installing Xvfb and a web browser
    • web browser, installing / Installing Xvfb and a web browser
    • Xvfb server, starting up / Starting up the Xvfb server
    • Server-side Change, applying / Applying server-side change
    • server task, running / Running the server task
    • Rhino / Rhino and Batik (Java solution)
    • Highcharts Server-side Export (HSE) / Rhino and Batik (Java solution)
    • node, installing / Installing Node and modules
    • modules, installing / Installing Node and modules
    • node server, setting up / Setting up the Node server
    • Node-Highcharts module, running / Running the Node-Highcharts module
    • node server, starting / Starting the Node server and issuing a URL query
    • URL query, issuing / Starting the Node server and issuing a URL query
    • PhantomJS (headless webkit) / PhantomJS (headless webkit)
    • series data script, preparing / Preparing the series data script
    • PhantomJS Script, preparing / Preparing the PhantomJS script
  • Highcharts.Chart
    • about / Highcharts constructor – Highcharts.Chart
  • Highcharts.Chart callback parameter / Highcharts constructor – Highcharts.Chart
  • Highcharts.colors property / Extending to multiple axes
  • Highcharts 3.0 / Comparison between the approaches
  • Highcharts animation
    • initial animation / Animating charts
    • update animation / Animating charts
    • duration, animation jQuery / Animating charts
    • easing, animation jQuery / Animating charts
  • Highcharts APIs
    • about / Using Highcharts APIs
    • chart configuration / Chart configurations
    • new series, displaying with Chart.addSeries / Getting data in Ajax and displaying new series with Chart.addSeries
    • multiple series, displaying with AJAX calls / Displaying multiple series with simultaneous Ajax calls
    • multiple series, displaying with multiple series / Displaying multiple series with simultaneous Ajax calls
    • SVG data, extracting with Chart.getSVG / Extracting SVG data with Chart.getSVG
    • data point, selecting / Selecting data points and adding plot lines
    • plot lines, adding / Selecting data points and adding plot lines
    • Axis.addPlotLine, using / Using Axis.getExtremes and Axis.addPlotLine
    • Axis.getExtremes method, using / Using Axis.getExtremes and Axis.addPlotLine
    • Chart.renderer method, using / Using Chart.getSelectedPoints and Chart.renderer methods
    • Chart.getSelectedPoints, using / Using Chart.getSelectedPoints and Chart.renderer methods
    • series update, exploring / Exploring the series update
    • continuous series update / Continuous series update
    • Series.setData new data set, applying / Applying a new set of data with Series.setData
    • Series.remove, used to reinsert series with new data / Using Series.remove and Chart.addSeries to reinsert series with new data
    • Chart.addSeries, used to reinsert series with new data / Using Series.remove and Chart.addSeries to reinsert series with new data
    • data points, updating with Point,update / Updating data points with Point.update
    • points, adding with Series.addPoint / Removing and adding data points with Point.remove and Series.addPoint
    • points, removing with Point.remove / Removing and adding data points with Point.remove and Series.addPoint
    • SVG animations, performance on browsers / Exploring SVG animations performance on browsers
    • performance, comparing on large datasets / Comparing Highcharts' performance on large datasets
  • Highcharts chart
    • plotting, on mobile device / Plotting a Highcharts chart on mobile device
  • Highcharts components
    • navigating / Navigating through Highcharts components
    • object hierarchy, using / Using object hierarchy, Using the object hierarchy and Chart.get method
    • Chart.get method, using / Using the Chart.get method, Using the object hierarchy and Chart.get method
  • Highcharts configuration
    • about / Configuration structure
    • URL / Configuration structure
    • chart component / Configuration structure
    • series component / Configuration structure
    • xAxis/yAxis component / Configuration structure
    • tooltip component / Configuration structure
    • title/subtitle component / Configuration structure
    • legend component / Configuration structure
    • plotOptions component / Configuration structure
    • exporting component / Configuration structure
  • Highcharts constructor
    • about / Highcharts constructor – Highcharts.Chart
  • Highcharts events
    • about / Introducing Highcharts events
    • list / Introducing Highcharts events
    • portfolio history example / Portfolio history example
    • stocks growth chart example / Stocks' growth chart example
  • Highcharts export example
    • setting, on client side / Setting up a Highcharts export example on the client side
  • Highcharts extension
    • about / Short introduction to Sencha Ext JS
    • Highcharts options, removing / Step 1 – removing some of the Highcharts options
    • Highcharts extension config, converting to / Step 2 – converting to Highcharts extension configuration
    • series option constructing, by mapping JsonStore data model / Step 3 – constructing a series option by mapping the JsonStore data model
    • creating / Step 4 – creating the Highcharts extension
    • series specific options, passing / Passing series specific options in the Highcharts extension
    • data model, converting into Highcharts series / Converting a data model into a Highcharts series
    • y-axis numerical value / X-axis category data and y-axis numerical values
    • X-axis category data / X-axis category data and y-axis numerical values
    • numerical values, for x axes / Numerical values for both x and y axes
    • numerical values, for y axes / Numerical values for both x and y axes
    • pre-processing, performing from store data / Performing pre-processing from store data
    • pie charts, plotting / Plotting pie charts
    • donut charts, plotting / Plotting donut charts
    • module APIs / Module APIs
    • addSeries method / addSeries
    • removeSerie method / removeSerie and removeAllSeries
    • removeAllSeries method / removeSerie and removeAllSeries
    • setTitle method / setTitle and setSubTitle
    • setSubTitle method / setTitle and setSubTitle
    • draw method / draw
    • export modules / Event handling and export modules
    • context menu displaying,, by data point click / Displaying a context menu by clicking on a data point
  • Highcharts layout
    • about / Understanding Highcharts layouts
    • automatic layout / Understanding Highcharts layouts, Experimenting with the automatic layout
    • fixed layout / Understanding Highcharts layouts, Experimenting with the fixed layout
    • spacing setting / Chart margins and spacings
    • chart margins setting / Chart margins and spacings
    • chart label, properties / Chart label properties
  • Highcharts options, Highcharts extension
    • removing / Step 1 – removing some of the Highcharts options
  • Highcharts series, Highcharts extension
    • data odel, converting into / Converting a data model into a Highcharts series
  • Highcharts server-side Export (HSE)
    • about / Comparison between the approaches
  • histStock variable / Continuous series update
  • horizontal gauge chart
    • single bar chart, converting to / Converting a single bar chart into a horizontal gauge chart
  • href value / Linking between mobile pages
  • HTML
    • tool tips, formatting / Formatting the tooltips in HTML
  • HTML5 / The uprising of JavaScript and HTML5
  • HTML image map (server-side technology) / HTML image map (server-side technology)
    • advantages / HTML image map (server-side technology)
    • disadvantages / HTML image map (server-side technology)

I

  • idProperty / Example of using JsonStore and GridPanel
  • idx parameter / removeSerie and removeAllSeries
  • ImageMagick package
    • URL / Extracting SVG data with Chart.getSVG
  • img src attribute / HTML image map (server-side technology)
  • index.html directory / Directories structure
  • infile / Comparison between the approaches
  • initial animation / Animating charts
    • about / Animating charts
  • innerRadius option / Setting pane backgrounds, Extending to multiple panes
  • innerSize option / Preparing a donut chart – multiple series
  • Internet Application (RIA) / Short introduction to Sencha Ext JS
  • inverted option / Extending to multiple series line charts, Switching graph orientation with the orientationchange event
  • is directory / Directories structure
  • itemId option / Creating and accessing Ext JS components

J

  • Java Applet (client side)
    • about / Java applet (client side) and servlet (server side)
  • JavaScript / The uprising of JavaScript and HTML5
  • JavaScript charts
    • jqPlot / jqPlot
    • amCharts / amCharts
    • Ext JS 4 Charts / Ext JS 4 Charts
    • YUI 3 Charts / YUI 3 Charts
    • FusionCharts / FusionCharts
    • JS Charts / JS Charts
    • Flot / Flot and Flotr
    • Flotr / Flot and Flotr
  • JavaScript library
    • URL / The uprising of JavaScript and HTML5
  • JFreeChart / Java applet (client side) and servlet (server side)
  • jQM
    • about / A short introduction of jQuery Mobile
    • mobile page structure / Understanding a mobile page structure
    • page initialization / Understanding page initialization
    • mobile pages, linking between / Linking between mobile pages
    • and Highcharts integrating, Olympic Medals Table application used / Integrating Highcharts and jQuery Mobile using an Olympic medals table application
  • jqPlot / jqPlot
  • JQuery library
    • URL / The uprising of JavaScript and HTML5
  • jQuery Mobile dialog box
    • graph options, switching with / Switching graph options with the jQuery Mobile dialog box
  • JS Charts / JS Charts
  • jsdom module / Installing Node and modules
  • JsonStore
    • using, example for / Example of using JsonStore and GridPanel
  • JsonStore class
    • about / Store and JsonStore
  • JsonStore data model, Highcharts extension
    • mapping, to construct series option / Step 3 – constructing a series option by mapping the JsonStore data model

L

  • labels.formatter / Extending to multiple panes
  • layout option / Using layout and viewport
  • legend alignment / Legend alignment
  • legend box, pie chart
    • anabling / Applying a legend to a pie chart
  • legend component / Configuration structure
  • line and area series
    • about / Mixing line and area series
    • projection chart, simulating / Simulating a projection chart
    • spline, constrasting with step line / Contrasting spline with step line
    • stacked area chart, extending to / Extending to a stacked area chart
    • charts with missing data, plotting / Plotting charts with missing data
  • linearGradient, colors gradient
    • about / Expanding colors with gradients
  • linear scale / Plotting a speedometer gauge chart
  • line charts
    • about / Introducing line charts
    • display / Introducing line charts
    • multiple series line charts, extending to / Extending to multiple series line charts
  • lineWidth property / Adjusting intervals and background
  • logarithmic scale / Plotting a speedometer gauge chart
  • logo.png / Polishing a chart with an artistic style

M

  • mapping option / Example of using JsonStore and GridPanel
  • margin option / Chart margins and spacings
  • margin property, chart label properties / Chart label properties
  • marginTop property / Chart margins and spacings
  • market index data
    • range charts, plotting with / Plotting range charts with market index data
  • maxPadding option / Building a chart with multiple series types
  • minorTickPosition / Managing axes with different scales
  • mirror chart
    • about / Constructing a mirror chart
    • stacked mirror chart, extending to / Extending to a stacked mirror chart
  • mobile pages, jQM
    • linking between / Linking between mobile pages
  • mobile page structure
    • in HTML document, example / Understanding a mobile page structure
  • mobile page structure, jQM
    • about / Understanding a mobile page structure
  • Modify Stop Order dialog / Setting up a plot line action with the click event
  • Modify Stop Order dialog box / Setting up a plot line action with the click event
  • Module APIs, Highcharts APIs
    • about / Module APIs
  • mouse cursor, detail chart
    • over plot lines, changing with mouseover event / Changing the mouse cursor over plot lines with mouseover event
  • mouseOut event / Highcharts in touch screen environments
  • mouseOut point event, detail chart
    • used, for hovering over data point / Hovering over a data point with the mouseOver and mouseOut point events
  • mouseOver event / Highcharts in touch screen environments
  • mouseOver point event, detail chart
    • used, for hovering over data point / Hovering over a data point with the mouseOver and mouseOut point events
  • multiple series
    • multiple plies, plotting / Plotting multiple pies in a chart – multiple series
  • multiple series line charts
    • extending to / Extending to multiple series line charts
  • multiple series tool tip
    • applying / Applying a multiple series tooltip
  • multiple series type
    • chart, building with / Building a chart with multiple series types
  • mutt
    • URL / Extracting SVG data with Chart.getSVG

N

  • netStore object / Example of using JsonStore and GridPanel
  • NetworkData data model / Example of using JsonStore and GridPanel
  • node
    • about / Node.js/Node and Node-Highcharts (JavaScript solution)
  • node-highcharts module / Running the Node-Highcharts module
  • Node-Highcharts module
    • running / Running the Node-Highcharts module
  • Node-Highcharts solution
    • about / Comparison between the approaches
  • node server
    • installing / Installing Node and modules
    • setting up / Setting up the Node server
    • starting / Starting the Node server and issuing a URL query
  • numberFormat method / Introducing line charts

O

  • object hierarchy, Highcharts components
    • using / Using object hierarchy
    • and Chart.get method, using / Using the object hierarchy and Chart.get method
  • object tag / Adobe Shockwave Flash (client side)
  • Olympic Medals Table application
    • used, for integrating Highcharts and jQuery Mobile / Integrating Highcharts and jQuery Mobile using an Olympic medals table application
    • gold medals page, loading / Loading up the gold medals page
    • device properties, detecting / Detecting device properties
    • Highcharts chart, plotting on mobile devices / Plotting a Highcharts chart on mobile device
    • graph options, switching with jQuery Mobile dialog box / Switching graph options with the jQuery Mobile dialog box
    • graph presentation, changing with swipeleft motion event / Changing the graph presentation with a swipeleft motion event
    • graph presentation with orientationchange event / Switching graph orientation with the orientationchange event
  • Open & Close area range series / Plotting range charts with market index data
  • opposite property / Extending to multiple axes
  • options button / Switching graph options with the jQuery Mobile dialog box
  • orientationchange event
    • graph orientation, switching / Switching graph orientation with the orientationchange event
  • outerRadius option / Setting pane backgrounds

P

  • pageinit event / Linking between mobile pages
  • pageinit event handler / Understanding page initialization
  • pageinit handler / Switching graph options with the jQuery Mobile dialog box
  • page initialization, jQM
    • about / Understanding page initialization
  • pane
    • about / Plotting a speedometer gauge chart
    • multiple panes, extending to / Extending to multiple panes
  • panel
    • about / Panel
    • GridPanel / GridPanel
    • FormPanel / FormPanel
    • TabPanel / TabPanel
  • PhantomJs
    • about / Highcharts on the server side
  • PhantomJS
    • about / PhantomJS (headless webkit)
  • PhantomJS Script
    • preparing / Preparing the PhantomJS script
  • pie-charts, Highcharts extension
    • plotting / Plotting pie charts
  • pie chart
    • about / Understanding the relationship of chart, pie, and series
    • plotting / Plotting simple pie charts – single series
    • configuring, with sliced off sections / Configuring the pie with sliced off sections
    • legend, applying / Applying a legend to a pie chart
    • multiple plies, plotting in chart / Plotting multiple pies in a chart – multiple series
    • launching, with series checkboxClick event / Launching a pie chart with the series checkboxClick event
    • gesturechange (pinch actions) event,applying / Applying the gesturechange (pinch actions) event to a pie chart
  • pie chart, stocks growth chart example
    • slice, editing with point click event / Editing the pie chart's slice with the point click, update, and remove events
    • slice, editing with update event / Editing the pie chart's slice with the point click, update, and remove events
    • slice, editing with remove event / Editing the pie chart's slice with the point click, update, and remove events
  • pie_chart.php / HTML image map (server-side technology)
  • Plot All button / Using Highcharts APIs
  • plotBackgroundImage option / Polishing a chart with an artistic style
  • plot bands / Using plot lines and plot bands
  • plotGoldChart method / Plotting a Highcharts chart on mobile device, Switching graph orientation with the orientationchange event
  • plot line action, detail chart
    • setting, with click event / Setting up a plot line action with the click event
  • plot lines / Using plot lines and plot bands
  • plot lines, Highchart APIs
    • adding / Selecting data points and adding plot lines
  • plotLinesAndBands property / Changing the mouse cursor over plot lines with mouseover event
  • PlotOptions
    • about / Exploring PlotOptions
    • plotOptions.line.lineWidth property / Exploring PlotOptions
    • plotOptions.pie.center property / Exploring PlotOptions
    • chart configuration code, for preceding graph generation / Exploring PlotOptions
    • stacking option / Exploring PlotOptions
  • plotOptions.gauge.dial / Gauge series – dial and pivot
  • plotOptions.gauge.pivot / Gauge series – dial and pivot
  • plotOptions.line.lineWidth property / Exploring PlotOptions
  • plotOptions.pie.center property / Exploring PlotOptions
  • plotOptions.series.animation option / Setting up a Highcharts export example on the client side
  • plotOptions.series option / Directories structure
  • plotOptions component / Configuration structure
  • plotOptions property / Directories structure
  • point.events option / Constructing the series configuration for a top-level chart
  • Point.update, Highchart APIs
    • used, for updating data points / Updating data points with Point.update, Removing and adding data points with Point.remove and Series.addPoint
  • point class / Understanding the Highcharts class model
  • point click event
    • used, for editing pie chart slice / Editing the pie chart's slice with the point click, update, and remove events
    • used, for drilling data / Drilling down for data with the point click event
    • dynamic content dialog, creating / Building a dynamic content dialog with the point click event
  • pointFormat / Formatting the tooltips in HTML
  • pointPadding / Overlapped column chart
  • point select
    • used, for selecting data point / Selecting and unselecting a data point with the point select and unselect events
  • pointStart option / Introducing line charts
  • pointStart property / Simulating a projection chart
  • polar chart
    • about / Loading gauge, polar, and range charts
    • spline chart, converting to / Converting a spline chart to a polar/radar chart
  • Portfolio Detail section / Selecting and unselecting a data point with the point select and unselect events
  • portfolio history example
    • about / Portfolio history example
    • top-level chart / Top-level chart
    • detail chart / Detail chart
  • projection chart
    • simulating / Simulating a projection chart

R

  • $.ready jQuery / Implementing and loading Ext JS code
  • $.ready method / Highcharts constructor – Highcharts.Chart, Understanding page initialization
  • radar chart
    • spline chart, converting to / Converting a spline chart to a polar/radar chart
  • radial gradient
    • about / Using a radial gradient on a gauge chart
    • using, on gauge chart / Using a radial gradient on a gauge chart
  • radialGradient feature / Setting pane backgrounds
  • range chart
    • about / Loading gauge, polar, and range charts
    • plotting, with market index data / Plotting range charts with market index data
  • rearLength option / Gauge series – dial and pivot
  • removeAllSeries method / removeSerie and removeAllSeries
  • Remove button / Editing the pie chart's slice with the point click, update, and remove events
  • remove event
    • used, for editing pie chart slice / Editing the pie chart's slice with the point click, update, and remove events
  • Remove Order button / Setting up a plot line action with the click event
  • removeSerie method / removeSerie and removeAllSeries
  • renderer.image method / Polishing a chart with an artistic style, Building a chart with multiple series types
  • renderer class / Understanding the Highcharts class model
  • renderTo option / Directories structure
  • Rhino
    • about / Rhino and Batik (Java solution)
  • rotation option / Plotting a gauge chart pane

S

  • <script> tag / Linking between mobile pages
  • Save Order button / Applying the chart click event
  • scatter and area series
    • combining / Combining scatter and area series
    • chart, polishing with artistic style / Polishing a chart with an artistic style
  • selected area
    • zooming, chart selection event used / Zooming the selected area with the chart selection event
  • selection event / Zooming the selected area with the chart selection event
  • Sencha Ext JS
    • about / Short introduction to Sencha Ext JS
  • series.data macro / Formatting the tooltips in HTML
  • Series.remove
    • about / Using Series.remove and Chart.addSeries to reinsert series with new data
    • using, to reinsert series with new data / Using Series.remove and Chart.addSeries to reinsert series with new data
  • series checkboxClick event
    • pie chart, launching with / Launching a pie chart with the series checkboxClick event
  • series class / Understanding the Highcharts class model
  • series component / Configuration structure
  • series config / Introducing line charts
  • series configuration, detail chart
    • constructing / Constructing the series configuration for the detail chart
  • series configuration, top-level chart
    • constructing / Constructing the series configuration for a top-level chart
  • series data script
    • preparing / Preparing the series data script
  • series option, Highcharts extension
    • constructing, by mapping JsonStore data model / Step 3 – constructing a series option by mapping the JsonStore data model
  • series property / Directories structure
    • about / Revisiting the series configuration, Exploring PlotOptions
  • series specific options, Highcharts extension
    • passing / Passing series specific options in the Highcharts extension
  • series update, Highchart APIs
    • exploring / Exploring the series update, Continuous series update
    • techniques / Running the experiment
    • Series.setData, new data set applying / Applying a new set of data with Series.setData
    • Chart.addSeries, using to reinsert series with new data / Using Series.remove and Chart.addSeries to reinsert series with new data
    • Series.remove, using to reinsert series with new data / Using Series.remove and Chart.addSeries to reinsert series with new data
  • server task
    • running / Running the server task
  • Servlet (server side)
    • about / Java applet (client side) and servlet (server side)
    • advantages / Java applet (client side) and servlet (server side)
    • disadvantages / Java applet (client side) and servlet (server side)
  • setSubTitle method / setTitle and setSubTitle
  • setTitle method / setTitle and setSubTitle
  • Shockwave Flash (SWF) files / Adobe Shockwave Flash (client side)
  • showCheckbox option / Plot averaging series from displayed stocks series
  • showInLegend property / Sketching an area chart
  • Show Point Value checkbox / Selecting data points and adding plot lines
  • Show Range action / Using Axis.getExtremes and Axis.addPlotLine
  • single bar chart
    • converting, to horizontal gauge chart / Converting a single bar chart into a horizontal gauge chart
  • size option / Building a chart with multiple series types
  • slicedOffset option / Configuring the pie with sliced off sections
  • sliced property / Configuring the pie with sliced off sections
  • spacingBottom / Sketching an area chart
  • spacing setting
    • about / Chart margins and spacings
  • speedometer gauge chart
    • plotting / Plotting a speedometer gauge chart
  • spline
    • contrasting, with step line / Contrasting spline with step line
  • spline chart
    • converting, to radar chart / Converting a spline chart to a polar/radar chart
    • converting, to polar chart / Converting a spline chart to a polar/radar chart
  • stacked and single columns
    • mixing / Mixing the stacked and single columns
  • stacked area chart
    • extending to / Extending to a stacked area chart
  • stacked mirror chart
    • extending to / Extending to a stacked mirror chart
  • stacking option / Exploring PlotOptions, Mixing the stacked and single columns
  • stocks growth chart example
    • about / Stocks' growth chart example
    • averaging series from displayed stocks series, plotting / Plot averaging series from displayed stocks series
    • dialog, launching with series click event / Launching a dialog with the series click event
    • pie chart, launching with series checkboxClick event / Launching a pie chart with the series checkboxClick event
    • pie charts slice, editing with point-click event / Editing the pie chart's slice with the point click, update, and remove events
    • pie charts slice, editing with update event / Editing the pie chart's slice with the point click, update, and remove events
    • pie charts slice, editing with remove event / Editing the pie chart's slice with the point click, update, and remove events
  • stop order / Applying the chart click event
  • stops, colors gradient
    • about / Expanding colors with gradients
  • Stop Timing button / Comparing Highcharts' performance on large datasets
  • Store class
    • about / Store and JsonStore
  • store data, Highcharts extension
    • pre-processing performing / Performing pre-processing from store data
  • SVG
    • about / SVG (Scalable Vector Graphics)
    • code, executing / SVG (Scalable Vector Graphics)
    • script / SVG (Scalable Vector Graphics)
  • SVG animation, Highcharts APIs
    • performance, exploring on browsers / Exploring SVG animations performance on browsers
  • SVG data, Highcharts APIs
    • extracting, wth Chart.getSVG / Extracting SVG data with Chart.getSVG
  • svg variable / Preparing the PhantomJS script
  • swipeleft motion event
    • graph presentation, changing / Changing the graph presentation with a swipeleft motion event
  • Synchronized Multimedia Integration Language (SMIL)
    • about / SVG (Scalable Vector Graphics)

T

  • 'this' keyword / Zooming the selected area with the chart selection event
  • TabPanel / TabPanel
  • themes directory / Directories structure
  • the pageinit handler / Understanding page initialization
  • this.point variable / Using the callback handler
  • this.series variable / Using the callback handler
  • this keyword / Drilling down for data with the point click event
  • tickInterval option / Plotting a speedometer gauge chart
  • tickLength property / Adjusting intervals and background
  • tickPosition / Managing axes with different scales
  • tickWidth property / Adjusting intervals and background
  • title/subtitle component / Configuration structure
  • tooltip.enabled / Styling the tooltips
  • tooltip component / Configuration structure
  • tool tips
    • styling / Styling the tooltips
    • in HTML, formatting / Formatting the tooltips in HTML
    • callback handler, using / Using the callback handler
    • multiple series tool tip, applying / Applying a multiple series tooltip
  • top-level chart
    • about / Top-level chart
    • series configuration, constructing / Constructing the series configuration for a top-level chart
    • Ajax query, launching with chart load event / Launching an Ajax query with the chart load event
    • user interface, activating with chart redraw event / Activating the user interface with the chart redraw event
    • data point, uselecting with unselect events / Selecting and unselecting a data point with the point select and unselect events
    • data point, selecting with point select / Selecting and unselecting a data point with the point select and unselect events
    • selected area zooming, chart selection event used / Zooming the selected area with the chart selection event
  • touch screen environments
    • Highcharts in / Highcharts in touch screen environments
  • twin dials chart
    • Fiat 500 speedometer, plotting / Plotting a twin dials chart – a Fiat 500 speedometer

U

  • Unix solution
    • about / Comparison between the approaches
  • unselect event handler / Selecting and unselecting a data point with the point select and unselect events
  • unselect events
    • used, for unselecting data point / Selecting and unselecting a data point with the point select and unselect events
  • update animation / Animating charts
  • update button / Switching graph options with the jQuery Mobile dialog box
  • update event
    • used, for editing pie chart slice / Editing the pie chart's slice with the point click, update, and remove events
  • Update Portfolio dialog box / Editing the pie chart's slice with the point click, update, and remove events
  • user interface, top-level chart
    • activating, with chart redraw event / Activating the user interface with the chart redraw event

V

  • verticalAlign property / Legend alignment
  • verticalAlign property, chart label properties / Chart label properties
  • vgchartz
    • URL / Plotting simple pie charts – single series

W

  • web charts
    • about / A short history of web charting
    • HTML image map (server-side technology) / HTML image map (server-side technology)
    • Java Applet (client side) and Servlet (server side) / Java applet (client side) and servlet (server side)
    • Adobe Shockwave Flash (client side) / Adobe Shockwave Flash (client side)
  • web fonts
    • URL / Polishing the chart with fonts and colors
  • window / Window
  • window class / Creating and accessing Ext JS components

X

  • X-axis category data, Highcharts extension / X-axis category data and y-axis numerical values
  • x axes, Highcharts extension
    • numerical values / Numerical values for both x and y axes
  • xAxis.categories array / Directories structure
  • xAxis.labels.formatter property / Accessing the axis data type
  • xAxis/yAxis component / Configuration structure
  • xAxis config / Introducing line charts
  • xAxis properties / Understanding the Highcharts class model
  • xAxis property / Directories structure
  • xField option / Step 3 – constructing a series option by mapping the JsonStore data model
  • x property, chart label properties / Chart label properties
  • xtype option / Creating and accessing Ext JS components
  • Xvfb
    • about / Using Xvfb and web browsers (Unix solution)
    • installing / Installing Xvfb and a web browser
    • server, starting / Starting up the Xvfb server
    • server-side change, applying / Applying server-side change

Y

  • Y-axis category data, Highcharts extension / X-axis category data and y-axis numerical values
  • y axes, Highcharts extension
    • numerical values / Numerical values for both x and y axes
  • yAxis option / Extending to multiple panes
  • yAxis properties / Understanding the Highcharts class model
  • y property, chart label properties / Chart label properties
  • YUI 3 Charts / YUI 3 Charts