.png)
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
No comments:
Post a Comment