PDA

View Full Version : [INFOREQ] ST 2.1 - Zoom into graph, no label on bottom axis, causes lines to not meet



afleming
11 Dec 2012, 4:46 PM
Hello,
Here are 3 images detailing a problem I'm having with my graph. Basically, you have a graph with bottom data labels, and zoom into it very far, between the data labels. The labels don't show, and the line for the bottom axis shifts down, since it depends on the labels there to push up the line to match the vertical axis line.

And 2nd bug I'm experiencing is, if my labels on the right hand side, say they are 1 digit wide, the label for the axis is nicely space, but if the data points grow to 3 digits wide, then the label will overlap.

Perhaps I'm missing something?
Thanks,
Andrew

407324073340734

mitchellsimoens
12 Dec 2012, 6:31 AM
Can I get a test case?

afleming
12 Dec 2012, 6:59 AM
I guess I should've looked at the template first, my apologies >.<

Here you are - I'm building it out as a function that returns the graph to a var, then plopping the var onscreen, so I can easily swap between bar and area charts. Does this on both obviously.



// creates a bar chart, and places it in the chart holder panel in Main.js
barNonStack: function(stacked) {
//this.getChartHolder().removeAll();
var thisClass = this;


var barNonStackChart = Ext.create('Ext.chart.CartesianChart', {
//id: 'chart',
flex: 1,
animate: true,
store: 'graphcurrent',
interactions: [
{
type: 'crosszoom',
},
{
type: 'iteminfo', // popup box when clicking on graph item
listeners: {
show: function(me, item, panel) {
panel.setHtml(thisClass.createPopupInfo(item));
}
}
}
],
series: [{
type: 'bar',
xField: 'label',
yField: ['d1', 'd2', 'd3', 'd4', 'd5', 'd6', 'd7', 'd8', 'd9', 'd10', 'd11', 'd12', 'd13'], // you can have an array of data here for bar graphs only // stacked is for bar graphs, when an array of data points are given

stacked: stacked,
style: {
minGapWidth: 5,
minBarWidth: 1,
maxBarWidth: 3000
},
subStyle: {
//stroke: 'rgb(50,40,10)',
fill: [
'#CE2027',
'#15375F',
'#EFC41A',
'#184722',
'#CE5B28',
'#3C2970',
'#91C83E',
'#542E0F',
'#6289C6',
'#771119',
'#057F76',
'#952D91',
'#28AD4A'
]
}
}],
axes: [{
type: 'numeric',
position: 'right',
title: '',
minimum: 0
//maximum: 100,
//dashSize: 6,
//increment: 5,
//majorTickSteps: 11,
//minorTickSteps: 1,
}, {
type: 'category',
position: 'bottom',
title: ''
}]
});


return barNonStackChart;
},