dvxCharts - Interactive Charts for JavaScript

dvxCharts Examples

This sample demonstrates how to add a trendline.

For detailed implementation, please take a look at the HTML code tab.
 
<!DOCTYPE html>
<html>
<head>
    <title>Trendline 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>
        .myTrendlineSeries .dvx-chart-series-data-group {
            stroke: red;
        }
    </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 data = [];

        var yValue = 50;

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

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

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

            date = addDays(date, 1);
        }

        var chart = new dvxCharts.Chart({
            title: {
                text: 'Trendline'
            },
            animation: {
                duration: 1
            },
            series: [
                {
                    title: 'Line',
                    type: 'line',
                    data: data,
                    markers: {
                        visible: false
                    }
                },
                {
                    title: 'Trendline',
                    type: 'trendline',
                    class: 'myTrendlineSeries',
                    trendlineType: 'linear', // 'linear' or 'exponential'
                    data: data
                }
            ]
        });
        chart.write('container');
    </script>

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