Graph:
var chart = Ext.create('Ext.chart.Chart', {
style: 'background:#fff',
animate: true,
shadow: true,
store: store1,
axes: [{
type: 'Numeric',
position: 'left',
fields: ['data1'],
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
title: 'Number of Hits',
grid: true,
minimum: 0
}, {
type: 'Category',
position: 'bottom',
fields: ['name'],
title: 'Month of the Year'
}],
series: [{
type: 'column',
axis: 'left',
highlight: true,
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function(storeItem, item) {
this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data1') + ' $');
}
},
label: {
display: 'insideEnd',
'text-anchor': 'middle',
field: 'data1',
renderer: Ext.util.Format.numberRenderer('0'),
orientation: 'vertical',
color: '#333'
},
xField: 'name',
yField: 'data1'
}]
});
this not working.
{
xtype : 'panel',
layout : {
type : 'hbox',
pack : 'center'
},
id:'graphpanel',
width : 940,
margin : '20 0 20 0',
border : 0,
items: chart
}
this working.
var win = Ext.create('Ext.window.Window', {
width: 800,
height: 600,
minHeight: 400,
minWidth: 550,
hidden: false,
maximizable: true,
title: 'Bar Chart',
autoShow: true,
layout: 'fit',
items: chart
});
here is my problem graph working fine in popup window but not in panel. if i popup window first then only graph is rendering in panel.
pl'z help sorry for bad code formatting..:(
You're not providing the chart with dimensions, either explicitly (giving it a width and height) or implicitly (by using an appropriate layout).
The panel layout should be fit. Also, be sure whatever is the parent of that panel is giving it a height.
Related
I want to show the title on Top, here is the code for same and please see the output below:
Data is coming but it overwrites the title , so is there anyway to show title separately on to the top, can anybody help?
items: {
xtype: 'chart',
animate: true,
shadow: true,
store: store,
legend: {
position: 'top',
title: 'XYZ ....',
renderer: function(storeItem, item) {
this.setTitle(storeItem.get('startPeriod') + 'to ' + storeItem.get('endPeriod'));
}
},
axes: [{
type: 'Numeric',
position: 'left',
fields: ['per01', 'per02'],
title: false,
grid: true,
roundToDecimal: false
},
{
title: 'XYZ...',
position: 'top',
type: 'Category',
position: 'Bottom',
fields: ['..'],
label: {
rotate: {
degrees: 270
}
}
}, ],
series: [{
//type: 'bar',
type: 'column',
axis: 'bottom',
gutter: 80,
xField: 'ou',
//title: periodStr1,
title: ['April-' + lastyear_graph1 + " to " + strMonth + "-" + selectedText_yr, 'April-' + year2 + " to " + strMonth + "-" + year3_graph1],
yField: ['per01', 'per02'],
stacked: false,
tips: {
trackMouse: true,
width: 65,
height: 28,
renderer: function(storeItem, item) {
this.setTitle(String(item.value[1]));
}
}
}]
}
If you are looking for a title for the chart, you should set the title config of the chart and not the title config of the series. Title config of series is the human-readable name of the series which displayed in the legend.
items: {
xtype: 'chart',
animate: true,
shadow: true,
title: 'My Chart Title', //Set title here
-------------------
-------------------
}
I am trying to add tooltips to my ExtJS chart. The tooltip is getting rendered but not under the mouse pointer. It is getting rendered near end of the page.
Ext.create('Ext.chart.Chart', {
renderTo: Ext.getBody(),
width: 470,
height: 300,
store: store,
axes: [{
type: 'Numeric',
minimum: 0,
minorTickSteps: 0,
maximum: 150,
position: 'left',
fields: ['lineY', 'greenY', 'yellowY', 'redY'],
title: 'Buffer Penetration'
}, {
type: 'Numeric',
position: 'bottom',
fields: ['lineX', 'areaX'],
title: 'Critical Chain Comp'
}],
series: [
{
type: 'area',
axis: 'left',
xField: 'areaX',
yField: ['redY']
},
{
type: 'area',
axis: 'left',
xField: 'areaX',
yField: ['yellowY']
},
{
type: 'area',
axis: 'left',
xField: 'areaX',
yField: ['greenY']
},
{
type: 'line',
axis: 'left',
fill: false,
// tip: 'This is a tip',
xField: 'lineX',
yField: 'lineY',
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function (storeItem, item) {
// calculate and display percentage on hover
this.setTitle("Tooltip Text");
}
}
}
]
});
I have my code here : http://jsfiddle.net/Abhishek1191/vdazU/1076/
I feel like I am doing something silly here or maybe there is some issue with the ExtJS library I am using. Help would be highly appreciated
As what the title suggest, is that I have a panel that will execute a command onRender to add items, like the code below, a treepanel. I wrapped treepanel in a layout - border and then on a vbox panel to be put on region west. Unfortunately the whole tree panel does not render. I inspected the HTML, and the elements are there but they are sort of disabled because the elements have that blurry font in the firebug. Why is it doing that? Please help.
Ext.define('anr.panels.report', {
extend : 'Ext.panel.Panel',
pageLimit : 15,
title : 'Report Generator',
layout : 'border',
border : false,
frame : true,
initComponent: function() {
this.callParent(arguments);
},
onRender:function() {
var me = this;
var store = Ext.create('Ext.data.TreeStore', {
root: {
expanded: true,
children: [
{ text: "detention", leaf: true },
{ text: "homework", expanded: true, children: [
{ text: "book report", leaf: true },
{ text: "algebra", leaf: true}
] },
{ text: "buy lottery tickets", leaf: true }
]
}
});
var reportItem = {
xtype: 'panel',
layout: 'vbox',
id:'westpanel',
region:'west',
width: 350,
height: 300,
minSize: 350,
maxSize: 350,
border: false,
split: true,
margin: '1 0 5 1',
items: [
{
border: false,
layout: 'border',
items:[
{
xtype: 'treepanel',
height: 250,
width: 200,
store: store,
id: 'menu-panel',
frame: false,
rootVisible: false
}
]
}
]
};
this.add(reportItem);
this.callParent(arguments);
}
});
Im not really sure why you are using the onRender method instead of placing the panels in the items but there are too many errors there anyway.
Every border panel needs height, width or flex and it is required to have one panel with the center region.
If you change your code to this, it will work but be careful with all these nested panels, it seems like you are getting lost.
CODE
var store = Ext.create('Ext.data.TreeStore', {
root: {
expanded: true,
children: [{
text: "detention", leaf: true
},{
text: "homework", expanded: true,
children: [{
text: "book report", leaf: true
},{
text: "algebra", leaf: true
}]
}, {
text: "buy lottery tickets",
leaf: true
}]
}
});
Ext.define('anr.panels.report', {
extend : 'Ext.panel.Panel',
width: 800,
height: 400,
border: true,
title : 'Report Generator',
layout : 'border',
items: [{
xtype: 'panel',
layout: 'vbox',
region:'west',
width: 350,
height: 300,
minSize: 350,
maxSize: 350,
border: false,
split: true,
margin: '1 0 5 1',
items: [{
xtype: 'panel',
border: false,
layout: 'border',
flex: 1,
width: 350,
items:[{
xtype: 'treepanel',
height: 250,
width: 200,
store: store,
id: 'menu-panel',
region: 'center',
frame: false,
rootVisible: false
}]
}]
},{
xtype : 'panel',
region: 'center'
}]
});
Ext.create('anr.panels.report',{
renderTo: Ext.getBody()
});
Hi I am having a hard time to figure out what's wrong on sencha-chart is this a bug or just a syntax error. To start I have an application which uses the new sencha-charts of extjs 5. After I adjusted I came up with the ff codes which is working already problem is when I add listener to it, the listener event is not working. Please can anyone help me on this.:
items: [{
cls: 'chartclass',
xtype: 'chart',
flex: 1,
interactions: [{
type: 'panzoom',
zoomOnPanGesture: false,
axes: {
left: {
maxZoom: 1
}
}
}],
bind: '{chartstore}',
minHeight: 350,
animation: true,
style: 'background: #fff',
insetPadding: '40px 40px 20px 30px',
width: '100%',
height: 500,
insetPadding: 40,
interactions: 'itemhighlight',
axes: [{
type: 'numeric',
position: 'left',
fields: ['utilcost'],
fontSize: 12,
grid: true,
minimum: 0
}, {
type: 'category',
position: 'bottom',
fields: ['date'],
label: {
rotate: {
degrees: -90
}
}
}],
//series
series: [{
type: 'bar',
xField: ['date'],
yField: ['utilcost'],
style: {
minGapWidth: 15,
opacity: 0.80
},
highlight: {
strokeStyle: 'black',
fillStyle: '#c1e30d',
lineDash: [5, 3]
},
tooltip: {
trackMouse: true,
style: 'background: #fff',
renderer: function(storeItem, item) {
var title = item.series.getTitle();
this.setHtml(storeItem.get(item.series.getYField()));
}
},
label: {
field: 'utilcost',
display: 'insideEnd'
},
listeners:{
itemmouseup: function(item){
alert('working');
}
}
}];
No error on the console log. all elements are working except firing the event.Please please help. I've tried a lots of solution already but none of those work.
Thank you
I've been digging my mind all this morning to find the solution to this, I have an Extjs window where I want to put a chart as an item. I'm using Extjs 4, here's my window :
Ext.define('Metrics.view.ChartWin', {
extend: ['Ext.window.Window'],
alias: 'widget.chartwin',
requires :['Ext.chart.*','Ext.Window', 'Ext.fx.target.Sprite', 'Ext.layout.container.Fit', 'Ext.window.MessageBox', 'Metrics.view.DrawChart'],
width: 800,
height: 600,
minHeight: 400,
minWidth: 550,
hidden: false,
shadow: false,
maximizable: true,
title: 'Area Chart',
renderTo: Ext.getBody(),
layout: 'fit',
tbar: [{
text: 'Save Chart',
handler: function() {
Ext.MessageBox.confirm('Confirm Download', 'Would you like to download the chart as an image?', function(choice){
if(choice == 'yes'){
chart.save({
type: 'image/png'
});
}
});
}
}],
items:[{
//I guess the problem comes from here??
xtype : 'drawchart'
}]
});
My chart :
Ext.define('Metrics.view.DrawChart', {
extend: 'Ext.chart.Chart',
alias: 'widget.drawchart',
requires: ['Ext.chart.*'],
renderTo: Ext.getBody(),
width: 700,
height: 600,
animate: true,
store: 'GraphData',
shadow : true,
legend: {
position: 'right'
},
axes: [
{
title: 'Week',
type: 'Numeric',
position: 'left',
fields: ['Week'],
grid : true
},
{
title: 'In Out Backlog',
type: 'Numeric',
position: 'bottom',
fields: ['BL1 Alt']
}
],
theme: 'Red',
series: [
{
//BLA BLA BLA
}]
});
My chart works fine. Now please tell me, how do I add this chart to my window ? I get this error message :
Cannot read property 'isInstance' of undefined
Thank you.
Remove
renderTo: Ext.getBody()
from your chart definition. The Chart should be rendered in the window.
Then instantiate a window and set the chart as an item there:
Ext.create('Ext.window.Window', {
...
items: [{
xtype: 'drawchart'
}]
...
Look at the code here: http://jsfiddle.net/AMx6r/1282/