• Edit
  • Download
  • <!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>
        <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;
            }
    
            zing-grid[loading] {
                height: 800px;
            }
        </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"
        }
    });