Chart.js #5858 test01

by Akihiko Kusanagi

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<canvas id="myChart"></canvas>

JavaScript

var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
    "data": {
        "datasets": [
            {
                "backgroundColor": "rgba(12, 69, 229, 1)",
                "borderColor": "rgba(12, 69, 229, 1)",
                "data": [
                    83.37655367230957
                ],
                "label": "CPUUtilization",
                "yAxisID": "CPUUtilization"
            },
            {
                "backgroundColor": "rgba(14, 226, 97, 1)",
                "borderColor": "rgba(14, 226, 97, 1)",
                "data": [
                    3658412.1999999997
                ],
                "label": "NetworkPacketsIn",
                "yAxisID": "NetworkPacketsIn"
            }
        ],
        "labels": [
            "itunes-bigdata-voldemort-replicator"
        ]
    },
    "options": {
        "legend": {
            "display": true
        },
        "responsive": false,
        "scales": {
            "xAxes": [
                {
                    "ticks": {
                        "autoSkip": false,
                        "display": false,
                        "maxRotation": 90,
                        "minRotation": 90
                    }
                }
            ],
            "yAxes": [
                {
                    "id": "CPUUtilization",
                    "position": "left",
                    "ticks": {
                        "max": 100,
                        "min": 0
                    },
                    "type": "linear"
                },
                {
                    "id": "NetworkPacketsIn",
                    "position": "right",
                    "type": "linear"
                }
            ]
        }
    },
    "type": "bar"
});