O'Reilly logo

Highcharts Cookbook by Nicholas Terwoord

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Putting charts in pages using jQuery Mobile

Our charts have mostly been designed for desktop browsers. While Highcharts works in a large variety of browsers (including mobile browsers on Android and iPhone; see http://www.highcharts.com/documentation/compatibility for more details), we haven't really designed our charts for these devices. This recipe will look at how we can use jQuery Mobile to make pages more mobile-friendly.

How to do it...

To get started, perform the following steps:

  1. Define the base HTML page as follows:
    <!DOCTYPE html> <html> <head> <title>My Page</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css" /> <script ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required