• Edit
  • Download
  • <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <title>ZingSoft Demo</title>
        <script src="//cdn.zingchart.com/zingchart.jquery.min.js "></script>
    
        <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
        <style>
            body {
                font-family: Helvetica;
                padding: 20px;
            }
    
            h3 {
                text-align: center;
            }
    
            #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;
                text-align: center;
            }
    
            zing-grid[loading] {
                height: 800px;
            }
        </style>
    </head>
    
    <body>
        <h3>Loadin' up some AJAX data!&nbsp;</h3>
        <div id="myChart"></div>
        <button type="button">Load AJAX Data</button>
        <a href="https://api.myjson.com/bins/530az" target="_blank">(Click here to see the raw JSON)</a>
        <a id="docs" target="_blank" href='http://www.github.com/PINT/ZingChart-jQuery'>Check out our documentation on GitHub!</a>
        <script>
            ZC.LICENSE = ["b55b025e438fa8a98e32482b5f768ff5"]; // Data for the chart
            var myData = {
                type: "line",
                plot: {
                    aspect: "spline"
                },
                series: [{
                    values: [3, 4, 10, 2, 6, 5]
                }]
            };
    
            // Make your chart
            $("#myChart").zingchart({
                data: myData
            });
    
            // Bind a click event to the button
            $("button").click(function() {
    
                // Issue a get request
                $.get('https://api.myjson.com/bins/530az', function() {})
    
                    // Upon a successful get request...
                    // (notice we haven't even touched the ZingChart API yet)
                    .done(function(res) {
    
                        // Store the new data in a variable (totally optional)
                        var newData = res.data;
    
                        // Set the series values equal to the newData
                        $("#myChart").setSeriesValues({
                            "values": [newData]
                        });
    
                        // Tada! Your chart just used AJAX data. Begin the disco.
                    });
            });
        </script>
    </body>
    
    </html>
    <!DOCTYPE html>
    <html>
    	<head>
        <meta charset="utf-8">
        <title>ZingSoft Demo</title>
    	<script src="//cdn.zingchart.com/zingchart.jquery.min.js "></script>
    	
    		<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    </head>
    	<body>
        <h3>Loadin' up some AJAX data!&nbsp;</h3>
        <div id="myChart"></div>
        <button type="button">Load AJAX Data</button>
        <a href="https://api.myjson.com/bins/530az" target="_blank">(Click here to see the raw JSON)</a>
        <a id="docs" target="_blank" href='http://www.github.com/PINT/ZingChart-jQuery'>Check out our documentation on GitHub!</a>
    	</body>
    </html>
    body {
        font-family:Helvetica;
        padding:20px;
    }
    h3 {
        text-align:center;
    }
    #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;
        text-align:center;
    }
    // Data for the chart
    var myData = {
        type: "line",
        plot:{
            aspect:"spline"
        },
        series: [
            {
                values: [3,4,10,2,6,5]
            }
        ]
    };
    
    // Make your chart
    $("#myChart").zingchart({
        data: myData
    });
    
    // Bind a click event to the button
    $("button").click(function(){
        
        // Issue a get request
        $.get( 'https://api.myjson.com/bins/530az', function() {})
        
        // Upon a successful get request...
        // (notice we haven't even touched the ZingChart API yet)
        .done(function(res){
            
            // Store the new data in a variable (totally optional)
            var newData = res.data;
            
            // Set the series values equal to the newData
            $("#myChart").setSeriesValues({
                "values": [newData]
            });
            
            // Tada! Your chart just used AJAX data. Begin the disco.
        });
    });