iot/views/chart.ejs

<div id="chartContainer" style="height: 370px; width: 100%;"></div>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>

<%- contentFor('head') %>
<script>
    var current;
    window.onload = function () {
        var dataPoints1 = [];
        var dataPoints2 = [];
        var dataPoints3 = [];
        /*{ x: new Date(2017, 0, 3), y: 650 },
          { x: new Date(2017, 0, 4), y: 700 },
        */

        var chart = new CanvasJS.Chart("chartContainer", {
            animationEnabled: true,
            theme: "light2",
            zoomEnabled: true,
            zoomType: "x",
            exportEnabled: true,
            title:{
                text: "Retrieving current A23 conditions..."
            },
        /*	subtitles:[{
                text: "X Axis scale is Logarithmic",
                fontSize: 14
            }],*/
            toolTip:{
                shared:true
            },
            legend:{
                cursor:"pointer",
                verticalAlign: "bottom",
                horizontalAlign: "left",
                dockInsidePlotArea: true,
                itemclick: toogleDataSeries
            },
            axisX:{
                valueFormatString: "HH:mm DD MMM",
                crosshair: {
                    enabled: true,
                    snapToDataPoint: true
                }
            },
            axisY: {
                title: "Temperature",
                lineColor: "#C24642",
                titleFontColor: "#C24642",
                labelFontColor: "#C24642",
                crosshair: {
                    enabled: true
                },
                minimum:0,
                maximum: 50,
            },
            axisY2:  [
                {
                    title: "Air RH %",
                    titleFontColor: "#51CDA0",
                    labelFontColor: "#51CDA0",
                    minimum:0,
                    maximum: 100,
                },
                {
                    title: "Soil RH %",
                    lineColor: "#99D9EA",
                    titleFontColor: "#99D9EA",
                    labelFontColor: "#99D9EA",
                    minimum:0,
                    maximum: 100,
                }
            ],
                //{title: "Temperature",
                //lineColor: "#C24642",
                //titleFontColor: "#C0504E",
                //labelFontColor: "#C0504E"
            //},
            data: [{
                name: "Temperature",
                type: "line",//line
                showInLegend: true,
                markerType: "square",
                xValueFormatString: "HH:mm on DD MMM, YYYY",
                color: "#F08080",
                dataPoints: dataPoints2
            },
            {
                axisYType: "secondary",//at right
                //axisYIndex: 1,
                name: "RH Air",
                type: "spline",
                showInLegend: true,
                lineDashType: "dash",
                dataPoints: dataPoints1
            },
            {
                axisYType: "secondary",
                //axisYIndex: 1,
                name: "RH Soil",
                type: "spline",
                showInLegend: true,
                lineDashType: "dash",
                color: "#99D9EA",
                dataPoints: dataPoints3
            }]
        });


        function toogleDataSeries(e){
            if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
                e.dataSeries.visible = false;
            } else {
                e.dataSeries.visible = true;
            }
            chart.render();
        }

        function addData(data) {
            for (var i = 0; i < data.length; i++) {
                var date = new Date(data[i]["timestamp"]);
                if(data[i].field_name == "A23_DHT"){
                    //console.log("Got DHT:" + date);
                    var dht = JSON.parse(data[i].field_value).dht;
                    if(dht && dht.hum <= 100){
                        dataPoints1.push({
                            x: date,
                            y: dht.hum
                        });
                        dataPoints2.push({
                            x: date,
                            y: dht.temp
                        });
                    }
                }
                if(data[i].field_name === "A23_Garden_Humidity")
                {
                    //console.log("Got Soil:" + date);
                    var soil = parseFloat( data[i].field_value);
                    dataPoints3.push({
                        x: date,
                        y: soil
                    });
                }
            }
            chart.render();

            $.getJSON("/n/dht?e=now", function(data){
                if(data && data.dht){
                    chart.title.set("text", "A23 Currently is " + data.dht.temp + "°C, " + data.dht.hum +"% RH" );
                }else {
                    chart.title.set("text", "A23 conditions");
                }
            });
        }
        
        $.getJSON("/n/device/A23_DHT/7", addData);
        $.getJSON("/n/device/A23_Garden_Humidity/7", addData);

    }
</script>