Zooming a specific series with Sencha Charts - extjs

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.

Related

How to show yAxis value for multiple line

I am using echart for display line chart.
In this chart yAxis values are not ploting for red line.
As you can see in tooltip value of green line is match position. At this point red line must be blow 9000.
How can i set yAxis value for multiple line.
Hare is my echart code
<ReactEcharts
option={{
animationDuration: 1000,
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
toolbox: {
feature: {
saveAsImage: {}
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
boundaryGap: false,
data: usersData.indexes
}
],
yAxis: [
{
type: 'value',
}
],
series: [
{
name: 'Total new users',
type: 'line',
stack: 'Total',
data: [
5230,4963,5167,5715,5468,4752,9732,9312,8814,7900,6964,6889,7613,9363,5911],
smooth: false,
showSymbol: true,
},
{
name: 'India new Users',
type: 'line',
stack: 'Total',
data: [2515,2424,2691,2817,2687,2207,6769,4182,3941,3487,2716,2690,3381,4431,1493],
smooth: false,
showSymbol: true,
}
]
}}
/>

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.

I want to render line chart using grouping on particular field

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

Chart doesn't draw lines between the dots

I have an ExtJS Chart,
The chart doesn't draw lines between the dots...
this is my config:
{
title: 'Chart',
layout: 'fit',
items: [
{
xtype: 'chart',
itemId: 'chart',
animate: true,
store: me.IndexStatusStore,
axes: [
{
type: 'Numeric',
position: 'left',
fields: ['docsPerSec'],
label: {
renderer: function (v) {
return Ext.util.Format.number(v, '0');
}
},
title: 'Documents per second',
grid: true,
minimum: 0
},
{
type: 'Category',
position: 'bottom',
fields: ['now'],
title: 'Time running',
//minimum: 0 start time
label: {
renderer: function (v) {
return Ext.util.Format.date(new Date(v), 'H:i:s');
}
}
}
],
series: [
{
type: 'line',
axis: 'left',
xField: 'now',
yField: 'docsPerSec'
}
]
}
]
}
The chart is drawing the points correctly but the lines between them are missing. It might be worth mentioning that on an interval I update store's data, the chart updates automatically.
I've found the issue... It was my data. The first record had a very high value. It seems like the chart can't handle that. The reason why this high value was present was a miscalculation in the speed and it stayed like that because I kept the first record.

Ext.js chart series and axis

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.

Resources