dvxCharts - Interactive Charts for JavaScript

dvxCharts Examples

This sample demonstrates the Polar Area chart type.

For detailed implementation, please take a look at the HTML code tab.
 
<!DOCTYPE html>
<html>
<head>
    <title>Polar Area Chart 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>
        .mySeries1 .dvx-chart-series-data-group {
            fill: rgba(65,140,240,0.75);
        }

        .mySeries2 .dvx-chart-series-data-group {
            fill: rgba(252,180,65,0.75);
        }
    </style>
    <script lang="javascript" type="text/javascript">
        function round(d) {
            return Math.round(100 * d) / 100;
        }

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

        // Fill series data
        for (var angle = 0.0; angle <= 360.0; angle += 30.0) {
            var yValue = (1.0 + Math.sin(angle / 180.0 * Math.PI)) * 10.0;

            yValue = round(yValue);

            var x1 = angle + 90;
            var x2 = angle + 270;

            if (x1 > 360) {
                x1 -= 360;
            }

            if (x2 > 360) {
                x2 -= 360;
            }

            data1.push([x1, yValue]);
            data2.push([x2, yValue]);
        }

        var chart = new dvxCharts.Chart({
            title: { text: 'Polar Area Chart' },
            series: [
                {
                    type: 'polarArea',
                    class: 'mySeries1',
                    data: data1
                },
                {
                    type: 'polarArea',
                    class: 'mySeries2',
                    data: data2
                }
            ]
        });
        chart.write('container');
    </script>

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