Learning Highcharts
3.9 (17 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
183 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Learning Highcharts to your Wishlist.

Add to Wishlist

Learning Highcharts

Design and implement stunning data visualizations for your web applications using Highcharts
3.9 (17 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
183 students enrolled
Created by Packt Publishing
Last updated 12/2015
Curiosity Sale
Current price: $10 Original price: $75 Discount: 87% off
30-Day Money-Back Guarantee
  • 2.5 hours on-demand video
  • 1 Supplemental Resource
  • Full lifetime access
  • Access on mobile and TV
What Will I Learn?
  • Set up charts on the Web with HTML by adding just a few lines of JavaScript
  • Process local or remote datasets for chart displays
  • Reveal more about data using drill-down and filtering methodologies
  • Create your own service to export charts to JPEG, PNG, SVG, or PDF formats
  • Make your chart more interactive by adding annotations on the fly
  • Add master–detail features to big datasets to reveal chart details
  • See how easy it is to e-mail static or dynamic charts
  • Integrate Highcharts with the popular jQuery Mobile framework for cross-platform compatibility
View Curriculum
  • This video course requires basic familiarity with HTML and JavaScript.

Data is all around us, but to understand it all, you need to represent the data so that most people can analyze it easily. Highcharts is one of the most popular JavaScript charting libraries, and has an advanced edge as you can add interactive graphical charts to your websites. Highcharts helps developers represent large sets of data in an interesting and interactive way, establishing itself as one of the industry leaders in JavaScript-based charting tools.

Learning Highcharts will walk you through an exciting journey of creating interactive charts to develop incredible web applications.

This video course is a complete knowledge bank that will teach you practical and advanced techniques with Highcharts. The course starts off with a brief introduction to Highcharts explaining different chart types, chart layouts, options, and styling. We continue by working with different data formats such as CSV, XML, and JSON using AJAX. Then, you'll learn how to export chart images on your own server and finally we look at how to integrate jQuery Mobile with Highcharts.

Learning Highcharts not only introduces you to creating charts, but also guarantees that by the end of this course, you will be building high-quality, insightful visual experiences on the Web.

About The Author

Zsolt Gere is a father, cook, and web designer with strong frontend skills. He loves learning and teaching modern HTML5 and JavaScript techniques such as Highcharts.

He currently works for a small-to-mid size news portal network in Hungary where he is a lead member of the web designer and frontend team.

Who is the target audience?
  • Learning Highcharts is for both frontend and backend developers whose task is to tame big datasets in a way that it is not only a great visual experience but is also easy to read.
Students Who Viewed This Course Also Viewed
Curriculum For This Course
31 Lectures
Highcharts Introduction
3 Lectures 17:32

This video will offer an overview of the course

The Course Overview

This is an introduction to Highcharts and its features.

Getting Started with Highcharts

Let's set up and create our first chart.

Creating Your First Chart
Configuring Highcharts Features and Layouts
3 Lectures 19:03

Learn the common features of a standard chart.

Preview 03:07

By understanding where you need to place code, you can configure the title and subtitle of a chart. We will also look at axis labels, tickmarks, and gridlines, as they are closely linked and they all scale together.

Configuring the Title, Subtitle, and Axes of Your Chart

Here, we'll examine the implementation of data series and configure the legend, layout, and color settings.

Data Series, Legend, Layout, and Color Settings
Configuring Highcharts with More Options
3 Lectures 18:24

This video will demonstrate the various ways that can be used to format tooltips, labels, and strings on a chart.

Preview 05:12

Discover Highcharts' plot lines, plot bands, and zoom features.

Plot Lines, Plot Bands, and the Zoom Feature

Discover useful features such as 3D charts, animation, and multiple series.

3D Charts, Animation, and Multiple Data Series
Chart and Series Types
4 Lectures 19:12

This will introduce you to the basic chart types, namely line, area and scatter charts.

Preview 06:29

This will introduce you to area and area spline charts.

Area Charts and Area Spline Charts

This will introduce you to bar and column charts and their siblings.

Bar and Column Charts

This will explain when and how to use pie charts with Highcharts.

Pie Charts
Working with Data
6 Lectures 30:13

We will explore the three types of formats of the data that can be added to Highcharts as a data source.

Preview 03:45

We need to find a solution so that when someone clicks on a column in a chart or a subcategory, a subset of data will be presented by another chart, which will show up instead of the previous one. We can also go back to the previous screen by clicking on the back button.

Drilling Down and Filtering Data

We will learn how Highcharts can process data from CSV, XML, and JSON data sources.

Using CSV, XML, or JSON

When working with statistics, we often find time-based data, which needs to be handled in Highchart for a custom display. The aim of this video is to review the methods via which these datetime values can be formatted in Highcharts.

Working with Date Formats

Highcharts is client side only and cannot connect to a database. We will create a backend file to connect to the database and produce the right data format for the chart.

Getting Data from a Database

Cross-domain data cannot be handled with the XML or JSON (Ajax) methods that we have studied so far. We need to use a method called JSONP, which allows us to maintain data transaction between different domains.

Getting Data Across Domains (JSONP)
User Interaction
4 Lectures 15:14

Sometimes, having too much data can make a chart look dense and details can be hidden. Zooming in helps bring up the chart details and see a smaller fraction of the graph.

Preview 03:29

We need to find a solution so that a detailed version and a smaller version of the whole chart can be seen in one chart/screen with the smaller one controlling the bigger one with the details.

Creating Master Detail Graphs

Sometimes, we need to add information about a chart on a chart as notes. We will learn how we can dynamically annotate a chart.

Chart Annotation

Highcharts doesn't have default possibilities to control elements in a chart. We will develop a feature that removes an element by clicking on a button on the tooltip.

Dynamic Tooltips
Sharing Charts on the Web
4 Lectures 16:01

We need to be able to export charts in different image formats on our own server.

Preview 06:24

Often, charts need to be shared via e-mails. In our case, chart images can be sent as e-mail attachments.

E-mailing Static Charts

We need to be able to send a chart with a dynamic-part URL.

E-mailing Dynamic Charts

Highcharts' default print function prints only the chart, but sometimes, we need to print more.

Preparing Charts for Printing
Highcharts on Mobile Platforms
4 Lectures 17:28

We want to use Highcharts on mobile devices with a mobile framework technique.

Preview 04:29

We need to create a connection between mobile pages by linking and backlinking them within the jQM's page structure.

The jQuery Mobile Standard Structure

We want to be able to view two charts in a multipage jQuery mobile site.

Integrating Highcharts and jQuery Mobile

We want to enable and test the drilling down module. Point and click and Pinch gesture of our chart with jQuery mobile.

Gestures - Drilling down, Point and Click, and Pinch
About the Instructor
Packt Publishing
3.9 Average rating
7,349 Reviews
52,599 Students
616 Courses
Tech Knowledge in Motion

Packt has been committed to developer learning since 2004. A lot has changed in software since then - but Packt has remained responsive to these changes, continuing to look forward at the trends and tools defining the way we work and live. And how to put them to work.

With an extensive library of content - more than 4000 books and video courses -Packt's mission is to help developers stay relevant in a rapidly changing world. From new web frameworks and programming languages, to cutting edge data analytics, and DevOps, Packt takes software professionals in every field to what's important to them now.

From skills that will help you to develop and future proof your career to immediate solutions to every day tech challenges, Packt is a go-to resource to make you a better, smarter developer.

Packt Udemy courses continue this tradition, bringing you comprehensive yet concise video courses straight from the experts.