Home / Ajax / Populate jQuery charts using JSON data

Populate jQuery charts using JSON data

If you are on a project and want to impress your client by implementing some beautiful charts you really need to look into morris.js and raphael.js. These two libraries generate beautiful charts and support full customization.

In this tutorial I’m going to use only a few chart samples to demonstrate. You can download the full version from Morris and Raphael.

Lets get started with the markup

In this mark up I’ve simply assigned places for the charts to be rendered by jQuery. Each chart is assigned an id so as to make the job easier, you can also use class by defining same name to each of them if you are planning to trigger an event on all charts in parallel. Assuming that you are clear with the mark up let us proceed with the CSS.

NOTE The CSS used in this tutorial is no where related to the styles of the chart. For each chart styles are defined in the jQuery script itself. The styles we defined here are only for the dimensions of the chart’s DIV. You can play with the sizes to best match your requirement.

Let us now get into the heart of this system.

THE JSON

There are two ways you can get JSON data.

1. PHP : Pull data from database and store store them in array, then encode the array to json using json_encode()
2. .JSON : Store the values in JSON and fetch it using $.getJSON()

In this demonstration I used method #2. Following is the sample JSON for bar chart. You can locate the json in (assets/js/data.json)

Now that we have our json string ready to be populated to charts as values. To achieve this we got to write a javascript as follows

Object.keys(json.barstack).map(function(key) {return json.barstack[key]}) is the important key here. What this code does is get the keys for data.bar with Object.keys() from the data.json. Then we use map to return an array. Each iteration of map() will go through each key obtained by Object.keys. In this code, it returns the object in data.bar assigned to that key.

Similarly perform operation by calling the Morris.functionName() and pass id of each div to element attribute. Assign colors and appropriate labels as one of the attributes for Morris.functionName(). I hope you find this tutorial helpful.

Download   Preview

About Ashik

I am a Full Stack Developer and love to work on APIs and Apps. Hardcore lover of Ionic and Laravel <3

Check Also

Private chatroom using socket.io, NodeJS and MySQL

As I promised to write a tutorial on Private chatroom with MySQL DB in the …

  • Mohan

    Nice tutorial… I love the JSON concept.

  • teddy

    Thanks for tutorial, But how if data function pass from mysql ?
    Thx.

    • You can fetch data my mysql in many different ways. In this tutorial we have see JSON data. Specify the format you want from mysql i’ll try to answer your question.

  • mikhail

    hello, i cant download example. can you help me?

  • Chris

    Hi, i get “TypeError: $(…) is not a function” – the graphs are displayed but also your demo is throwing this error in firebug

  • Hisham

    Hello Ashik,

    Could you please give me an example for method #1 using PHP and MySQL ..

    Thanks A Lot 🙂
    Best Regards,
    Hisham

    • Quite easy. Fetch the records and store it as an array say,

      $query = mysql_query(“SELECT * from data”);
      $results = mysql_fetch_array($query);
      echo json_encode($results); //This line will return JSON directly from PHP file

  • Wei Liat

    Thank you for the tutorial. I would like to use method 1 , could you advise me on how to do this?

  • Paul Kitatta

    Hi Ashik, how can we contact you privately for more consultation?

Do you wan't to get notified?

I will not spam your inbox. I will only send email whenever I publish a new article or to share information about technology

You have Successfully Subscribed!