Create graph with canvasjs and codeignitor

If we represent our data graphically then it explains their definition very well. Today we will discuss that how we can make a graph with canvasjs (Html 5) and codeignitor. In web world, there are hundreds of graph library but canvasjs is modern and lightweight JavaScript library for creating dynamic graph. I hope you will enjoy this tutorial and if you find some mistake then you can post in the comment section.

Before you start to learn all this things, you should have knowledge of the following:

  • Knowledge of Php & Codeignitor
  • Knowledge of JavaScript or Jquery
  • Knowledge of MySql
  • Knowledge of Basic JSON Parsing
  • Last but not the least, Knowledge of HTML and CSS

If you do not have knowledge of above things then please try to grab the basic knowledge of these things. There are plenty of tutorials for learning html, css, JS, Codeignitor etc. In this tutorial, I have assumed that you have basic knowledge of above given things.

In this tutorial I will show you a real world example, Suppose we have number of students in class and every student have different marks in different subjects like English, hindi, punjabi and math. Now we want to show marks of different subject as per student. I am not going to create any backend where you will add student and their marks. But I will create demo data in database so that we can cover this easily.

 

  1. Create some demo data

In “phpmyadmin”, Create “student_marks” database and also create “student_marks” table with following fields.

user_id name eng hindi math pun Add_date
1 suraj 60 70 80 75 10/01/2016
2 sunny 70 80 85 80 10/01/2016
3 suraj 80 90 90 85 08/01/2016
4 suraj 85 90 99 98 07/01/2016

 

I have assumed that you have understand all the above things. If you have any query regarding to this then feel free to contact us.

Here is the screenshot of our example that we will draw with the help of codeignitor, jqueryajax and canvasJs chart library.

dynamic-graph

 

  1. Create a file “getmarks.php” in your controller folder and add the following code in it.

     
  2. Now Create a file “Getmarks_Model.php” in “model” folder and add the following code in it.

     
  3. Now Create a file “getmarks.php” in the “view” folder and add the following code in it.

     
  4. Create the “assets” folder on the root folder and and create two folders “bootstrap” and “js”.
    1. Download “Bootstrap” from this link and add the in the bootstrap folder.
    2. Download “Jquery” from this link and add in the “js” folder that you recently created.
    3. Download “canvasjs” library from this link and add in the “js”
    4. Create a file “custom.js” and add in the “js” folder with the following code.

       

Now you have all things to making a graph with dynamic data. Locate you app in the localhost and you will see the following screen.

screen-1_03

Click on the show graph button and you will see the graph with data.

dynamic-graph

You can change the number of option as per your requirments in the “canvasJs Library”.