I have decided to utilize the Extjs 4 MVC architecture because I am not a programmer and I find it easy to understand. I am using Extjs 4 and the jquery Flot library to display and log sensor data coming from my arduino which is attached to my serial port. I currently have a script that writes the sensor data to a json file.
Here is my app.js
Ext.Loader.setConfig({ enabled: true });
Ext.application({
requires: ['BC.view.chart.Chart', 'Ext.layout.container.Border', 'BC.view.chart.Flot'],
name: 'BC',
appFolder: 'app',
controllers: ['Chart'],
launch: function() {
Ext.create('Ext.container.Viewport', {
defaults: {
collapsible: false,
bodyStyle: 'padding:15px'
},
layout: 'border',
items: [{
title: 'Navigation',
preventHeader: 'true',
region:'west',
margins: '5 0 0 0',
cmargins: '5 5 0 0',
width: 150,
},{
region : "center",
title : "Center Region",
preventHeader: 'true',
layout: 'fit',
collapsible: false,
xtype : "tabpanel",
defaults: {bodyStyle: 'padding: 10px;'},
items : [ {
xtype: 'chart',
title: 'Chart'
}, {
xtype: 'panel',
title: 'Tab2',
html : 'Content will go here'
},{
xtype: 'panel',
title: 'Tab 3',
html : 'Content will go here',
}],
activeTab : 0
}
]
});
}
});
This is my JSON data:
{"data": [[1354653278712.012, 187.0], [1354653279619.884, 173.0], [1354653280619.664, 163.0], [1354653281619.913, 155.0]], "label": "Temp1"},{"data": [[1354653278712.041, 368.0], [1354653279619.907, 343.0], [1354653280619.749, 325.0], [1354653281619.938, 311.0]], "label": "Temp2"}
Here is the model:
Ext.define('BC.model.Chart', {
extend: 'Ext.data.Model',
fields: ['data', 'label']
});
Here is the store:
Ext.define('BC.store.Chart', {
extend: 'Ext.data.Store',
model: 'BC.model.Chart',
autoLoad: true,
proxy: {
type: 'ajax',
url: 'data/users.json',
reader: {
type: 'json',
model: 'BC.model.Chart'
}
}
});
Here is the controller:
Ext.define('BC.controller.Chart', {
extend: 'Ext.app.Controller',
stores: ['Chart'],
models: ['Chart']
});
This is a wrapper for Flot (from here: Stock chart in ExtJS 4):
Ext.define('BC.view.chart.Flot', {
extend: 'Ext.Component',
alias: 'widget.flot',
/**
* @cfg {number[][]} data The data to be drawn when it gets rendered
*/
data: null,
/**
* @cfg {object} flotOptions
* The options to be passed in to $.plot
*/
flotOptions: null,
/**
* @property
* The Flot object used to render the chart and to manipulate it in the future. It will only
* be available after the first resize event
* You may not set this property but you are free to call methods on it
*/
flot: null,
initComponent: function (rerenderGraph) {
this.callParent(arguments);
// The only time that we're guaranteed to have dimensions is after the first resize event
this.on('resize', function(comp) {
if (!this.flot) {
this.flot = $.plot(this.getTargetEl().dom, this.data, this.flotOptions);
} else {
// Flot knows to look at the containers size and resize itself
this.flot.resize();
}
}, this);
} });
The following is the controller. The key part is the "data" field. When I directly paste the above JSON data between brackets ([ ]) the chart works fine. However, in the manner it is currently setup (['store']) below I cannot get the data to display, I get a blank Flot chart. I assume this is simply because the correct data format is not being passed to the Flot chart.
Ext.define('BC.view.chart.Chart', {
extend: 'Ext.panel.Panel',
alias: 'widget.chart',
name: 'Chart',
layout: 'fit',
store: 'Chart',
items: [{
xtype : "flot",
data: ['store']
}]
});
In looking at the Extjs documentation (http://docs.sencha.com/ext-js/4-1/#!/api/Ext.data.reader.Json), as I read it, in order for the store to return the exact contents of the json file, you are suppose to point the json proxy in the store to the model name (BC.model.Chart - see above).
It is obvious that the correct data format is not being passed to the Flot chart. I am hoping someone can help me troubleshoot this issue. Also, I am curious how one could find out what data is being passed through the store to the Flot wrapper so that I can more easily troubleshoot. I get no other obvious errors using Firebug.
