Thursday 8 August 2013

Jquery - Graph Drawing



The above attractive graph is an example of an below code.

  In HTML we can draw a attractive Graph with combination of css and Jquery.You have to just pass the parameters that have to plot the graph at which positions in an graph.Data must be in array using Jquery.

     To Create a attractive plot with in a short time. Create a placeholder, make sure it has dimensions (so Flot knows at what size to draw the plot), then call the plot function with your data.The axes are automatically scaled.

To Plot the Graph Using following JQuery Plugins and CSS in your application. Please download the Plugins from the following links.

Click Here to Download CSS
Click Here to Download JQuery
Click Here to Download JQuery-Plotting

JQuery :

<script type="text/javascript">

    $(function()
    {
        var d1 = [];
        for (var i = 0; i < 20; i += .4) {
            d1.push([i, (Math.tan(i)+Math.sin(i))]);
        }

        var d2 = [[0, 120], [4, -120], [8, 50], [9, -50]];
        // A null signifies separate line segments

        var d3 = [[0, 100], [7, 50], null, [15, -50], [20, -100]];

        var d4=[[0,50],[1,-120],[3,15],[5,25],[8,30],[20,100]]
       
        $.plot("#placeholder", [ d1, d2, d3,d4 ]);
      
    });

    </script>



HTML CODE:
<div id="content">
<div class="demo-container">
<div class="demo-placeholder" id="placeholder" width="600px">
</div>
</div>
</div>

CSS :
#content {
    width: 600px;
    margin: 0 auto;
    padding: 10px;
}

#footer {
    margin-top: 25px;
    margin-bottom: 10px;
    text-align: center;
    font-size: 12px;
    color: #999;
}

.demo-container {
    box-sizing: border-box;
    width: 600px;
    height: 450px;
    padding: 20px 15px 15px 15px;
    margin: 15px auto 30px auto;
    border: 1px solid #ddd;
    background: #fff;
    background: linear-gradient(#f6f6f6 0, #fff 50px);
    background: -o-linear-gradient(#f6f6f6 0, #fff 50px);
    background: -ms-linear-gradient(#f6f6f6 0, #fff 50px);
    background: -moz-linear-gradient(#f6f6f6 0, #fff 50px);
    background: -webkit-linear-gradient(#f6f6f6 0, #fff 50px);
    box-shadow: 0 3px 10px rgba(0,0,0,0.15);
    -o-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    -ms-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    -moz-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    -webkit-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}

.demo-placeholder {
    width: 100%;
    height: 100%;
    font-size: 14px;
    line-height: 1.2em;
}



     From the above sample code you can create a attractive graph using Jquery and css. I hope from this article you have some idea on graph using Jquery and css.