is one of the best chart solution to create web based attractive chart. Highcharts has wide range of charts and options to customize. In this tutorial we will show step by step how to create realtime chart using highcharts. We will get data from database and update charts accordingly. Its very easy and short steps. We will use Highcharts, PHP, MYSQL database, jQuery in this tutorial.

How to create dynamic charts using mysql and highcharts


Lets start by downloading highcharts JS from official site. It also offers you to build customized JavaScript as per your requirement.

Directory Structure

-- database.php
-- jquery.min.js
-- highcharts.min.js
-- style.css

Database structure

We are creating chart of companies monthly sales. For which, data of purchase has been stored date wise in table tbl_account.

Insert data Queries


Manage database connection. We have used mysqli extension.


Includes html and chart initialization and fetching data from mysql and updating chart. We have used column chart you can change it by changing type parameter. Refer (http://www.highcharts.com/demo) for more charts.
categories: – convert php array to javaScript array and updating xAxis

data: – convert php array to javaScript array and updating yAxis

Full Source

Create dynamic charts using mysql and highcharts result - sgeek

  1. Dear!

    I really enjoyed your post and am wanting to learn to work with this type of Graphical javascritp. Can I create a local database on my in MYSQL or need a server?

  2. Renato Lazaro Chirefa

    I tried your example, but the screen only returns blank without infirm information. I would like to help me in some way via remote access TeamViewer?

    • Hi,
      I got the same result as Renato. Any help ?
      After I used diff. highcharts.js and jquery.min.js I got a black rectangle at the top of my browser window.
      I used diff browser, Opera and Firefox . Which is the right version for highcharts.js and jquery.min.js ?
      Best regard Fritz

  3. Say, does the array “day” and “amount”, “know” what are they are called for, I mean, if I change “day” for “year”, does it only display the year? I´m trying to apply in a MVC way for Codeigniter, is kinda fuzzy since I´m no expert. Would you mind doing a tutorial for Codeigniter, or maybe is asking too much :P.

  4. @Albert, Yes you can change “day” to “year” but you also need to change variable name in JavaScript as well. I’ve use this data only for demo purpose you can change it as per your requirement. Will post tutorial in CoreIgniter in short time.

  5. This article looks like what I need. I am learning and want to get Dates and temperatures from MYSQL and send it to Highcharts.
    I will spend a week or two and see if I can do it.
    Thanks for posting this tutorial

  6. Thank you for the nice tutorial, I’m trying to create the pie chart following the same instruction. it worked but the tooltip doesn’t appear. Can you help please.?

  7. Hello Sir,

    I blog quite often and I genuinely thank you.
    This article has truly peaked my interest. I’m going to take a note
    of your site and keep checking for new details about once per week.

    I subscribed to your RSS feed too.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">