Home › Forums › Chart Support › not able to Create temprature(per Day) graph › Reply To: not able to Create temprature(per Day) graph

April 15, 2015 at 7:09 pm #8629

Anjali

rahul,

Y values can be numeric only and you are trying to use y values as string.

Below is the code with issue fixed : 

<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
window.onload = function () {
    var chart = new CanvasJS.Chart("chartArea", {
        title: {
            text: name + " Details"
        },
        zoomEnabled: true,
        animationEnabled: true,
        theme: "theme4",
        axisY: {
            title: "Temprature(C)"
        },
        axisX: {
            valueFormatString: "DD/MMM hh:mm:ss",
            labelAngle: -50
        },
        data: [
        {
            markerType: "square",
            markerColor: "#d9534f",
            markerSize: 10,
            type: "line",
            toolTipContent: "<b>{x}</b> Temprature: {status}",
            xValueType: "dateTime",
            dataPoints: [
                { x: new Date(1428984013000), y: 22, status: "22(C)" },
                { x: new Date(1428984613000), y: 22, status: "22(C)" },
                { x: new Date(1428988213000), y: 25, status: "25(C)" },
                { x: new Date(1428988813000), y: 25, status: "25(C)" },
                { x: new Date(1428989113000), y: 26, status: "26(C)" },
                { x: new Date(1428989413000), y: 27, status: "27(C)" },
                { x: new Date(1428991213000), y: 30, status: "30(C)" },
                { x: new Date(1428994813000), y: 33, status: "33(C)" },
                { x: new Date(1429002013000), y: 35, status: "35(C)" },
                { x: new Date(1429009213000), y: 30, status: "30(C)" },
                { x: new Date(1429011013000), y: 28, status: "28(C)" },
                { x: new Date(1429012813000), y: 26, status: "26(C)" },
                { x: new Date(1429016413000), y: 26, status: "26(C)" },
                { x: new Date(1429011013000), y: 25, status: "25(C)" },
                { x: new Date(1429014613000), y: 25, status: "25(C)" },
                { x: new Date(1429018213000), y: 25, status: "25(C)" },
                { x: new Date(1429021813000), y: 25, status: "25(C)" }
            ]
        }
        ]
    });
    chart.render();
}
</script>
<script type="text/javascript" src="CanvasJS.js"></script>
</head>
<body>
<div id="chartArea" style="height:400px; width: 50%; margin: 0 auto 0 auto; border: 2px solid black"></div>
</body>
</html>

__
Anjali