Home forums Using CanvasJS not able to Create temprature(per Day) graph

Tagged: 

This topic contains 1 reply, has 2 voices, and was last updated by  Anjali 1 year, 8 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #8628

    Rahul Munjal
    Participant

    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();
    #8629

    Anjali
    Participant

    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)

You must be logged in to reply to this topic.