View Full Version : Best approach for a dynamic multi-lines chart ?

23 Aug 2012, 6:19 AM

I'm trying to get a chart to display multiple lines with the exact number of lines being "unknown".

Just think of X cameras, each of them storing pictures in a dedicated directory every day, a JSON will get generated, containing data as detailed here: http://docs.sencha.com/ext-js/4-0/#!/api/Ext.chart.series.Line

The application I'm working on contains a user permission module, userA can access camera 1, 5, 23 userB can access camera 2, 5, 45, ...
There is potentially an unlimited number of users and unlimited number of cameras.

I want to display one line per camera, with values of the line being number of pictures for a specific day.

Right now I can got it working statically, defining sensors in a model and getting the JSON to correct data:
JSON Response:

{"success":true,"message":"Loaded data","data":[{"date":1345075200000,"source1":"1092"},{"date":1345161600000,"source1":"1440","source2":"777"},{"date":1345248000000,"source1":"1435","source2":"1440"},{"date":1345334400000,"source1":"1440","source2":"289"},{"date":1345420800000,"source1":"1440","source2":"0"},{"date":1345507200000,"source1":"1440","source2":"0"},{"date":1345593600000,"source1":"1440","source2":"62"},{"date":1345680000000,"source1":"586","source2":"940"}]}

View (portion)

extend: 'Ext.chart.Chart',
alias: 'widget.filesgraph',

store: 'dashboard.SourcePictures',

legend: {
position: 'right'
animate: true,
shadow: true,

axes: [{
title: 'Pictures',
type: 'Numeric',
position: 'left',
minimum: 0,
grid: {
odd: {
opacity: 1,
fill: '#ddd',
stroke: '#bbb',
'stroke-width': 0.5
label: {font: '10px Arial'}
}, {
type: 'Time',
position: 'bottom',
fields: ['date'],
dateFormat: 'd M',
label: {font: '10px Arial'},
grid: true
series: []

Controller (portion):

sourceStore = this.getPermissionsSourcesSourcesStore()
for (var i = 0; i < sourceStore.getCount(); i++) {
var sourceID = sourceStore.getAt(i).data.sourceid;
type: 'line',
xField: 'date',
yField: 'source' + sourceID,
smooth: true,
highlight: {
size: 7,
radius: 7
tips: {
trackMouse: true,
width: 180,
height: 25,
renderer: function(storeItem, item) {
this.setTitle(item.value[1] + ' ' + i18n.gettext('pictures in') + ' ' + Ext.util.Format.dateRenderer('d M Y')(new Date(storeItem.get('date') + 43200000)));

And the model (portion):

extend: 'Ext.data.Model',
fields: [
{name: 'date', type: 'int'},
{name: 'source1', type: 'int'},
{name: 'source2', type: 'int'}

How could I get either 'fields' of the model to be inserted dynamically or even not requiring fields to be declared statically in the model.

PS: as of yet, I could simply statically add 100 lines inside the model with source1, source2, source3, ... and things would work but I want to avoid any static assignments. The model is the only file where my sources are declared.

Thanks a lot

28 Aug 2012, 10:16 AM

do someone knows how to create a dynamic multi-lines chart ?