Tryst with JQuery Graph

by FrictionlessPulley

HTML

<script src="http://flot.googlecode.com/svn/trunk/jquery.flot.js"></script>
<script src="http://flot.googlecode.com/svn/trunk/jquery.flot.pie.js"></script>
<h1>Chart</h1>
<div id="default" class="graph"></div>

CSS

<style type="text/css">
* {font-family: sans-serif;}
body{padding: 0 1em 1em 1em;}
div.graph{width: 400px;height: 300px;float: left;border: 1px dashed gainsboro;}
label{display: block;margin-left: 400px;padding-left: 1em;}
h2{padding-top: 1em;margin-bottom: 0;clear: both;color: #ccc;}
code{display: block;background-color: #eee;border: 1px dashed #999;padding: 0.5em;margin: 0.5em;color: #666;font-size: 10pt;}

        

        code b

        {

            color: black;

        }

        

        ul

        {

            font-size: 10pt;

        }

        

        ul li

        {

            margin-bottom: 0.5em;

        }

        

        ul.options li

        {

            list-style: none;

            margin-bottom: 1em;

        }

        

        ul li i

        {

            color: #999;

        }

JavaScript

$(function() {

    var data=[{label : "Answer 1" , data : 10},
              {label : "Answer 2" , data : 20},
              {label : "Answer 3" , data : 30},
              {label : "Answer 4" , data : 40},
              {label : "Answer 5" , data : 50},
              {label : "Answer 6" , data : 60}];
    
    var series ={
        pie:{
            show:true
        }
    };
    var chartProperties ={ series:series};
    $.plot($('#default'),data,chartProperties);
});