Recent news

Sunday, 5 June 2016

TableChart jQuery Plugin to Convert HTML tables Into Chart Using jqPlot




TableChart is a jQuery chart plugin which will help to create a very cool and beautiful chart using html table content using jqPlot plugin.

How To Use

1. Add the below library reference

<script src="path-to-jquery/jquery.min.js" type="text/javascript"></script>
<script src="path-to-jqplot/jquery.jqplot.min.js" type="text/javascript"></script>
<script src="path-to-jqplot/plugins/jqplot.categoryAxisRenderer.js" type="text/javascript"></script>
<script src="path-to-jqplot/plugins/jqplot.dateAxisRenderer.js" type="text/javascript"></script>
<script src="path-to-tablechart/jquery.tablechart.js" type="text/javascript"></script>
<link type="style/css" rel="stylesheet" href="path-to-jqplot/jquery.jqplot.min.css"/>


2. Now add the below html tag.

<table>
  <thead>
    <tr>
     <th>x-axis label</th>
     <th>Series 1 label</th>
     <th>Series 2 label</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>X value</th>
      <td>Series 1 (y) value</td>
      <td>Series 2 (y) value</td>
    </tr>
  </tbody>
</table>


3. Add the below code to perform operation

  $('table-selector').tablechart(options);



Pranav Singh Author: Pranav Singh

Hello, I am Author of this blog. The main purpose of this blog is to provide all the jQuery plugins which is helpful in designing and developing a web application in a single location from the web.

Previous
Next Post »

E-mail Newsletter

Sign up now to receive breaking news and to hear what's new with us.

Recent Articles