Animated Feature-rich Chart / Graphic Plugin With jQuery - charts

Animated Feature-rich Chart / Graphic Plugin With jQuery - charts
File Size: 48.5 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

A robust jQuery/HTML5 chart / graph plugin which helps you draw a wide variety of animated, customizable graphics and charts using HTML5 canvas API.

Chart types included:

  • Pie chart
  • Bar chart
  • Radar chart
  • Score Meter
  • Scales chart
  • Exponent chart
  • Scatter Chart
  • Scales chart

How to use it:

1. Load the jQuery charts plugin and other required resources in the html document.

<script src="//code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="dist/utils.js"></script>
<script src="dist/jquery.charts.js"></script>

2. Create an HTML5 canvas element on which you want to draw the charts & graphics.

<canvas id="demo"></canvas>

3. Create custom shapes:

drawCircle(context, x, y, r, s, e, style, type, width):
drawSector(context, x, y, r, s, e, style, type, width):
drawArc(context, x, y, r, s, e, style, width):
drawLine(context, points, style, width)
drawPolygon(context, points, style, type, width)
drawText(context, text, x, y, color, fontSize, fontFamily, align, vertical)
drawRoundRect(context, x, y, w, h, r, style, type, width)

4. Create a line chart on the canvas element.

var canvas_line = $('#demo');

canvas_line.css({
  width: 300,
  height: 200
}).Line({
  data: [[0.21,0.38,0.12,0.44,0.36,0.21,0.25],[1,1,1,1,1,1,1]],
  colors: ["#99d1fd", "#fed27c"],
  isArea: [true,false],  
  background: 'transparent',
  frames: 60,   
  isAnimation: true, 
  animationTime: 5, 
  lineWidth: 1,   
  isDebug: false,  
  events: {                                         
      start: function (options) {                    
      },
      drawing: function (cValue, tValue, options) { 
      },
      end: function (options) {                       
      }
  },
  axis: {                                           
      x:["08-22","08-31","09-07","09-14"],                                        
      y:4,                                           
      fontSize: 10,                                   
      fontFamily: 'Roboto',                 
      color: '#666666',                             
      lineColor:'#EEEEEE',                            
      lineWidth:1,                                    
      precision: 2,                                  
      isPercent: true,                               
      manualY: false,                                 
      minY: 0,                                    
      maxY: 0                                        
  }
}).draw();

5. Create a line + bar chart on the canvas element.

var canvas_mix = $('#canvas_mix');

canvas_mix.css({
  width: 1900,
  height: 200
}).LineMixBar({
  data: {
      line: [[
          50, 60, 50, 60, 10,
          50, 60, 50, 60, 10,
          50, 60, 50, 60, 10,
          50, 60, 50, 60, 10,
          50, 60, 50, 60, 10,
          50, 60, 50, 60, 10
      ]],
      bar: [
          [0.1, 0.2], [0.3, 1], [0.9, 0.6], [0.8, 0.4], [0.8, 0.2],
          [0.1, 0.2], [0.3, 0.7], [0.9, 0.6], [0.8, 0.4], [0.8, 0.2],
          [0.1, 0.2], [0.3, 0.7], [0.9, 0.6], [0.8, 0.4], [0.8, 0.2],
          [0.1, 0.2], [0.3, 0.7], [0.9, 0.6], [0.8, 0.4], [0.8, 0.2],
          [0.1, 0.2], [0.3, 0.7], [0.9, 0.6], [0.8, 0.4], [0.8, 0.2],
          [0.1, 0.2], [0.3, 0.7], [0.9, 0.6], [0.8, 0.4], [0.8, 0.2]
      ],
      floatTitle: [
          'Oct, 10', 'Oct, 11', 'Oct, 12', 'Oct, 13', 'Oct, 14',
          'Oct, 10', 'Oct, 11', 'Oct, 12', 'Oct, 13', 'Oct, 14',
          'Oct, 10', 'Oct, 11', 'Oct, 12', 'Oct, 13', 'Oct, 14',
          'Oct, 10', 'Oct, 11', 'Oct, 12', 'Oct, 13', 'Oct, 14',
          'Oct, 10', 'Oct, 11', 'Oct, 12', 'Oct, 13', 'Oct, 14',
          'Oct, 10', 'Oct, 11', 'Oct, 12', 'Oct, 13', 'Oct, 14'
      ],
      top: [[
          '10000', '200', '30000', '10000', '1000',
          '10000', '200', '30000', '10000', '1000',
          '10000', '200', '30000', '10000', '1000',
          '10000', '200', '30000', '10000', '1000',
          '10000', '200', '30000', '10000', '1000',
          '10000', '200', '30000', '10000', '1000'
      ]]
  },
  legends: {
      bar: ['Index 1', 'Index 2'],
      line: ['Index 3'],
      top: ['Index 4']
  },
  units: {
      bar: [],
      line: [' '],
      top: []
  },
  colors: {
      line: ['#FFAA88'],
      bar: ['#FFEA98', '#C5EAFF', '#98D0FF'],
      top: ['#946A33']
  },  
  background: 'transparent',  
  isDebug: false,     
  axis: {                                            
      x: [
          ['10-10', 'A4'], ['10-11', 'A4'], ['10-12', 'A4'], ['10-13', 'A4'], ['10-14', 'A4'],
          ['10-10', 'A4'], ['10-11', 'A4'], ['10-12', 'A4'], ['10-13', 'A4'], ['10-14', 'A4'],
          ['10-10', 'A4'], ['10-11', 'A4'], ['10-12', 'A4'], ['10-13', 'A4'], ['10-14', 'A4'],
          ['10-10', 'A4'], ['10-11', 'A4'], ['10-12', 'A4'], ['10-13', 'A4'], ['10-14', 'A4'],
          ['10-10', 'A4'], ['10-11', 'A4'], ['10-12', 'A4'], ['10-13', 'A4'], ['10-14', 'A4'],
          ['10-10', 'A4'], ['10-11', 'A4'], ['10-12', 'A4'], ['10-13', 'A4'], ['10-14', 'A4']
      ],                                       
      fontSize: 12,                                   
      fontFamily: 'Microsoft YaHei',                 
      color: '#666666',                          
      lineColor: '#EEEEEE',                         
      lineWidth: 1,                                
      textMarginTopX: 5,                          
      activeLine: {
          width: 1,
          color: '#999999'
      }
  },
  bar: {
      gap: 2,
      max: 1,
      min: 0,
      default:'',
      defaultColor:'#CCCCCC',
      width: undefined,
      type: 0      // 0 or 1
  },
  line: {
      width: 2,
      dashedLength: 5,
      areaType: 1,          // 0 / 1 / 2
      max: 100,
      min: 0,
      default:'',
      point: {
          radius: 3,
          width: 1,
          fill: 'white'
      }
  },
  top: {
      fontSize: 12,
      fontFamily: 'Roboto',
      color: '#666666', 
      textMarginBottom: 5
  }
}).draw();

6. Create a score meter on the canvas element.

var canvas_meter = $('#demo');

canvas_meter.css({
    width: 250,
    height: 250
}).Meter({
    target: 80,                
    min: 0,                    
    max: 100,                  
    background: 'transparent', 
    frames: 60,                 
    startAngle: 0.8,           
    endAngle: 2.2,             
    isAnimation: true,          
    animationTime: 3,          
    isDebug: false,             
    events: {                                 
        start: function (options) {           
        },
        drawing: function (cValue, tValue, options) {  
        },
        end: function (options) {     
        }
    },
    colors: ['#ff6131', '#ffad1f', '#4ebf42', '#317fff'],
    title: {                   
        text: 'Score',           
        fontSize: 18,               
        fontFamily: 'Roboto', 
        color: '#333333'            
    },
    subTitle: {
        text: 'Custom Text',   
        fontSize: 14,          
        fontFamily: 'Roboto', 
        color: '#333333'            
    },
    arc: {
        type: 0,  // 0 or 1
        defaultColor: 'rgba(51, 51, 51,0.2)',
        targetColor: '#FFFFFF',
        width: 1,
        pointRadius: 6
    },
    tick: {
        type: 0,   // 0 or 1
        length: 10,
        width: 1,
        defaultColor0: '#3c3c3c',
        defaultColor1: '#3c3c3c',
        targetColor: '#3c3c3c'
    },
    tickText: {
        fontSize: 10,               
        color: '#3c3c3c',  
        fontFamily: 'Roboto' 
    },
    scoreText: {
        fontSize: 50,
        fontFamily: 'Roboto',
        type: 0,   // 0 or 1
        color: '#333333',
        precision: 2
    }
}).draw();

7. Create a pie chart on the canvas element.

var canvas_pie = $('#canvas_pie');

canvas_pie.css({
    width: 300,
    height: 300
}).Pie({
    data: [30, 30, 40],
    colors: ['#ff6131', '#ffad1f', '#4ebf42'],  
    spacing: 30,        
    background: 'transparent', 
    frames: 60,        
    startAngle: 1,     
    isAnimation: true,  
    animationTime: 3,   
    events: {                         
        start: function (options) {            
        },
        drawing: function (cValue, tValue, options) {   
        },
        end: function (options) {              
        }
    },
    proportion: {                       
        isShow: true,                  
        fontSize: 10,                    
        fontFamily: 'Roboto',
        textColor: '#333333',
        lineColor: '#333333',
        lineWidth: 1,            
        lineLength: 20
    },
    title: {                      
        text: 'Title 1',              
        fontSize: 20,                  
        fontFamily: 'Roboto',  
        color: '#333333'              
    },
    subTitle: {
        text: 'Title 2',            
        fontSize: 14,                
        fontFamily: 'Roboto', 
        color: '#333333'
    }
}).draw();

8. Create an exponent chart on the canvas element.

var canvas_exponent = $('#demo');

canvas_exponent.css({
  width: 300,
  height: 200
}).Exponent({
  target: 3,
  data: [1.8142, 1.311, 0.8079],
  colors: ["#ffd076", "#43e1a7", "#fee0a6"],
  background: 'transparent', 
  frames: 60,        
  isAnimation: true,
  animationTime: 5,  
  lineWidth: 1,
  isDebug: false,  
  isPercent: true, 
  events: {                                       
      start: function (options) {                    
      },
      drawing: function (cValue, tValue, options) {  
      },
      end: function (options) {                       
      }
  },
  axis: {                                            
      x: ['', '1 Year', '2 Years', '3 Years'],  
      y: 4,                                        
      fontSize: 10,                              
      fontFamily: 'Roboto',                  
      color: '#666666',                              
      lineColor: '#EEEEEE',                           
      lineWidth: 1,                                   
      manualY: false,                               
      minY: 0,                                      
      maxY: 10,                                     
      isShowMinY: true
  }
}).draw();

9. Create a Scales Chart on the canvas element.

var canvas_scale = $('#canvas_scale');

canvas_scale.css({
    width: 300,
    height: 120
}).Scale({
    type: 1, // 0 or 1
    min: 0,
    max: 100,
    target: 100,
    background: 'transparent', 
    frames: 60,    
    isAnimation: true,
    animationTime: 5,
    isDebug: false,   
    events: {                                   
        start: function (options) {                   
        },
        drawing: function (cValue, tValue, options) { 
        },
        end: function (options) {                     
        }
    },
    tick: {
        colorType: 0, // 0 or 1
        valueType: 0, // 0 or 1
        width: 1, 
        defaultColor: '#CCCCCC',
        targetColor: '#ffc733', 
        tickCount: 100,
        textColor: '#999999',  
        fontSize: 12,  
        fontFamily: 'Roboto'
    },
    cursor: {
        textColor: 'white',           
        fontSize: 10,          
        fontFamily: 'Roboto',
        background: 'black',           
        triangleColor: 'black',
        textStart: '',             
        textEnd: '' 
    },
    colors: ['#3bb268', '#48efb2', '#ffee30', '#ffa530', '#ff6131']
}).draw();

10. Create a Scatter Chart on the canvas element.

var canvas_scatter = $('#demo');

canvas_scatter.css({
  width: 300,
  height: 300
}).Scatter({
  alpha: 0.3,
  beta: 1, 
  background: 'transparent', 
  frames: 60, 
  isAnimation: true,  
  animationTime: 5,
  lineWidth: 1,        
  isDebug: false,  
  events: {                               
      start: function (options) {     
      },
      drawing: function (type,cValue, tValue, options) {  
      },
      end: function (options) {           
      }
  },
  axis: {                                         
      color: '#666666',
      width: 1
  },
  point: {               
      color: '#666666',  
      radius: 1,        
      count: 60,         
      rang: 20
  },
  line: {                
      base: {               
          width: 1,          
          color: 'orange'     
      },
      alpha: {
          width: 1,        
          color: 'red'     
      },
      beta: {
          width: 1,        
          color: 'green'     
      }
  },
  valueText: {                    
      type: 2,                     
      fontSize: 12,                  
      fontFamily: 'Roboto', 
      color: '#333333'              
  }
}).draw();

Change log:

2016-12-08

  • bugfixes

2016-12-01

  • improvement.

This awesome jQuery plugin is developed by ShujiaWu. For more Advanced Usages, please check the demo page or visit the official website.