dvxCharts - Interactive Charts for JavaScript

dvxCharts Examples

This sample demonstrates how the dvxCharts work with a real-live data.

For detailed implementation, please take a look at the HTML code tab.

 
<!DOCTYPE html>
<html>
<head>
    <title>Live Data Example - JavaScript Chart by dvxCharts</title>
    <link rel="stylesheet" type="text/css" href="../../css/dvxCharts.chart.min.css" />
    <link rel="stylesheet" type="text/css" href="../../themes/base/styles.css" />
    <script src="../../js/dvxCharts.chart.min.js" type="text/javascript"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <style>
        .example-container {
            width: 100%;
            max-width: 500px;
            height: 300px;
        }
    </style>
    
    <script lang="javascript" type="text/javascript">
        var data = [];
        var yValue = 20;

        for (var i = 0; i < 40; i++) {
            yValue += Math.round(Math.random() * 20 - 10);
            data.push([i, yValue]);
        }

        var state = {
            title: {
                text: 'Live Data'
            },
            series: [
                {
                    type: 'area',
                    data: data
                }
            ]
        };

        var chart = new dvxCharts.Chart(state);
        chart.write('container');

        updateChart();

        function updateChart() {

            yValue += Math.round(Math.random() * 20 - 10);

            // remove the first element
            data.splice(0, 1);
            // add a new element
            data.push([i++, yValue]);

            chart.setState(state);

            setTimeout("updateChart()", 500);
        }
    </script>

</head>
<body>
    <div>
        <div id="container" class="example-container">
        </div>
    </div>
</body>
</html>