Chart Polar Scater I
Chart Polar Scater I
View Demo

Insert it in <head>

<!-- Choose one for Light Mode -->
<link id="themecss" rel="stylesheet" type="text/css" href="https://i-as.dev/devui/css/light/all.min.css" />
<!-- Choose one for Dark Mode -->
<link id="themecss" rel="stylesheet" type="text/css" href="https://i-as.dev/devui/css/dark/all.min.css" />

<script type="text/javascript" src="https://i-as.dev/devui/js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="https://i-as.dev/devui/js/devui-all.min.js"></script>

Use Components

<body class="theme-light">

    <div id="chart"></div>
    <script type="text/javascript">
        $(function () {
            $("#chart").devuiChart({
                theme: "light",                
                axisY: {
                    title: {
                        text: "RainFall Quantities"
                    }
                },
                primaryHeader: {
                    text: "Weather - Wind/Precipitation Values"
                },
                chartLegend: {
                    align: "center",
                    verticalAlign: "top"
                },
                tooltipSettings: {
                    axisMarkers: {
                        enabled: true,
                        mode: "xy",
                        width: 2,
                        color:"red",
                        zIndex: 3
                    }
                },
                dataSeries: [{
                    seriesType: "polarscatter",
                    collectionAlias: "January 2008",
                    data: [[16.4, 5.4], [21.7, 2], [25.4, 3], [19, 2], [10.9, 1], [13.6, 3.2], [10.9, 7.4], [10.9, 0], [10.9, 8.2], [16.4, 0], [16.4, 1.8], [13.6, 0.3], [13.6, 0], [29.9, 0], [27.1, 2.3], [16.4, 0], [13.6, 3.7], [10.9, 5.2], [16.4, 6.5], [10.9, 0], [24.5, 7.1], [10.9, 0], [8.1, 4.7], [19, 0], [21.7, 1.8], [27.1, 0], [24.5, 0], [27.1, 0], [29.9, 1.5], [27.1, 0.8], [22.1, 2]]
                }]
            });
        });
    </script>

</body>