StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POLive JSON data to Flot Panel in Extjs 4 using MVC
text
Body
copied!<p>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. </p> <p>Here is my app.js</p> <pre><code> 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 } ] }); } }); </code></pre> <p>This is my JSON data:</p> <pre><code>{"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"} </code></pre> <p>Here is the model:</p> <pre><code>Ext.define('BC.model.Chart', { extend: 'Ext.data.Model', fields: ['data', 'label'] }); </code></pre> <p>Here is the store:</p> <pre><code>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' } } }); </code></pre> <p>Here is the controller:</p> <pre><code>Ext.define('BC.controller.Chart', { extend: 'Ext.app.Controller', stores: ['Chart'], models: ['Chart'] }); </code></pre> <p>This is a wrapper for Flot (from here: <a href="https://stackoverflow.com/questions/6910681/stock-chart-in-extjs-4">Stock chart in ExtJS 4</a>):</p> <pre><code>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); } }); </code></pre> <p>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. </p> <pre><code>Ext.define('BC.view.chart.Chart', { extend: 'Ext.panel.Panel', alias: 'widget.chart', name: 'Chart', layout: 'fit', store: 'Chart', items: [{ xtype : "flot", data: ['store'] }] }); </code></pre> <p>In looking at the Extjs documentation (<a href="http://docs.sencha.com/ext-js/4-1/#!/api/Ext.data.reader.Json" rel="nofollow noreferrer">http://docs.sencha.com/ext-js/4-1/#!/api/Ext.data.reader.Json</a>), 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). </p> <p>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. </p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload