dvxCharts - Interactive Charts for JavaScript

dvxCharts Examples

This sample demonstrates how to specify the chart selection rectangle.

For detailed implementation, please take a look at the HTML code tab.
 
<!DOCTYPE html>
<html>
<head>
    <title>Selection Rectangle 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>
    
    <style>
        .dvx-chart .dvx-chart-selection-rect {
            fill: rgba(125,125,125,0.2);
            stroke: gray;
            stroke-width: 1;
        }
    </style>
    <script lang="javascript" type="text/javascript">

        function addDays(date, value) {
            var newDate = new Date(date.getTime());
            newDate.setDate(date.getDate() + value);
            return newDate;
        }

        function round(d) {
            return Math.round(100 * d) / 100;
        }

        var data1 = [];
        var data2 = [];

        var yValue1 = 50;
        var yValue2 = 200;

        var date = new Date(2010, 0, 1);

        for (var i = 0; i < 200; i++) {

            yValue1 += Math.random() * 10 - 5;
            data1.push([date, round(yValue1)]);

            yValue2 += Math.random() * 10 - 5;
            data2.push([date, round(yValue2)]);

            date = addDays(date, 1);
        }

        var chart = new dvxCharts.Chart({
            title: 'Selection Rectangle',
            animation: {
                duration: 1
            },
            mouseInteractionMode: 'zooming', // zooming, panning
            axes: [
                {
                    type: 'dateTime',
                    location: 'bottom',
                    zoomEnabled: true
                },
                {
                    type: 'linear',
                    location: 'left',
                    zoomEnabled: true
                }
            ],
            series: [
                {
                    type: 'line',
                    data: data1,
                    markers: null
                },
                {
                    type: 'line',
                    data: data2,
                    markers: null
                }
            ]
        });
        chart.write('container');
    </script>

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