PDA

View Full Version : spacing in the line graph



sbhaskar_bhas@yahoo.co.in
16 Aug 2013, 7:15 AM
Hi,

how do i provide more space after the current in X axis. please help


45397

This is my code:

Ext.require('Ext.chart.*');Ext.require(['Ext.Window', 'Ext.fx.target.Sprite', 'Ext.layout.container.Fit', 'Ext.window.MessageBox']);


Ext.onReady(function () {


var targetDivName='div1chart';
var line1FillColor='#38B8BF';
var line1StrokeColor='#38B8BF';
var line2FillColor='#38B8BF';
var line2StrokeColor='#38B8BF';
var line3FillColor='#7B8080';
var line3StrokeColor='#7B8080';



window.multilinegraphstore = Ext.create('Ext.data.JsonStore', {
fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5', 'data6', 'data7', 'data9', 'data9'],
data: [{name:'03/13',data1:20,data2:10},
{name:'04/13',data1:18,data2:15},
{name:'05/13',data1:19,data2:13},
{name:'06/13',data1:20,data2:14},
{name:'07/13',data1:21,data2:12},
{name:'08/13',data1:20,data2:15},
{name:'Current',data3:20}]
});


var chart = Ext.create('Ext.chart.Chart', {
renderTo: Ext.get(targetDivName),
width: 300,
height: 300,
style: 'background:#fff',
animate: false,
store: multilinegraphstore ,
theme: 'Category1',
legend: {
position: 'bottom'
},
axes: [{
type: 'Numeric',
position: 'left',
fields: ['data1', 'data2', 'data3'],
//title: axis1,
minorTickSteps: 1,
grid: {
odd: {
opacity: 1,
fill: '#ddd',
stroke: '#bbb',
'stroke-width': 0.5
}
}
}, {
type: 'Category',
position: 'bottom',
fields: ['name'],
// title: axis2,
label:{rotate: {
degrees: 90
}}


}],
series: [{
type: 'line',
highlight: {
size: 7,
radius: 7
},
axis: 'left',
xField: 'name',
yField: 'data1',
markerConfig: {
type: 'circle',
size: 2,
radius: 2,
'stroke-width': 0
},
style: {
fill: line3FillColor,
stroke: line3StrokeColor,
'stroke-width': 2,
'stroke-dasharray':10
}
}, {
type: 'line',
highlight: {
size: 7,
radius: 7
},
axis: 'left',
smooth: true,
xField: 'name',
yField: 'data2',
markerConfig: {
type: 'circle',
size: 2,
radius: 2,
'stroke-width': 0
},
style: {
fill: line2FillColor,
stroke: line2StrokeColor,
'stroke-width': 2

}


}, {
type: 'line',
highlight: {
size: 7,
radius: 7
},
axis: 'left',
smooth: true,
xField: 'name',
yField: 'data3',
markerConfig: {
type: 'circle',
size: 4,
radius: 4,
'stroke-width': 0
},
style: {
fill: line3FillColor,
stroke: line3StrokeColor,
padding:30,
'stroke-width': 2
}
}]
});






});

scottmartin
16 Aug 2013, 7:41 PM
>>> how do i provide more space after the current in X axis

Please rephrase your question.

Scott

sbhaskar_bhas@yahoo.co.in
19 Aug 2013, 6:30 AM
Hi,

The x axis in the graph ends at "current" and is not so aesthetic. i would like to have some space so it looks good. can you help?

Thanks.