Create Graph with DB Data using Chart JS - Humidity & Temperature Web Logger

Let's modify WSDHT1.0.html little bit to create graph.

There is nothing much different from other previous graphs, except that we have two Data and we have two vertical axis.

First do Chart Configuration:

        $(function() {
            $("#chartContainer").dxChart({
                title: {
                    text: 'Temperature & Humidity Graph'
                },
                // Left y-axis: temperature, right y-axis: humidity
                valueAxis: [{ name: 'mainAxis', position: 'left', title: { text: 'Temperature (C)'} },
                        { name: 'secondaryAxis', position: 'right', title: { text: 'Humidity (%)'}}],
                dataSource: chartDataSource,
                legend: { verticalAlignment: "bottom", horizontalAlignment: "center" },
                // Humidity & Temperature have common x-axis: time
                commonSeriesSettings: { argumentField: 'time' },
                // Use 'spline' type to make smooth curves
                series: [{ name: 'Temperature', valueField: 'temperature', point: { visible: false }, type: 'spline', axis: 'mainAxis' },
                     { name: 'Humidity', valueField: 'humidity', point: { visible: false }, type: 'spline', axis: 'secondaryAxis'}]
            });
        });

Then Add Chart Data:

        function graphData() {
            var len, i;
            var chartData = [];
            blockNo = document.getElementById("DataBlockNo").value;
            db.transaction(function(tx) {
                tx.executeSql('SELECT * FROM LogData WHERE block="' + blockNo + '"', [], function(tx, results) {
                    len = results.rows.length;
                    if (len > 42) len = 42;
                    for (i = 0; i < len; i++) {
                        chartData.push({ time: i, temperature: parseFloat(results.rows.item(i).temperature), humidity: parseFloat(results.rows.item(i).humidity) });
                    }
                    observableChartDataSource = ko.observableArray(chartData);
                    var chart = $("#chartContainer").dxChart("instance");
                    var dataSource = chart.option('dataSource', chartData);
                }, null);
            });
        }

Full codes can be found in following links

• WSDHT2_0.html:
  https://github.com/michelleseo/Arduino_Web/blob/master/WSDHT/WSDHT2_0.html