Thursday, June 5, 2014

Drawing DB Data with Chart JS - Arduino Web Logger



This time we are going to draw graph with the data we have seen as text.
I have used Spline Charts.  I chose this graph because it has smooth curve lines.
http://chartjs.devexpress.com/Demos/VizGallery/#chart/chartslineandpointseriesspline
Refer to below site for how to make chart.
http://chartjs.devexpress.com/Documentation/Tutorial/Configure_Charts?version=13_2

Use the code in Web SQL Database - Arduino Web Logger posting after deleting upload part and inserting DB part.

For detailed information about how to use Chart JS refer to HTML / JavaScript - 4017 Arduino Gateway posting.  Include knockout-3.0.0.js this time.

<!DOCTYPE html>
<html>
    <head>
        <title>WebLogger 7.1</title>
        // ******************** 
        //  Below js library are in
        //  DevExpressChartJS-13.2.9\Lib\js.
        // ********************
        <script src="jquery-2.0.3.min.js"></script>
        <script src="globalize.min.js"></script>
        <script src="knockout-3.0.0.js"></script>
        <script src="dx.chartjs.js"></script>
        
        <script>
            var blockNo;
            var data = new Array();
            var tod = new Date();
            var db = openDatabase('WebLogger8', '1.0', 'Web Logger', 512 * 1024);

            $(document).ready(function() {
                db.transaction(function(tx) {
                    tx.executeSql('CREATE TABLE IF NOT EXISTS LogIndex(block, timeStamp)');
                    tx.executeSql('CREATE TABLE IF NOT EXISTS LogData(block, seq, data)');
                });

            });

            // ********************
            // Create Chart.
            // ********************
            var chartDataSource = [];

            $(function() {
                $("#chartContainer").dxChart({
                    title: {
                        text: 'Logged Data Graph'
                    },
                    dataSource: chartDataSource,
                    commonSeriesSettings: {
                        type: 'spline',
                        argumentField: 'time'
                    },
                    series: [{ name: 'ADAM-4017', valueField: 'data', point: { visible: false}}]
                });
            });

            function viewIndex() {
                var len, i;

                db.transaction(function(tx) {
                    tx.executeSql("SELECT * FROM LogIndex", [], function(tx, results) {
                        len = results.rows.length;
                        clearDspPara();

                        for (i = 0; i < len; i++) {
                            tod.setTime(results.rows.item(i).timeStamp * 1000);
                            $("#dumpPara").append('<p>' + results.rows.item(i).block + ',' + tod.toLocaleString() + '<p>');
                        }
                    }, null);
                });
            }

            function viewData() {
                var len, i;
                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 > 120) len = 120;

                        clearDspPara();

                        for (i = 0; i < len; i++) {
                            data[results.rows.item(i).seq] = results.rows.item(i).data;
                        }

                        for (i = 0; i < len; i++) {
                            $("#dumpPara").append('<p>' + data[i] + '<p>');
                        }
                    }, null);
                });
            }

            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 > 120) len = 120;

                        // ********************
                        //  Create Data for Chart
                        // ********************
                        for (i = 0; i < len; i++) {
                            // If string goes into chart data
                            // everything screws up. Here I 
                            // converted string to float.
                            // More about conversion:
                            // http://www.javascripter.net/faq/convert2.htm
                            data[results.rows.item(i).seq] = parseFloat(results.rows.item(i).data);
                        }

                        for (i = 0; i < len; i++) {
                            chartData.push({ time: i * 0.5, data: data[i] });
                        }

                        observableChartDataSource = ko.observableArray(chartData);
                        var chart = $("#chartContainer").dxChart("instance");
                        var dataSource = chart.option('dataSource', chartData);
                    }, null);
                });
            }

            function clearDspPara() {
                $("#dumpPara").empty();
            }
        </script>
    </head>
    
    <body>
        <!--Create space for Chart-->
        <div id="chartContainer" style="width: 720px; height: 440px;"></div>
        <br />
        
        <button type="button" onclick="viewIndex()">View Index</button>
        <input type="text" id="DataBlockNo" value="1">
        <button type="button" onclick="viewData()">View Data</button>
        <button type="button" onclick="graphData()">Graph Data </button>
        <p id="dumpPara"></p>
    </body>
</html>


Full codes can be found in following links