Simple and attractive javascript plotting chart

if we talking about the data representation, like the total sale or total visits on day-by-day etc. then it’s a great idea to showing the data into the plotting chart. When I have this idea to represent the data in the 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 the simplest way, which 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 an array format. That could be raw data or the object with properties. After putting the data format, set the 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 a label:

$(document).ready(function() {
    $.plot('div.graph',
        [{ data: [ [0, 60], [1, 100], [2, 20], [3, 200], [4, 150], [5, 100], [6, 200] ]}],
        ....
    );
});

In my example I also mention labels. 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 makes it more clear and attractive, with to enable the ‘hoverable or clickable’ as you wish. Hoverable working with hover event and clickable working with click event. I have enabled 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.

function($) {
    $(document).ready(function(){
        $.plot('div.graph',
            [{ data: [ [0, 60], [1, 100], [2, 20], [3, 200], [4, 150], [5, 100], [6, 200] ], label: 'Amount Show' }], {
            series:{
                lines: {show: true},
                points: {show: true}
            },
            grid : {hoverable: true, backgroundColor: {colors: ["#ffffff", "#efefef"]}}
        });
    });
})(jQuery);

Style Section

#container{
    width: 600px;
    height: 200px;
    margin: 0 auto;
}
.graph{
    width: 600px;
    height: 200px;
}

HTML section

<div id="container">
    <div class="graph"></div>
</div>

Posted by Jogesh Sharma

Jogesh Sharma is a web developer and blogger who loves all the things design and the technology, He love all the things having to do with PHP, WordPress, Joomla, Magento, Durpal, Codeigniter, jQuery, HTML5 etc. He is the author of this blog.