Chart Bubble II
Chart Bubble II
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",
            axisX: {
                title: {
                    text: "Budget"
                },
                endOffset: 0.05,
                startOffset: 0.05
            },
            axisY: {
                title: {
                    text: "Revenue"
                }
            },
            primaryHeader: {
                text: "Ad Budget VS Revenue"
            },
            chartLegend: {
                align: "center",
                verticalAlign: "top",
                renderDirection: "horizontal"
            },
            dataSeries: [{
                seriesType: "bubble",
                collectionAlias: "TV Commercials",
                data: [
                     {
                         x: 100000,
                         y: 112000,
                         size: 112000,
                         pointName: "Poor"
                     },
                     {
                         x: 120000,
                         y: 140000,
                         size: 140000,
                         pointName: "Low"
                     },
                     {
                         x: 140000,
                         y: 200000,
                         size: 200000,
                         pointName: "Average"
                     },
                     {
                         x: 160000,
                         y: 210000,
                         size: 210000,
                         pointName: "Good"
                     },
                     {
                          x: 180000,
                          y: 217000,
                          size: 217000,
                          pointName: "Superb"
                     }
                ]
            },
            {
                seriesType: "bubble",
                collectionAlias: "Internet advertising",
                data: [
                     {
                         x: 100000,
                         y: 90000,
                         size: 90000,
                         pointName: "Poor Performance"
                     },
                     {
                         x: 120000,
                         y: 97000,
                         size: 97000,
                         pointName: "Low Performance"
                     },
                     {
                         x: 140000,
                         y: 140000,
                         size: 140000,
                         pointName: "Average Performance"
                     },
                     {
                         x: 160000,
                         y: 300000,
                         size: 300000,
                         pointName: "High Performance"
                     },
                     {
                         x: 180000,
                         y: 400000,
                         size: 400000,
                         pointName: "Ideal Performance"
                     }
                ]
            }]
        });
    });
</script>

</body>