Simple and attractive javascript plotting chart

by in , , on

if we talking about the data representation, like total sale or total visits on day-by-day etc. then it’s a great idea to showing the data into plotting chart. When i have this idea to represent the data in plotting chart then i got a JavaScript plug-in on flotcharts.org, one to the simplest and attractive javascript plotting chart plug-in. Below you get that how to start with this plugin in a simplest way, means just the starting of the plotting chart plug-in.

First make your document ready like usually we are doing before running any jquery stuff. After that just call the plotting chart plugin’s function ‘$.plot()’ and start to input the data that you want to display on your chart. First you have to mention, in which element you want to show your chart. As you see in the HTML section, i have created a div with the class name ‘graph’. And in the jquery section just call the call or whatever you element you want.

Now just put your data into the plot function, the data that you are giving into the plugin should be in array format. That could be a raw data or the object with properties. After putting the data format, set label property if you want. If you want to show the label on the chart then you have to give the label with its values, otherwise it is not mandatory. Here is the code without label:

 

In my example i also mention label. Then just make true the line and the points also, that we want on our plotting chart. Now come to the grid section. This section is also not mandatory. But if you want to make a hover effect on the point of lines then the grid section make it more clear and attractive, with to enable the ‘hoveralbe or clickable’ as you wish. Hoverable working with hover event and clickable working with click event. I have enable the hoverable, And the second ‘backgroundColor’ property is just for showing the gradient effect on background, which is also not mandatory, but if you want then you can, because by default the background of plotting chart section is white. Now just run your code and the plotting chart complete.

Make sure to include the flot.js plugin file and the jquery.js file. And you are welcome through the comment section for any feedback or comment.

 

Style Section:

 

HTML section: