Charts, JSON and ExtJS

A bit late, I admit, but finally I've started using Sencha's ExtJS framework.

The first project I was executing was involving charts with JSON data loaded from a C# ASP.NET WCF service.


I have encountered several problems and a lack of proper documentation. Many of the solutions were finally found in another websites and forums but there was no blog post I have found that had everything together in one example.


So I'm proud to be one of the first who does that. I will also describe the problems I've encountered and of course - the solutions.


In ExtJS, the code is created in Windows, Panels or Forms. The latter, Form, can not be added to Asp.net page as it regenerates a <form> tag, which can not be placed under the already-generated <form runat="'server'"> of the asp.net.


I've used the Ext.Panel then, in an external JS file, like so:

Ext.onReady(function () {
var myPanel = new Ext.Panel({ });

});


inside the panel, among the rest of the properties we're placing the items:

var myPanel = new Ext.Panel({
items: [ ... ]

});


In order to render it, we create in the html page a <div> with a certain ID, in which we render the panel into it:

myPanel.render('MainPanel');


which renders it into:

<div id="MainPanel"></div>

In the ASP.NET page itself.

So far, so good.

But the YUI charts were the complicated part.

Regardless the type of the chart (Pie, Bars, Columns, Line etc.), and like everything in life, every chart consists of 3 parts:
The data (Store)
The data type (Record)
and the style (Chart)

The Store is responsible for the data itself. It can hold array of items, of data - like EVERY example on the web...
But it can also load it dynamically from another service, like my WCF JSON service.

var store = new Ext.data.JsonStore({
autoLoad: true,
proxy: new Ext.data.HttpProxy({
url: 'Services/Service.svc/GetJSONData',
method: 'GET',
restful: true
}),
sortInfo: {
field: 'Order',
direction: 'ASC'
or 'DESC' (case sensitive for local sorting)

},
storeId: 'myStore',

The Store also defines the Record (type of the data itself):

// reader configs
root: 'd',
idProperty: 'Id',
fields: [{ name: 'Id', mapping: 'Id', type: 'int' },
{ name: 'OrderId', mapping: 'OrderId', type: 'int' },
{ name: 'Field', mapping: 'Field', type: 'int'}]
});

What I found confusing in loading the data form an external source was actually the proxy. The correct form of using it is using the Ext.data.HttpProxy While I have used at first the Ext.data.DataProxy, which gave as a result a JS error of 'this.load is not a function'.

So after the Store problem was solved and I was finally calling the service and getting back my data, I needed to create the chart itself inside the items part of the Panel.
As this part is a bit more document, I'll still emphasize one aspect.
The basic usage is
{
store: store,
height: 100,
xtype: 'columnchart',
xField: 'Id',
yField: 'Field'
}

But, If you want to add more bars, or graphs - omit the yField part and use instead the 'series' property:
{
store: store,
height: 100,
xtype: 'columnchart',
xField: 'Id',
series: [{
displayName: 'name',
yField: 'Field1',
fillColor: '0x0000FF',
style: {
image: 'bar.gif',
mode: 'stretch',
color: '0x0000FF'
}
},
{
displayName: 'name',
yField: 'Field2',
fillColor: '0x0000FF',
style: {
image: 'bar.gif',
mode: 'stretch',
color: '0x0000FF'
}
}
]}

I sure hope it was helpful, and I would be delighted to assist or answer questions if needed.

Happy coding
Liad

Comments

Kislay said…
This comment has been removed by the author.
5/12/11 11:44 AM
Kislay said…
Thanks for posting this! However, as a programmer I am looking for some example JSON data which I can send as JSON response, so that EXTJS understands. Say, for pie charts and line charts with mutiple data series. Could you please post the same incase you can think of some? Also, how to create a JSONStore using json response that I will get at EXTJS end?
5/12/11 11:48 AM
Post a Comment

Popular posts from this blog

pip install pymssql fails with 'sqlfront.h': No such file or directory

I've tried to install pymssql on Windows using command line: pip install pymssql The operation fails with an error: fatal error C1083: Cannot open include file: 'sqlfront.h': No such file or directory while looking for a solution, the first results  are not really helpful, until you arrive to this helpful one . In short: I was using python version 3.6, which currently isn't supported with pymssql. Using python 3.5 instead solves that issue, and the  pip install pymssql runs well. If you're using Anaconda Navigator , it is made even simpler: In the Environment section, you can add a new environment with your choice of python version. When you're choosing a supported version - 3.5 for example - you will find the pymssql in the packages list and install it from there directly.
Read more

ASP.NET 2.0 with MySQL 4.1.2 - unicode problem

Hey guys This is my first post and the reason i've actually started this blog. you see, it's now 3:00 AM here but i could not get sleep until I share this with the world :) during the last few days i struggled connecting MySQL database, version 4.1.2, through my ASP.NET application (using SubSonic DAL btw - great project, thanks guys!), and sending unicode utf-8 format data. The problem was that when I tried saving data (Insert or Update SQL Commands) i got question marks ('?????') saved instead of unicode characters, like hebrew for example. I've looked up at all the forums and I have tried everything. I mean really - EVERYTHING. For example, I've read that I should send, right after I'm establishing the connection, SET NAMES utf8 COLLATE 'utf8_unicode_ci'; SET CHARACTER SET utf8; So I've tried that... but no good, still got the question marks. I've downloaded the connector code and recompiled it. tried to see what does it sends. The ASP C...
Read more

C#, Entity Framework, WCF and JSON serialization

Ever tried to serialize Entity Framework with WCF? Have you tried it with the Lazy-Initialization feature? And how about the Proxy Creation Enabled? There's a problem of circular reference if one table is referencing another table - which referencing the first one. We have had a great deal of problems with it. We even tried to consult an external expert of Entity Framework who simply told us it's impossible to serialize it on WCF. oh darn... :( We tried many solutions before we gave up: like that one: http://geekswithblogs.net/danemorgridge/archive/2010/05/04/entity-framework-4-wcf-amp-lazy-loading-tip.aspx and that: http://blogs.microsoft.co.il/blogs/gilf/archive/2011/10/17/avoiding-circular-reference-for-entity-in-json-serialization.aspx We even used t4templates to create a whole new set of flattened objects (!!!) But it doesn't really make life easier as one has to load separately each and every object. But this was not what we were looking for. We needed a solution that...
Read more