ZingChart jQuery Zingify Demo

A quick example of how to use the Zingify tool for turning HTML tables into charts.

by ZingChart Library

HTML

<script src="http://rawgit.com/zingchart/ZingChart-jQuery/master/zingify/zingify.jquery.min.js"></script>
<script src="http://rawgit.com/zingchart/ZingChart-jQuery/master/zingchart.jquery.min.js"></script>
<script src="http://cdn.zingchart.com/zingchart.min.js"></script>
<h3>Tables to Charts</h3>
<table id="ex_1">
    <caption>Sales</caption>
    <thead>
        <tr>
            <th>month</th>
            <th>apples</th>
            <th>oranges</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Jan</td>
            <td>42</td>
            <td>48</td>
        </tr>
        <tr>
            <td>Feb</td>
            <td>37</td>
            <td>52</td>
        </tr>
        <tr>
            <td>Mar</td>
            <td>48</td>
            <td>59</td>
        </tr>
        <tr>
            <td>April</td>
            <td>36</td>
            <td>61</td>
        </tr>
        <tr>
            <td>May</td>
            <td>35</td>
            <td>38</td>
        </tr>
    </tbody>
</table>
<h4>Using .zingify, we can take the above table and turn it into the chart below.</h4>
<div id="myChart"></div>
<a id="docs" target="_blank" href='http://www.github.com/PINT/ZingChart-jQuery'>Check out our documentation on GitHub!</a>

CSS

body {
    font-family:Helvetica;
    padding:20px;
    text-align:center;
}
#ex_1 {
    width:100%;
}
caption {
    background-color:#E0E0E0;
}
thead {
    background-color:#F0F0F0;
}
#myChart {
    width:100%;
    height:300px;
    margin-bottom:20px;
}
a {
    color:#00BAF0;
    text-decoration:none;
    font-size:12px;
}
#docs {
    display:block;
    margin-top:20px;
    background-color:#00BAF0;
    color:#FFF;
    font-size:18px;
    padding:10px 20px;
    text-decoration:none;
}

JavaScript

// Make your chart
$('#ex_1').zingify({
    target: 'myChart',
    data: {
        "type": "line"
    }
});