ExtJS Columnchart set Different color implementation code

Ext.onready (function () {

Define Store

var chartstore = new Ext.data.JsonStore ({

Root: ' Root ',

fields:[

{name: ' ne ', type: ' String '},//network element

{name: ' Confine ', type: ' int '},//threshold

{Name: ' Bill ', type: ' string '}//working singular

],

Sortinfo:{field: ' Bill ', direction: ' ASC '}

});

Test data

var obj={

root:[

{ne: ' net element One ', confine:80,bill:150},

{ne: ' net element two ', confine:150,bill:140},

{ne: ' net element three ', confine:180,bill:160},

{ne: ' net element five ', confine:120,bill:180},

{ne: ' net element Six ', confine:165,bill:13},

{ne: ' net element seven ', confine:54,bill:12},

{ne: ' net element eight ', confine:55,bill:44},

{ne: ' net element nine ', confine:33,bill:113},

{ne: ' net element 10 ', confine:122,bill:77}

]

}

Loading data

Chartstore.loaddata (obj);

Pushlet callback function

Window.ondata = function (event) {

Alert (Event.get ("data1"));

var obj1 = eval (' +event.get (' data1 ') + ');

Obj=obj1;

Chartstore.loaddata (obj);

}

System attribute definition column data model

var cm = new Ext.grid.ColumnModel ([New Ext.grid.RowNumberer (),

{header: ' net Element ', Dataindex: ' NE '},

{header: ' Work Order ', Dataindex: ' Bill ', renderer:function (value, Cellmeta, record, RowIndex, ColumnIndex, store) {

var confine = record.data[' confine '];

/*if (value>=confine) {

cellmeta.css= ' x-grid-back-red ';

var row = Cm.findcolumnindex (RowIndex);

row.css= ' x-grid-back-red ';

}*/

return value;

}},

{header: ' Valve value ', dataindex: ' Confine '}

{header: ' Operations ', Dataindex: ' State ', renderer:renderoperate}

]);

var Grid = new Ext.grid.EditorGridPanel ({

Title: ' Work order backlog monitoring statistics ',

CM:CM,

Store:chartstore,

Sm:new Ext.grid.RowSelectionModel ({

Singleselect:true

}),

Striperows:true,

Loadmask:true,

clickstoedit:2,//Double-click to Trigger,

Enablecolumnmove:false,

Trackmouseover:false,

Striperows:true,

Frame:true,

loadmask:{

Msg: "Data Loading ..."

},

viewconfig:{

Forcefit:true,

Columnstext: ' Show Columns ',

SCROLLOFFSET:25,

Sortasctext: ' Ascending ',

Sortdesctext: ' Descending '

},

Autoexpandcolumn: ' Desc ',

Bbar:new Ext.pagingtoolbar ({

Pagesize:24,

Store:chartstore,

Displayinfo:true,

Displaymsg: ' Show {0} to section {1}, total {2} ',

Emptymsg: ' No record '

}),

Viewconfig:{forcefit:true,sortasctext: ' Positive sequence ', Sortdesctext: ' Descending ',

Getrowclass:function (Record,rowindex,rowparams,store) {

if (record.data.bill>=record.data.confine) {

Return ' x-grid-back-red ';

}

}

}

});

var linechart = new Ext.chart.LineChart ({

Title: ' Work Order backlog chart ',

Xtype: ' Linechart ',

url:aiupp_root+ '/css/resources/charts.swf ',

Store:chartstore,

Xfield: ' label ',

Yfield: ' Alarmcount ',

Define TIP Content

Tiprenderer:function (chart, record) {

Alert (Record.get (' starttime '));

var ne = record.get (' ne ');

var str = String.Format (' net element: {0}n work order: {1}n threshold: {2} ', Ne,record.get (' Bill '), Record.get (' confine '))

return str;

},

Defines two charts, one is a histogram, the other is a line chart

Series: [{

Type: ' column ',

DisplayName: ' Working single number ',

ID: "billID",

Xfield: ' NE ',

Yfield: ' Bill ',

Style: {

Color:0x99bbe8,

Size:20

}

},{

Type: ' column ',

DisplayName: ' Valve value ',

Xfield: ' NE ',

Yfield: ' Confine ',

Style: {

Color: ' #ff0000 ',

Size:20

}

}],

listeners:{

"Show": function () {

var c = linechart.series;

alert (C[1].store);

C[1].style.color= ' #00ff00 ';

}

},

Define Chart Styles

Chartstyle: {

legend:{

Display: "Top"

},

Xaxis: {

Color:0x69abc8,

Majorticks: {color:0x69abc8, length:4},

Minorticks: {color:0x69abc8, length:2},

Majorgridlines:{size:1, color:0xeeeeee}

},

YAxis: {

Color:0x69abc8,

Majorticks: {color:0x69abc8, length:4},

Minorticks: {color:0x69abc8, length:2},

MajorGridlines: {size:1, Color:0xdfe8f6}

}

}

});

var contentpanel = new Ext.tabpanel ({

Region: ' Center ',

Enabletabscroll:true,

activetab:0,

Closable:false,

Split:false,

Collapsible:false,

Layoutontabchange:true,

Items:[linechart,grid]

});

Time interval

var interval = new Ext.form.TextField ({

Name: ' Interval ',

Fieldlabel: ' Interval time ',

ID: "Searchinterval"

});

Grouping methods

var grouptype = new Ext.form.RadioGroup ({

Name: ' GroupType ',

Fieldlabel: ' Group mode ',

ID: "Searchgrouptype",

items:[

New Ext.form.Radio ({

Name: "GroupType",

Inputvalue: "1",

Boxlabel: "Region"

}),

New Ext.form.Radio ({

Name: "GroupType",

Inputvalue: "2",

Boxlabel: "area + net Element"

}),

New Ext.form.Radio ({

Name: "GroupType",

Inputvalue: "3",

Boxlabel: "Region + network element + business code"

})

]

});

Start button

var startbtn = new Ext.button ({

Text: ' Start ',

MINWIDTH:80,

Handler:function () {

Store.load ();

}

});

Stop button

var stopbtn = new Ext.button ({

Text: ' Stop ',

MINWIDTH:80,

Handler:function () {

Store.load ();

}

});

var searchpanel = new Ext.form.FormPanel ({

LabelAlign: ' Left ',

Labelwidth:60,

Frame:true,

Layout: ' column ',

items:[

{columnwidth:.28,layout: ' form ', Items:[interval]},

{columnwidth:.38,layout: ' form ', Items:[grouptype]},

{columnwidth:.10,layout: ' form ', items:[startbtn]},

{columnwidth:.16,layout: ' form ', ITEMS:[STOPBTN]}

]

});

var VP = new Ext.viewport ({

Layout: ' Border ',

Border:false,

Hideborders:true,

BUFFERRESIZE:100,

items:[

{region: ' North ', title: ':: Monitoring conditions ', Autoheight:true,margins: ' 5 5 5 ', Collapsible:true,items:[searchpanel]},

{region: ' Center ', layout: ' Fit ', Margins: ' 5 5 5 5 ', Items:[contentpanel]}

]

});

Vp.show ();

});