I have a requirement in my application to create a line chart with multiple series. The problem is all the series starts from the same year. My requirement is to create a chart just like the example given at: jsfiddle.net/pyrliu/JPEEv/2/
var chartDataStore = Ext.create("Ext.data.ArrayStore", {
storeId: "chartData",
fields: [
{ name: "year", type: "integer" },
"country1",
{ name: "value1", type: "integer" },
"country2",
{ name: "value2", type: "integer" }
],
data: [
[1997,"USA",66,"Canada",53],
[1998,"USA",81,"Canada",67],
[1999,"USA",83,"Canada",46],
[2000,"USA",61,"Canada",45],
[2001,"USA",67,"Canada",53],
[2002,"USA",68,"Canada",43]
]
});
var win = Ext.create("Ext.chart.Chart", {
width: 600,
height: 400,
hidden: false,
title: "Example working 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: ["value1", "value2"],
title: "Value",
minorTickSteps: 1,
grid: {
odd: {
opacity: 1,
fill: "#ddd",
stroke: "#bbb",
"stroke-width": 0.5
}
}
}, {
type: "Category",
position: "bottom",
fields: ["year"],
title: "Year"
}],
series: [{
type: "line",
highlight: {
size: 7,
radius: 7
},
axis: "left",
smooth: true,
xField: "year",
yField: "value1",
title: "USA",
markerConfig: {
type: "cross",
size: 4,
radius: 4,
"stroke-width": 0
},
}, {
type: "line",
highlight: {
size: 7,
radius: 7
},
axis: "left",
smooth: true,
xField: "year",
yField: "value2",
title: "Canada",
markerConfig: {
type: "circle",
size: 4,
radius: 4,
"stroke-width": 0
}
}]
});
In the above example there are two series for USA and Canada. I need the data for Canada to be shown from year 2009. In the above example the data is from year 1997. I need one series to start from 1999 and the other from 1997. how to skip two values from the same store?
Are you looking for something like this jsFiddle? It's all in how your data is treated, and you need to treat null values as null values, not 0s, so that's where the convert function comes in to play. Props go to this SO answer.
// This is the juice to fix the problem
function convertInt(value) {
if (typeof value !== 'number') // or other similar conversion
return undefined;
return value;
}
var chartDataStore = Ext.create("Ext.data.ArrayStore", {
storeId: "chartData",
fields: [
{name: "year", type: "integer"},
"country1",
{name: "value1", type: "integer", convert: convertInt},
"country2",
{name: "value2", type: "integer", convert: convertInt}
],
data: [
[1997, "USA", 66, "Canada", null],
[1998, "USA", 81, "Canada", null],
[1999, "USA", 83, "Canada", 46],
[2000, "USA", 61, "Canada", 45],
[2001, "USA", null, "Canada", 53],
[2002, "USA", null, "Canada", 43]
]
});
var win = Ext.create("Ext.chart.Chart", {
width: 600,
height: 400,
hidden: false,
title: "Example working 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: ["value1", "value2"],
title: "Value",
minorTickSteps: 1,
grid: {
odd: {
opacity: 1,
fill: "#ddd",
stroke: "#bbb",
"stroke-width": 0.5
}
}
}, {
type: "Category",
position: "bottom",
fields: ["year"],
title: "Year"
}],
series: [{
type: "line",
highlight: {
size: 7,
radius: 7
},
axis: "left",
smooth: true,
xField: "year",
yField: "value1",
title: "USA",
markerConfig: {
type: "cross",
size: 4,
radius: 4,
"stroke-width": 0
},
}, {
type: "line",
highlight: {
size: 7,
radius: 7
},
axis: "left",
smooth: true,
xField: "year",
yField: "value2",
title: "Canada",
markerConfig: {
type: "circle",
size: 4,
radius: 4,
"stroke-width": 0
}
}]
});
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 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.
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'
}]
}
});
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
});
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.