Zingify is a method that is used with the jQuery ZingChart wrapper. The method converts HTML tables into charts! Zingify saves a lot of time as we do not have to manually set up the JSON and data.
Here is an example of how Zingify would be used.
First let's start out with a basic ZingChart div element:
Then let's say we have a table of structure:
Which when rendered looks like:
Notice how we targeted the id of the chart (#example1) and rendered the chart to the div id (myChart).
Now your HTML table is converted to a chart that looks like this:
Let's take a deeper look at what is going on.
The first <th> in <thead> corresponds to the data that will be represented on the x-axis, so we'll use that value for the x-axis label.
The remaining <td>s are the labels for each data series the chart will support so we'll create each series array, and push each series object onto with with text.
The title is set from the <caption> element if present.
Congratulations! You know how to use Zingify!