jqplot


jQuery

You can have so many plugin for JQuery.
jqplot help you to make a chart quickly.

jqplot
http://www.jqplot.com/download/

as you see, you can make chart simply with example source & docs. chart

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
    <script type="text/ecmascript" src="/jquery/jquery-1.12.4.min.js"></script> 
    <script type="text/ecmascript" src="/jquery/jqplot/jquery.jqplot.min.js"></script>
    <script type="text/ecmascript" src="/jquery/jqplot/excanvas.js"></script>
    <!-- barchar graph -->
    <script class="include" language="javascript" type="text/javascript" src="/jquery/jqplot/plugins/jqplot.barRenderer.js"></script>
    <script class="include" language="javascript" type="text/javascript" src="/jquery/jqplot/plugins/jqplot.categoryAxisRenderer.js"></script>
   	<script class="include" type="text/javascript" src="/jquery/jqplot/plugins/jqplot.bubbleRenderer.js"></script>
    <link rel="stylesheet" type="text/css" href="/jquery/jqplot/jquery.jqplot.min.css" />
    
      
    <script type="text/javascript"> 
        $(function () {
        	$(document).ready(function(){
        	     
        	    var arr = [[11, 123, 1236, "Acura"], [45, 92, 1067, "Alfa Romeo"], 
        	    [24, 104, 1176, "AM General"], [50, 23, 610, "Aston Martin Lagonda"], 
        	    [18, 17, 539, "Audi"], [7, 89, 864, "BMW"], [2, 13, 1026, "Bugatti"]];
        	     
        	    plot1 = $.jqplot('chartLayer',[arr],{
        	        title: 'Transparent Bubbles',
        	        seriesDefaults:{
        	            renderer: $.jqplot.BubbleRenderer,
        	            rendererOptions: {
        	                bubbleAlpha: 0.6,
        	                highlightAlpha: 0.8
        	            },
        	            shadow: true,
        	            shadowAlpha: 0.05
        	        }
        	    });    
        	});
        });
   	 </script>
</head>
<body>
	<div id="chartLayer"></div>
</body>
</html>





© 2017. by isme2n

Powered by aiden