• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.   <script nonce="undefined" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
    8.   <script nonce="undefined" src="//cdn.zingchart.com/zingchart.jquery.min.js "></script>
    9.   <script nonce="undefined" src="//rawgit.com/zingchart/ZingChart-jQuery/master/zingify/zingify.jquery.js"></script>
    10.  
    11.   <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
    12.   <style>
    13.     body {
    14.       font-family: Helvetica;
    15.       padding: 20px;
    16.       text-align: center;
    17.     }
    18.  
    19.     #ex_1 {
    20.       width: 100%;
    21.     }
    22.  
    23.     caption {
    24.       background-color: #E0E0E0;
    25.     }
    26.  
    27.     thead {
    28.       background-color: #F0F0F0;
    29.     }
    30.  
    31.     #myChart {
    32.       width: 100%;
    33.       height: 300px;
    34.       margin-bottom: 20px;
    35.     }
    36.  
    37.     a {
    38.       color: #00BAF0;
    39.       text-decoration: none;
    40.       font-size: 12px;
    41.     }
    42.  
    43.     #docs {
    44.       display: block;
    45.       margin-top: 20px;
    46.       background-color: #00BAF0;
    47.       color: #FFF;
    48.       font-size: 18px;
    49.       padding: 10px 20px;
    50.       text-decoration: none;
    51.     }
    52.   </style>
    53. </head>
    54.  
    55. <body>
    56.   <h3>Tables to Charts</h3>
    57.   <table id="ex_1">
    58.     <caption>Sales</caption>
    59.     <thead>
    60.       <tr>
    61.         <th>month</th>
    62.         <th>apples</th>
    63.         <th>oranges</th>
    64.       </tr>
    65.     </thead>
    66.     <tbody>
    67.       <tr>
    68.         <td>Jan</td>
    69.         <td>42</td>
    70.         <td>48</td>
    71.       </tr>
    72.       <tr>
    73.         <td>Feb</td>
    74.         <td>37</td>
    75.         <td>52</td>
    76.       </tr>
    77.       <tr>
    78.         <td>Mar</td>
    79.         <td>48</td>
    80.         <td>59</td>
    81.       </tr>
    82.       <tr>
    83.         <td>April</td>
    84.         <td>36</td>
    85.         <td>61</td>
    86.       </tr>
    87.       <tr>
    88.         <td>May</td>
    89.         <td>35</td>
    90.         <td>38</td>
    91.       </tr>
    92.     </tbody>
    93.   </table>
    94.   <h4>Using .zingify, we can take the above table and turn it into the chart below.</h4>
    95.   <div id="myChart"></div>
    96.   <a id="docs" target="_blank" href='https://github.com/zingchart/ZingChart-jQuery'>Check out our documentation on GitHub!</a>
    97.   <script>
    98.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; // Make your chart
    99.     $('#ex_1').zingify({
    100.       target: 'myChart',
    101.       data: {
    102.         "type": "line"
    103.       }
    104.     });
    105.   </script>
    106. </body>
    107.  
    108. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
    8.   <script src="//cdn.zingchart.com/zingchart.jquery.min.js "></script>
    9.   <script src="//rawgit.com/zingchart/ZingChart-jQuery/master/zingify/zingify.jquery.js"></script>
    10.  
    11.   <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    12. </head>
    13.  
    14. <body>
    15.   <h3>Tables to Charts</h3>
    16.   <table id="ex_1">
    17.     <caption>Sales</caption>
    18.     <thead>
    19.       <tr>
    20.         <th>month</th>
    21.         <th>apples</th>
    22.         <th>oranges</th>
    23.       </tr>
    24.     </thead>
    25.     <tbody>
    26.       <tr>
    27.         <td>Jan</td>
    28.         <td>42</td>
    29.         <td>48</td>
    30.       </tr>
    31.       <tr>
    32.         <td>Feb</td>
    33.         <td>37</td>
    34.         <td>52</td>
    35.       </tr>
    36.       <tr>
    37.         <td>Mar</td>
    38.         <td>48</td>
    39.         <td>59</td>
    40.       </tr>
    41.       <tr>
    42.         <td>April</td>
    43.         <td>36</td>
    44.         <td>61</td>
    45.       </tr>
    46.       <tr>
    47.         <td>May</td>
    48.         <td>35</td>
    49.         <td>38</td>
    50.       </tr>
    51.     </tbody>
    52.   </table>
    53.   <h4>Using .zingify, we can take the above table and turn it into the chart below.</h4>
    54.   <div id="myChart"></div>
    55.   <a id="docs" target="_blank" href='https://github.com/zingchart/ZingChart-jQuery'>Check out our documentation on GitHub!</a>
    56. </body>
    57.  
    58. </html>
    1. body {
    2.   font-family: Helvetica;
    3.   padding: 20px;
    4.   text-align: center;
    5. }
    6.  
    7. #ex_1 {
    8.   width: 100%;
    9. }
    10.  
    11. caption {
    12.   background-color: #E0E0E0;
    13. }
    14.  
    15. thead {
    16.   background-color: #F0F0F0;
    17. }
    18.  
    19. #myChart {
    20.   width: 100%;
    21.   height: 300px;
    22.   margin-bottom: 20px;
    23. }
    24.  
    25. a {
    26.   color: #00BAF0;
    27.   text-decoration: none;
    28.   font-size: 12px;
    29. }
    30.  
    31. #docs {
    32.   display: block;
    33.   margin-top: 20px;
    34.   background-color: #00BAF0;
    35.   color: #FFF;
    36.   font-size: 18px;
    37.   padding: 10px 20px;
    38.   text-decoration: none;
    39. }
    1. // Make your chart
    2. $('#ex_1').zingify({
    3.   target: 'myChart',
    4.   data: {
    5.     "type": "line"
    6.   }
    7. });