Highcharts

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

Step-1

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

Directory Structure

index.php
includes
-- database.php
JS
-- jquery.min.js
-- highcharts.min.js
CSS
-- 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

database.php

Manage database connection. We have used mysqli extension.

index.php

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

Result
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?

  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

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="">