Drawing Area Chart in html using Flot charts library with tooltip on plothover event

February 2, 2013
By

Flot is a plotting chart library for html, based on JQuery javascript library.

In this article, we will plot an area chart for Income/Expense statement for a couple of quarters. A demo of the graph is available at the link http://wptrafficanalyzer.in/flotcharts/areachart/area.html.


1. Create a new directory namely “areachart”


2. Create a new directory namely  ”js” under the above created directory “areachart”


3. Download the latest version of Flot chart library from here


4. Extract the downloaded file to a local directory


5. Copy the files jquery.js and jquery.flot.js to the directory “areachart/js”


6. Create a new file namely “mychart.js” in the directory “areachart/js” with the given below contents

// JQuery function, when DOM of the page is loaded completely
$(document).ready(function(){
    // Income data
    var income = { label: "Income", data: [ [0,2000],[1,3000],[2,2400],[3,4300],[4,2100],[5,5100] ] };

    // Expense data
    var expense ={ label: "Expense", data: [ [0,1800],[1,1900],[2,2000],[3,3000],[4,1800],[5,2800] ] };

    // Options for the chart
    var options = {
        series: {
            lines: { show: true,fill:true },
            points: { show: true },
        },
        xaxis:{
            ticks:[ [0,"Jan"],[1,"Feb"],[2,"Mar"],[3,"Apr"],[4,"May"],[5,"Jun"]]
        },
        legend:{
            show:true,
            position:"ne"
        },
        grid:{
            hoverable:true
        }
    };

    // Creating and drawing the graph on div element whose
    // id is placeholder
    var plot = $.plot("#placeholder",[ income,expense ],options);

    // Binding plothover event for the graph
    jQuery("#placeholder").bind("plothover", function (event, pos, item) {

        if (item) {
           showTooltip(item);
        }else{
            jQuery('#tooltip').remove();
        }
    }

);

// This function will be executing
// on hovering data points in the graph
function showTooltip(item){

    // Getting all the data series in the graph
    var series = plot.getData();
    var incomeSeries = series[0];
    var expenseSeries= series[1];
    var month=["Jan","Feb","Mar","Apr","May","Jun"];

    // Remove the tooltip box, if exists
    jQuery('#tooltip').remove();
    // Constructing div element for tooltip
    var div = '<div id="tooltip">';
    div += '<div align="center"><b>' + month[item.dataIndex] + '</b></div>';
    div += '<hr />';
    div += '<span style="float:left;width:150px">';
    div += 'Income :' + incomeSeries.data[item.dataIndex][1] + '<br />';
    div += 'Expense:'+ expenseSeries.data[item.dataIndex][1] ;
    div += '</span>' ;
    div += '</div>';

    // Creating and showing tooltip
    jQuery(div).css( {
        position: 'absolute',
        top: item.pageY + 5,
        left: item.pageX + 5,
        border: '1px solid #000',
        padding: '2px',
        'background-color': '#fee',
        opacity: 0.80
        }).appendTo("body");
   }
});

7. Create a file namely area.html in the directory “areachart” with the given below contents

<html>
    <head>
        <!-- Importing JQuery Script -->
        <script type="text/javascript" src="js/jquery.js"></script>

        <!-- Importing Flot Script -->
        <script type="text/javascript" src="js/jquery.flot.js"></script>

        <!-- Importing javascript that plots Income/Expense graph -->
        <script type="text/javascript" src="js/myscript.js"></script>
    </head>
    <body>
        <!-- Graph will be plotted on 'placeholder' div element -->
        <div id="placeholder" style="width:600px;height:300px;" ></div>
    </body>
</html>

8. Open the file “area.html” in a web browser

Screenshot of the chart in a web browser

Figure 1 : Screenshot of the chart in a web browser


9. Download Files


How to hire me?

I am George Mathew, working as software architect and Android app developer at wptrafficanalyzer.in

You can hire me on hourly basis or on project basis for Android applications development.

For hiring me, please mail your requirements to info@wptrafficanalyzer.in.

My other blogs
store4js.blogspot.com


Android Knowledge Quiz

Ready to test your knowledge in Android? Take this quiz :



Tags: , , , , , , ,

Leave a Reply

Your email address will not be published. Required fields are marked *

Be friend at g+

Subscribe for Lastest Updates

FBFPowered by ®Google Feedburner