Created: 2012-03-23 10:43
Updated: 2014-03-12 03:15


Chart for Percentage!


Drawn by Tetris Chart Plugin

This plugin is based on jQuery and HighCharts. Make sure you include them in your web page before you draw your tetris chart.

###How to use? step1: add <div id="tetris_chart"></div> in your HTML file.

step2: put below code in your web page, it will render the tetris after your page loaded successfully.

<script type="text/javascript">

###More Configurations

Default configs are as below:

defaults = {
  xOff: 15,
  yOff: 25,
  chartWidth: 400,
  chartHeight: 300,
  tetrisBlockSize: 15,
  strokeWidth: 1,
  strokeColor: 'white',
  text_off_weight: 25,
  series: {
    data1: {
      percent: 18,
      above_text: '18%',
      below_text: 'Low',
      color: "gray"
    data2: {
      percent: 30,
      above_text: '30%',
      below_text: 'Middle',
      color: "orange"
    data3: {
      percent: 52,
      above_text: '18%',
      below_text: 'High',
      color: "red"

You can set any of these items, then wrap up an options params for tetrisChart(), so you should do something like this: $("#tetris_chart").tetrisChart(options);

Let me know if you find any problem on this plugin, enjoy it!

Cookies help us deliver our services. By using our services, you agree to our use of cookies Learn more