I am trying to render sencha touch charts in an app,
following is the code of that view.
Ext.define('xxxx.view.dashboard.EventAnalyticsChart', {
extend : 'Ext.Panel',
xtype : 'analyticsChartPanel',
requires:['Ext.chart.grid.HorizontalGrid',
'Ext.chart.grid.VerticalGrid'],
initialize : function() {
},
config : {
layout:{
type:'card'
},
items : [
{
// Toolbar to be displayed on the File Rack Screen
xtype : 'toolbar',
ui : 'light',
docked : 'top',
title : "Dashboard",
},
{
xtype:'panel',
docked : 'top',
height:60,
layout:{
type:'vbox',
align:'center',
pack:'center'
},
items:[
{
xtype : 'chart',
background: 'white',
flipXY: true,
legend: {
position: "bottom"
},
store: {
fields: ['name', 'g1', 'g2', 'g3'],
data: [
{"name": "Work", "g1": 2.67, "g2": 14.87, "g3": 0.41},
{"name": "Office", "g1": 1.90, "g2": 5.72, "g3": 14.80},
{"name": "Google", "g1": 18.34, "g2": 0.04, "g3": 22.35},
{"name": "Facebook", "g1": 21.37, "g2": 2.13, "g3": 12.98},
]
},
interactions: ['panzoom'],
//set legend configuration
legend: {
position: 'right',
width: 80
},
//define the x and y-axis configuration.
axes: [
{
type: 'numeric',
position: 'bottom',
grid: true,
minimum: 0
},
{
type: 'category',
position: 'left'
}
],
series: [
{
type: 'bar',
xField: 'name',
yField: ['g1', 'g2', 'g3'],
axis: 'bottom',
highlight: true,
showInLegend: true,
style: {
stroke: 'rgb(40,40,40)',
maxBarWidth: 30
},
// Cycles the red, green, and blue fill mode over the 2008, 2009,.., 2011, 2012 items
// subStyle parameters also override style parameters
subStyle: {
fill: ["#115fa6", "#94ae0a", "#a61120", "#ff8809", "#ffd13e", "#a61187", "#24ad9a", "#7c7474", "#a66111"]
}
}
]
}
],
}
});
After building the sencha code, when the packaged code is run i get the below error.
Uncaught TypeError: Cannot call method 'substring' of undefined app.js:1
i think i am not loading some of the classes needed for the charts. Please do guide me with this.
thanks in advance.
Working fine after including following classes.
'Ext.chart.axis.Numeric',
'Ext.chart.axis.Category',
'Ext.chart.series.Line',
'Ext.chart.interactions.PanZoom',
'Ext.chart.series.Bar'
Related
I have to display a bar chart which has mixed data in the store with negative and positive values to be shown on y-axis. I want to display the chart like in this image: https://assets.highcharts.com/images/demo-thumbnails/highcharts/column-negative-default.png
var store = Ext.create('Ext.data.Store', {
fields: ['name','someField'],
data: [{
"name": "A",
"someField": -21414
}, {
"name": "B",
"someField": 22034
}, {
"name": "C",
"someField": -16270
}, {
"name": "D",
"someField": 20838
}, {
"name": "X",
"someField": 2720
}]
})
Ext.create('Ext.panel.Panel', {
items: [{
xtype: 'cartesian',
width: '100%',
height: 500,
store: store,
insetPadding: 40,
innerPadding: {
left: 40,
right: 40
},
axes: [{
type: 'numeric',
fields: 'someField',
position: 'left'
}, {
type: 'string',
fields: 'name',
position: 'bottom',
}],
series: [{
type: 'bar',
xField: 'name',
yField: 'someField',
}]
}]
});
The origin should be at 0.
I tried using postion:'radial' in place of 'bottom', but, using this removes the x-axis and also the labels are not seen.
How can I reverse the y-axis values so that they can be flipped below x-axis(upside down)?
I currently have a Sencha Line Chart which looks like this:
xtype: 'chart',
height: '100%',
store: 'ExperimentDataStore',
axes: [
{
type: 'numeric',
fields: [
'pmc1Value'
],
grid: true,
minimum: 0,
position: 'left',
title: 'PMC1Value'
},
{
type: 'numeric',
fields: [
'temperature'
],
position: 'left',
title: 'test'
},
{
type: 'numeric',
fields: [
'temperature'
],
position: 'left',
title: 'pmc6Value'
},
{
type: 'category',
fields: [
'timestamp'
],
title: 'Name'
}
],
series: [
{
type: 'line',
colors: [
'rgba(0,0,0,0.1)'
],
style: {
smooth: false,
stroke: '#000'
},
xField: 'timestamp',
yField: 'temperature'
},
{
type: 'line',
colors: 'rgba(0,200,0,0.3)',
style: {
smooth: true,
stroke: 'rgb(0,200,0)',
},
xField: 'timestamp',
yField: 'pmc1Value'
}
],
interactions: [
{
type: 'panzoom',
zoomOnPanGesture: true,
axes: {
top: false,
right: false,
bottom: false,
left: true
}
}
]
}
Currently the zoom action zooms the y Axis on the left side for all of my Chart series. But what I would like to achive is zooming only one specific Series and not all of them. Can this be done?
No, you can not use PanZoom on an individual Series. The PanZoom interaction is only configurable on the Axis level not the series level. Zooming an individual Series is not supported out of the box.
But assuming that it can be done, can you describe what behaviour you want to have by zooming on a specific series? Like how do you want to visualize the other series? you will have distorted scales.
Currently I am rendering single line chart using json data which is as follow :
{"eventType":"A","startOpen":"0","asOfDate":"21-OCT-13","intervalNo":0},
{"eventType":"A","startOpen":"47","asOfDate":"21-OCT-13","intervalNo":1},
{"eventType":"A","startOpen":"60","asOfDate":"21-OCT-13","intervalNo":2},
{"eventType":"B","startOpen":"79","asOfDate":"21-OCT-13","intervalNo":4},
{"eventType":"B","startOpen":"90","asOfDate":"21-OCT-13","intervalNo":6}
I am plotting graph startOpen against intervalNo. Now I want to plot the graph using grouping on eventType field. Means for above data two line should be drawn in single chart, one for eventType A and another for eventType B.
Appreciate your any kind of help. Thank you :)
My current code for chart :
Ext.define("TestBug.view.TrendsChart", {
extend: "Ext.chart.Chart",
alias: "widget.trendschart",
store: "Trends",
style: 'background:#fff',
animate: true,
shadow: true,
groupField:'eventType',
legend: {position: 'right'},
axes: [
{
type: "numeric",
position: "left",
fields: "intervalNo",
title:"Interval No",
grid: {
odd: {
opacity: 1,
fill: '#ddd',
stroke: '#bbb',
'stroke-width': 0.5
}
}
},
{
type: "numeric",
position: "bottom",
fields: "startOpen",
title: 'Start Open'
}
],
series: [
{
type: "line",
axis: "left",
xField: "startOpen",
yField: "intervalNo",
gField:'eventType',
markerConfig: {
type: 'circle',
size: 4,
radius: 4,
'stroke-width': 0
}
}
]
});
In order to plot multiple lines width different x values, you have to use multiple line series. Value points with value of undefined will be skipped, that is they won't be drawn in the chart.
Here's how to adapt your example data to do that (fiddle):
Ext.define("TestBug.view.TrendsChart", {
extend: "Ext.chart.Chart",
alias: "widget.trendschart",
store: {
fields: [
'eventType',
{name: 'startOpen', type: 'int'},
'asOfDate',
'intervalA',
'intervalB'
]
,data: [
{"eventType":"A","startOpen":"0","intervalA":0,"intervalB":undefined},
{"eventType":"A","startOpen":"47","intervalA":1,"intervalB":undefined},
{"eventType":"A","startOpen":"35","intervalA":undefined,"intervalB":2},
{"eventType":"B","startOpen":"79","intervalA":undefined,"intervalB":4},
{"eventType":"B","startOpen":"90","intervalA":undefined,"intervalB":6}
]
},
style: 'background:#fff',
animate: true,
shadow: true,
groupField: 'eventType',
legend: {
position: 'right'
},
axes: [{
type: "numeric",
position: "left",
fields: ["intervalA", "intervalB"],
title: "Interval No",
grid: {
odd: {
opacity: 1,
fill: '#ddd',
stroke: '#bbb',
'stroke-width': 0.5
}
}
},{
type: "numeric",
position: "bottom",
fields: "startOpen",
title: 'Start Open'
}],
series: [{
type: "line",
axis: "left",
xField: "startOpen",
yField: "intervalA",
title: "A"
},{
type: "line",
axis: 'left',
xField: 'startOpen',
yField: 'intervalB',
title: "B"
}]
});
Ext.widget('trendschart', {
renderTo: Ext.getBody()
,width: 600
,height: 300
});
Suppose I have some data that I want to display on an Ext.js bar chart and I want my data to revolve around a custom value, "1.0" for example, on the y-axis (versus traditionally "0.0").
Meaning, the picture below has negative values represented with inverted bars, I would like values less than "1.0" to show as an inverted bar on the chart.
Is there a setting that I can set to acheive this? If so, would it be in the series and the axis definition? Maybe the chart itself?
The code for the chart displayed is below:
Ext.require('Ext.chart.*');
Ext.require(['Ext.Window', 'Ext.fx.target.Sprite', 'Ext.layout.container.Fit', 'Ext.window.MessageBox']);
Ext.define('CPI', {
extend: 'Ext.data.Model',
fields: [{
name: 'ReportingPeriod',
type: 'string'
}, {
name: 'CPI_P',
type: 'decimal'
}, {
name: 'CPI_C',
type: 'decimal'
}]
});
var store1 = Ext.create('Ext.data.Store', {
model: 'CPI',
data: [{
ReportingPeriod: 'Period1',
CPI_P: '1.9',
CPI_C: '1.2'
}, {
ReportingPeriod: 'Period2',
CPI_P: '1.2',
CPI_C: '1.1'
}, {
ReportingPeriod: 'Period3',
CPI_P: '0.1',
CPI_C: '0.5'
}, {
ReportingPeriod: 'Period4',
CPI_P: '-0.5',
CPI_C: '0.6'
}, {
ReportingPeriod: 'Period5',
CPI_P: '-0.9',
CPI_C: '0.8'
}, {
ReportingPeriod: 'Period6',
CPI_P: '-1.0',
CPI_C: '-0.6'
}, {
ReportingPeriod: 'Period7',
CPI_P: '-1.1',
CPI_C: '-0.7'
}, {
ReportingPeriod: 'Period8',
CPI_P: '-1.5',
CPI_C: '-0.8'
}]
});
var chart = Ext.create('Ext.chart.Chart', {
style: 'background:#fff',
animate: true,
theme: 'Category1',
store: store1,
width: 300,
height: 300,
renderTo: 'chart',
axes: [{
type: 'Numeric',
position: 'left',
fields: ['CPI_P', 'CPI_C'],
title: 'CPI',
grid: true
}, {
type: 'Category',
position: 'bottom',
fields: ['ReportingPeriod'],
title: 'Reporting Period'
}],
series: [{
type: 'column',
axis: 'left',
xField: 'ReportingPeriod',
yField: 'CPI_P',
markerConfig: {
type: 'cross',
size: 3
},
renderer: function(sprite, record, attr, index, store) {
var value = (record.get('CPI_P') >> 2) % 2;
var color = ['rgb(213, 70, 121)',
'rgb(44, 153, 201)'
][value];
return Ext.apply(attr, {
fill: color
});
}
}]
});
chart.show();
UPDATE
If I add a minimum to y-axis I get closer (sort of)
...
axes: [{
type: 'Numeric',
position: 'left',
fields: ['CPI_P', 'CPI_C'],
title: 'CPI',
grid: true,
minimum: 1,
}....
It's the right idea, because the bars now are relevant to the number 1, but I obviously need to keep the bars on the graph.
What has seemed to work is subtracting 1 from my data and adding 1 to the labels.
axes: [{
type: 'Numeric',
position: 'left',
grid: true,
maximum: 1.0, //will render to 2.0
fields: ['PeriodAmount', 'CumulativeAmount'],
label:{
renderer:function(v){
return (v+1).toFixed(2);
}
}
}...]
This is a viable work around for me, but I wouldn't consider this an elegant answer since it isn't very configurable for custom values. For example, changing this to -1 or 2 would require more work than just changing a simple setting.
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/