Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE HTML>
<html>
<head>
<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script type="text/javascript">
window.onload = function () {
    var chart = new CanvasJS.Chart("chartContainer",             {
                title: {
                    text: "Email Analysis"
                },
                animationEnabled: true,
                axisX:{
                    interval: 3,
                    // labelAngle : 30,
                    valueFormatString: "DD"
                },
                axisY: {
                    title: "kWH"
                },
                legend: {
                    verticalAlign: "bottom",
                    horizontalAlign: "center"
                },
        data: [{
    "name": "Electricy",
    "showInLegend": true,
    "legendMarkerType": "square",
    "type": "area",
    "color": "rgba(40,175,101,0.6)",
    "markerSize": 0,
    "xValueType": "dateTime",
    "dataPoints": [{
        "x": 1483228800000,
        "y": 10
    }, {
        "x": 1483315200000,
        "y": 10
    }, {
        "x": 1483401600000,
        "y": 10
    }, {
        "x": 1483488000000,
        "y": 10
    }, {
        "x": 1483574400000,
        "y": 10
    }, {
        "x": 1483660800000,
        "y": 10
    }, {
        "x": 1483747200000,
        "y": 10
    }, {
        "x": 1483833600000,
        "y": 10
    }, {
        "x": 1483920000000,
        "y": 10
    }, {
        "x": 1484006400000,
        "y": 10
    }, {
        "x": 1484092800000,
        "y": 10
    }, {
        "x": 1484179200000,
        "y": 10
    }, {
        "x": 1484265600000,
        "y": 10
    }, {
        "x": 1484352000000,
        "y": 10
    }, {
        "x": 1484438400000,
        "y": 10
    }, {
        "x": 1484524800000,
        "y": 10
    }, {
        "x": 1484611200000,
        "y": 10
    }, {
        "x": 1484697600000,
        "y": 10
    }, {
        "x": 1484784000000,
        "y": 10
    }, {
        "x": 1484870400000,
        "y": 10
    }, {
        "x": 1484956800000,
        "y": 10
    }, {
        "x": 1485043200000,
        "y": 10
    }, {
        "x": 1485129600000,
        "y": 10
    }, {
        "x": 1485216000000,
        "y": 10
    }, {
        "x": 1485302400000,
        "y": 10
    }, {
        "x": 1485388800000,
        "y": 10
    }, {
        "x": 1485475200000,
        "y": 10
    }, {
        "x": 1485561600000,
        "y": 10
    }, {
        "x": 1485648000000,
        "y": 10
    }, {
        "x": 1485734400000,
        "y": 10
    }]
}, {
    "name": "Gas",
    "showInLegend": true,
    "legendMarkerType": "square",
    "type": "area",
    "color": "rgba(40,175,101,0.6)",
    "markerSize": 0,
    "xValueType": "dateTime",
    "dataPoints": [{
        "x": 1483228800000,
        "y": 20
    }, {
        "x": 1483315200000,
        "y": 20
    }, {
        "x": 1483401600000,
        "y": 20
    }, {
        "x": 1483488000000,
        "y": 20
    }, {
        "x": 1483574400000,
        "y": 20
    }, {
        "x": 1483660800000,
        "y": 20
    }, {
        "x": 1483747200000,
        "y": 20
    }, {
        "x": 1483833600000,
        "y": 20
    }, {
        "x": 1483920000000,
        "y": 20
    }, {
        "x": 1484006400000,
        "y": 20
    }, {
        "x": 1484092800000,
        "y": 20
    }, {
        "x": 1484179200000,
        "y": 20
    }, {
        "x": 1484265600000,
        "y": 20
    }, {
        "x": 1484352000000,
        "y": 20
    }, {
        "x": 1484438400000,
        "y": 20
    }, {
        "x": 1484524800000,
        "y": 20
    }, {
        "x": 1484611200000,
        "y": 20
    }, {
        "x": 1484697600000,
        "y": 20
    }, {
        "x": 1484784000000,
        "y": 20
    }, {
        "x": 1484870400000,
        "y": 20
    }, {
        "x": 1484956800000,
        "y": 20
    }, {
        "x": 1485043200000,
        "y": 20
    }, {
        "x": 1485129600000,
        "y": 20
    }, {
        "x": 1485216000000,
        "y": 20
    }, {
        "x": 1485302400000,
        "y": 20
    }, {
        "x": 1485388800000,
        "y": 20
    }, {
        "x": 1485475200000,
        "y": 20
    }, {
        "x": 1485561600000,
        "y": 20
    }, {
        "x": 1485648000000,
        "y": 20
    }, {
        "x": 1485734400000,
        "y": 20
    }]
}]
    });
    chart.render();
}
</script>
</head>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
</body>
</html>
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers