Chart Polar Scater III
Chart Polar Scater III
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",
                primaryHeader: {
                    text: "World Soccer Statistics"
                },
                axisX: {
                    categoricalValues: ['1966', '1970', '1974', '1978', '1982', '1986', '1990', '1994', '1998', '2002', '2006', '2010']
                },
                chartLegend: {
                    align: "center",
                    verticalAlign: "top"                    
                },
                dataSeries: [{
                    seriesType: "polarscatter",
                    collectionAlias: "Total Attendance",
                    data: [1563135, 1603975, 1865753, 1545791, 2109723, 2394031, 2516215, 3587538, 2785100, 2705197, 3359439, 3178856]
                }, {
                    seriesType: "polarbar",
                    collectionAlias: "Pre-Sold seats",
                    data: [63135, 703975, 1000753, 1100791, 1109723, 1190031, 1800215, 1234538, 2098100, 1123197, 2259439, 3000856]
                }]
            });
        });
    </script>

</body>