I want to render line chart using grouping on particular field - extjs

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
});

Related

Zooming a specific series with Sencha Charts

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.

How to plot a rotated parabola using ExtJS?

I have to plot (something like) a rotated parabola using extjs charts (version 4.2.10).
I should draw something like this (just the curve):
But at best I can get is this (on jsfiddle).
var chartDataStore = Ext.create("Ext.data.ArrayStore", {
storeId: "chartData",
fields: [
{ name: "x", type: "integer" },
{ name: "y", type: "integer" }
],
data: [
[10,14],
[5,10],
[2,6.3],
[0,2],
[2,1],
[5,2]
]
});
var win = Ext.create("Ext.chart.Chart", {
width: 600,
height: 400,
hidden: false,
title: "Example chart",
renderTo: "demoChart",
layout: "fit",
style: "background:#fff",
animate: true,
store: chartDataStore,
shadow: true,
theme: "Category1",
legend: {
position: "bottom"
},
axes: [{
type: "Numeric",
minimum: 0,
position: "left",
fields: ["y"],
title: "Y",
minorTickSteps: 1,
grid: {
odd: {
opacity: 1,
fill: "#ddd",
stroke: "#bbb",
"stroke-width": 0.5
}
}
}, {
type: "Category",
position: "bottom",
fields: ["x"],
title: "X"
}],
series: [{
type: "line",
highlight: {
size: 7,
radius: 7
},
axis: "left",
smooth: true,
xField: "x",
yField: "y",
title: "Rotated Parabola (not working)",
markerConfig: {
type: "cross",
size: 4,
radius: 4,
"stroke-width": 0
},
}]
});
A collegue of mine suggested to use Highchart for ExtJS but we were not able to draw such plot. Note that the solution should run on IE9.
Any suggestion?
The problem here is that such curve has two values of y to one value of x and that cannot be achieved with line chart.
One possibility would be to draw a straight parabola with Ext chart and then rotate the whole chart with css transform.

Ext.chart.Chart Not Working

When i replace with Ext.chart.CartesianChart with Ext.chart.Chart its not working,Here the code,
CartesianChart chart
Ext.define("dashboard.view.HrsWorkedChart", {
extend: "Ext.chart.CartesianChart",
requires: [
"Ext.TitleBar",
"Ext.chart.CartesianChart",
"Ext.chart.series.Line",
"Ext.chart.axis.Numeric",
"Ext.chart.axis.Category",
"Ext.draw.sprite.Circle"
],
alias: "widget.hrsworkedchart",
config: {
flex: 1,
xtype: "chart",
store: "HrsAndValueByYear",
cls: "chart",
innerPadding: 20,
animate: true,
series: [
{
type: "line",
xField: "year",
yField: "hrsworked",
title: "Hours Worked",
style: {
stroke: "#003366",
lineWidth: 3
},
marker: {
type: "circle",
stroke: "#003366",
radius: 5,
lineWidth: 3
},
label: {
field: "hrsworked",
color: "#000",
display: "over",
font:"10px Helvetica"
}
},
{
type: "line",
xField: "year",
yField: "hrsbilled",
title: "Hours Billed",
style: {
stroke: "#6d0060",
lineWidth: 3
},
marker: {
type: "circle",
stroke: "#6d0060",
radius: 5,
lineWidth: 3
},
label: {
field: "hrsbilled",
color: "#000",
display: "over",
font: "10px Helvetica"
}
}
],
axes: [
{
type: "numeric",
position: "left",
title: {
fontSize: 15,
text: "Hrs"
},
minimum: 130000,
maximum: 180000,
grid: {
even: {
fill: "#f9f9f9"
}
}
},
{
type: "category",
position: "bottom"
}
]
}
});
Ext.Chart.Chart
Ext.define("dashboard.view.HrsWorkedChart", {
extend: "Ext.chart.Chart",
alias : "widget.hrsworkedchart",
flex: 1,
shadow: true,
animate: true,
store: "HrsAndValueByYear",
axes: [{
type: 'Numeric',
position: 'left',
fields: ['year'],
minimum: 0,
hidden: true
}, {
type: 'Category',
position: 'bottom',
fields: ['hrsworked'],
label: {
renderer: function(v) {
return Ext.String.ellipsis(v, 15, false);
},
font: '9px Arial',
rotate: {
degrees: 270
}
}
}],
series: [{
type: 'column',
axis: 'left',
highlight: true,
style: {
fill: '#456d9f'
},
highlightCfg: {
fill: '#a2b5ca'
},
label: {
contrast: true,
display: 'insideEnd',
field: 'year',
color: '#000',
orientation: 'vertical',
'text-anchor': 'middle'
},
xField: 'name',
yField: ['price']
}]
});
Whats wrong with my code.Please help me to solve
Couple of pointers
in axis config, the valid type is "numeric" , "category". You have it as upper case N and C.
Category axis should be years and numeric axis should be hrsworked.
i am not sure if there is a "column" series. Use "bar" instead.
you can see the sample here https://fiddle.sencha.com/#fiddle/51f and the code snippet below.
var store1 = Ext.create('Ext.data.Store', {
fields: ['year', 'hrsworked'],
data: [{
year: 2010,
hrsworked: 130000
}, {
year: 2011,
hrsworked: 140000
}, {
year: 2012,
hrsworked: 150000
}]
});
Ext.define("dashboard.view.HrsWorkedChart", {
extend: "Ext.chart.Chart",
requires: ["Ext.TitleBar", "Ext.chart.CartesianChart", "Ext.chart.series.Bar", "Ext.chart.series.Line", "Ext.chart.axis.Numeric", "Ext.chart.axis.Category", "Ext.draw.sprite.Circle"],
alias: "widget.hrsworkedchart",
config: {
flex: 1,
shadow: true,
animate: true,
store: store1,
cls: "chart",
innerPadding: 20,
animate: true,
series: [{
type: 'bar',
xField: 'year',
yField: ['hrsworked'],
style: {
fill: 'blue'
}
}],
axes: [{
type: "numeric",
position: "left",
minimum:0,
title: {
fontSize: 15,
text: "Hrs"
},
grid: {
even: {
fill: "#f9f9f9"
}
},
field: ['hrsworked']
}, {
type: "category",
position: "bottom",
label: {
font: '9px Arial',
rotate: {
degrees: 270
}
},
field: 'year'
}]
}
});

Ext.js Category axis vertical labels not centered after rotation

Similar to this post in the Sencha forums, how do I get the labels in this (image below) to show up vertically and line up with the grid? Seems like this should be charting basics, but maybe I missed something.
Here is the jsFiddle with the code: http://jsfiddle.net/wilsjd/kg6Ps/8/
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: 'PeriodAmount',
type: 'decimal'
}, {
name: 'CumulativeAmount',
type: 'decimal'
}]
});
var store1 = Ext.create('Ext.data.Store', {
model: 'CPI',
data: [{
ReportingPeriod: 'Period1',
PeriodAmount: 1,
CumulativeAmount: 1.2,
Target: 1
}, {
ReportingPeriod: 'Period2',
PeriodAmount: 1.2,
CumulativeAmount: .2,
Target: 1
}, {
ReportingPeriod: 'Period9',
PeriodAmount: 1.5,
CumulativeAmount: 0.8,
Target: 1
}]
});
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: ['PeriodAmount', 'CumulativeAmount'],
title: 'CPI'
},{
type: 'Category',
position: 'bottom',
fields: ['ReportingPeriod'],
title: 'Reporting Period',
label : {
rotation:{degrees:270}
}
}],
series: [{
type: 'column',
axis: 'left',
xField: 'ReportingPeriod',
yField: 'PeriodAmount',
renderer: function(sprite, record, attr, index, store) {
var value = 0;
if(record.get('PeriodAmount')>=1){
value = 0;
}else{
value = 1;
}
var color = ['rgb(127, 255, 127)',
'rgb(255, 0, 50)'
][value];
return Ext.apply(attr, {
fill: color
});
}
}, {
type: 'line',
axis: 'left',
xField: 'ReportingPeriod',
yField: 'CumulativeAmount',
markerConfig: {
type: 'circle',
size: 4,
radius: 4,
'stroke-width': 0,
}
}]
});
chart.show();
I changed rotation to rotate and it works.
label:{
rotate:{degrees:270}
}
Per usual, the people at sencha's forum are as helpful as a punch to the throat: http://www.sencha.com/forum/showthread.php?156746-line-chart-time-axis-label-rotate-issue&p=678586&viewfull=1#post678586
It appears to be set via dy attribute in the html:
<tspan x="96" dy="3.75">Period1</tspan>
Altering dy will move the h-pos left or right. Unfortunately, there doesn't seem to be an inbuilt way to do it though.
Bottom line: it might be a bug (as a dev mentions in the above link -- but helpfully doesn't expand upon).

values not correctly rendered in line chart in extjs?

I'm having trouble with result rendered by line chart example from extjs4
the columns are rendered correctly but the line is not, notice in the picture how i need to have 4 while its drawed in the 0 xpoint also the second plot is supposed to be 5 when its draw in 2:
here is my code:
panel3 = Ext.create('widget.panel', {
width: 600,
height: 200,
frame: false,
renderTo: 'line',
layout: 'fit',
items: {
xtype: 'chart',
animate: false,
store: storeline,
insetPadding: 20,
gradients: [{
angle: 90,
id: 'bar-gradient',
stops: {
0: {
color: '#99BBE8'//C12283
},
70: {
color: '#77AECE'
},
100: {
color: '#77AECE'
}
}
}],
axes: [{
type: 'Numeric',
minimum: 0,
maximum: 10,
position: 'left',
fields: ['data1'],
title: false,
grid: true,
label: {
renderer: Ext.util.Format.numberRenderer('0,0'),
font: '10px Arial'
}
}, {
type: 'Category',
position: 'bottom',
fields: ['name'],
title: false,
grid: true,
label: {
font: '11px Arial',
rotate: {
degrees: 300
}
}
}],
series: [{
type: 'column',
axis: 'left',
xField: 'name',
yField: 'data1',
display: 'over',
style: {
fill: 'url(#bar-gradient)',
'stroke-width': 30
} ,
markerConfig: {
type: 'circle',
size: 4,
radius: 4,
'stroke-width': 20,
fill: '#38FFFF',
stroke: '#38B8BF'
}
},
{
type: 'line',
axis: 'left',
xField: 'name',
yField: 'data2',
tips: {
trackMouse: true,
width: 110,
height: 25,
//baseCls: 'customtip', //bodyStyle: 'background:#6cc; ',
renderer: function (storeItem, item) {
this.setTitle(storeItem.get('name') + ' : ' + storeItem.get('data2'));
}
},
style: {
fill: '#18428E',
stroke: '#18428E',
'stroke-width': 3
},
markerConfig: {
type: 'circle',
size: 5,
radius: 5,
'stroke-width': 0,
fill: '#18428E',
stroke: '#18428E'
}
}]
}
});
In your axis definition try changing
fields: ['data1'],
to
fields: ['data1', 'data2'],
Also verify that the data being loaded into the data2 field is an actual integer. ExtJs might be reading it as a string and therefore is unable to match it with a value on the left axis.

Resources