PDA

View Full Version : Creating a project pipeline using "chart"



sinethar
16 Jul 2015, 1:31 AM
52851
Hello everyone. I am new to sencha extjs. I have to create panel with a graph inside similar to the one in the picture. I have used the chart class and created a line with markers(hid the axes)

My problem is how can i create multiple labels holding a data loaded from db ( and position them on the both sides of the line) like shown in the picture.

scottmartin
16 Jul 2015, 1:13 PM
You can add custom text to your chart like so:



Ext.create('Ext.chart.Chart', {
renderTo: Ext.getBody(),
width: 500,
height: 300,
animate: true,
store: store,

items: [{
type : 'text',
text : 'Custom Text',
font : '24px Arial',
width : 100,
height: 30,
x : 100,
y : 100
}],
..

sinethar
17 Jul 2015, 1:26 AM
Thanks Scott. The thing with the custom text is great but i am trying to bind this text to the markers on the line. Thant is why i am using the label property see some sample code:


Ext.apply(me, {
axes: [
{
type: 'Numeric',
minimum: 0,
maximum: 1.2,
position: 'left',
fields: ['dataValue'],
hidden: true,
minorTickSteps: 1
},{
type: 'Category',
position: 'top',
hidden: true,
fields: ['fromXaxis'],
title: 'Location'
}
],


series: [{
type: 'line',


axis: 'left',
xField: 'fromXaxis',
yField: 'dataValue',
style: {
fill: '#38B8BF',
'stroke-width': 2
},
highlight: {
size: 11,
radius: 11
},
markerConfig: {
type: 'circle',
size: 9,
radius: 9,
'stroke-width': 2,
stroke: '#38B8BF',
fill: '#FFF',
cursor: 'pointer'
},


label: {
display: 'under',
'text-anchor': 'middle',
field: 'fromXaxis',
renderer: function (v, label, storeItem, item, i, display, animate, index){
var tpl = '{0} \n' +
'startPhaseDate:{1}\n' +
'endPhaseDate:{2}';


return Ext.String.format(
tpl,
v,
MyApp.util.Format.date(
storeItem.get('startPhaseDate')
),
MyApp.util.Format.date(
storeItem.get('endPhaseDate')
)
);
},
orientation: 'vertical',
color: '#333'
},
listeners: {
scope: me,
itemclick: me.handleSeriesClick
}
}]


So my idea is instead of doing that. to apply two separate labels to the marker and situate one on top and the other under it. Is that possible ?

Thanks in advance