iot/views/chartGarden.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 temp = {in:[], out:[]};
        var hum = {in:[], out:[],outSoil:[]};
        var press = {out:[]};
        /*{ 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: "Weather conditions in the lasts 7 days"
            },
            /*	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: "Air Temperature",
                    lineColor: "#C24642",
                    titleFontColor: "#C24642",
                    labelFontColor: "#C24642",
                    suffix: " °C",
                    minimum: -10,
                   // maximum: 40,
                } , {
                    title: "ATM Pressure",
                    lineColor: "#A477C6",
                    titleFontColor: "#A477C6",
                    labelFontColor: "#A477C6",
                    suffix: "hPa",
                    minimum: 990,
                    //maximum: 1080,
                },
            ],
            axisY2: [
                {
                    title: "Relative Humidity",
                    titleFontColor: "#51CDA0",
                    labelFontColor: "#51CDA0",
                    minimum: 0,
                    maximum: 100,
                    suffix: "%",
                }
            ],
            data: [{
                name: "Out Temperature",
                type: "line",//line
                showInLegend: true,
                markerType: "square",
                xValueFormatString: "HH:mm on DD MMM, YYYY",
                color: "#F08080",
                dataPoints: temp.out
            },
            {
                name: "In Temperature",
                type: "line",//line
                showInLegend: true,
                //markerType: "square",
                //xValueFormatString: "HH:mm on DD MMM, YYYY",
                color: "#92D050",
                dataPoints: temp.in
            },
            {
                name: "ATM Pressure",
                axisYIndex: 1,
                type: "line",
                showInLegend: true,
                lineDashType: "dash",
                color: "#A477C6",
                dataPoints: press.out
            },
            //-----  sright axies -----
            {
                name: "Air RH",
                axisYType: "secondary",//at right
                //axisYIndex: 1,
                type: "spline",
                showInLegend: true,
                lineDashType: "dash",
                dataPoints: hum.out
            },
           {
                name: "Soil RH",
                axisYType: "secondary",
                axisYIndex: 1,
                type: "spline",
                showInLegend: true,
                lineDashType: "dash",
                color: "#99D9EA",
                dataPoints: hum.outSoil
            }]
        });


        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_Garden_dht") {
                    var dht = JSON.parse(data[i].field_value);
                    hum.out.push({ x: date, y: parseFloat(dht.Hum) });
                    temp.out.push({ x: date, y: parseFloat(dht.Temp) });
                    press.out.push({ x: date, y: parseFloat(dht.Pres)});
                    if (dht.Soil) {
                       hum.outSoil.push({ x: date, y: parseFloat(dht.Soil) });
                    }
                }
                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){
                        hum.in.push({
                            x: date,
                            y: dht.hum
                        });
                        temp.in.push({
                            x: date,
                            y: dht.temp
                        });
                    }
                }


            }
            chart.render();

            /*
            $.getJSON("/n/dht?e=now", function(data){
                if(data && data.dht){
                    chart.title.set("text", "Currently " + data.temp + "°C, " + data.hum +"% RH, ATM:" +  data.press + "hPa");
                }else {
                    chart.title.set("text", "Weather conditions");
                }
            });
            */
        }

        $.getJSON("/n/device/A23_DHT/1", addData);
        $.getJSON("/n/device/A23_Garden_dht/1", addData);

    }
</script>