// Make your chart $('#ex_1').zingify({ target: 'myChart', data: { "type": "line" } });
<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>
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; }