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

not able to Create temprature(per Day) graph

Viewing 2 posts - 1 through 2 (of 2 total)

Tagged: 

  • April 15, 2015 at 12:22 pm #8628

    Rahul Munjal

    Hi,
    I am trying to create a line graph for Temprature v/s Day graph.
    Below is my 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();
    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

Viewing 2 posts - 1 through 2 (of 2 total)

Tagged: 

You must be logged in to reply to this topic.