• Edit
  • Download
    • <!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>
  <script nonce="undefined" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
  <script nonce="undefined" src="//cdn.zingchart.com/zingchart.jquery.min.js "></script>
  <script nonce="undefined" src="//rawgit.com/zingchart/ZingChart-jQuery/master/zingify/zingify.jquery.js"></script>

  <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
  <style>
    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;
    }
  </style>
</head>

<body>
  <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='https://github.com/zingchart/ZingChart-jQuery'>Check out our documentation on GitHub!</a>
  <script>
    ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; // Make your chart
    $('#ex_1').zingify({
      target: 'myChart',
      data: {
        "type": "line"
      }
    });
  </script>
</body>

</html>
    <!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
  <script src="//cdn.zingchart.com/zingchart.jquery.min.js "></script>
  <script src="//rawgit.com/zingchart/ZingChart-jQuery/master/zingify/zingify.jquery.js"></script>

  <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
</head>

<body>
  <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='https://github.com/zingchart/ZingChart-jQuery'>Check out our documentation on GitHub!</a>
</body>

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