I want to show node value in extjs 4 line chart - extjs

When we take mouse on line chart node then it is showing nodes values. Same thing i want to permanently without pointing to node.
My complete code is:
items:[{
xtype:'displayfield',
value:'Avg. Freight Percentage'
},{
xtype: 'linechart',
store: store30DaysTo180Days,
xField: 'days',
height:200,
yField: 'averageFreightPercentLast',
xAxis: new Ext.chart.CategoryAxis({ title: 'In Days', })
}]

The config label is for this purpose. Try something like:
series: [{
type: 'line',
axis: 'left',
markerConfig: {
type: 'cross'
},
highlight: true,
label: {
display: 'inside', // or 'rotate'
field: 'revenue',
'text-anchor': 'start'
// I found that undocumented property with values 'start', 'end' or 'middle'
},
tips: {
trackMouse: true,
width: 80,
height: 25,
renderer: function(storeItem, item) {
this.setTitle(item.value[1] + ' $</span>');
}
},
xField: 'month',
yField: 'revenue'
}]
For more information look at the docs for label.
Unfortunately, there are only few possibilities to style it. To get something good, you need to use the renderer function (this one really allows you to do all you can think of for a label).

Related

Ext JS chart Tooltip not rendering under mouse pointer

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

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.

ExtJS Column Chart with 2 Y axes

I'm trying to plot a column chart with 2 series and thus 2 Y axis, one in the left side and the other in the right side. But the columns display in the same place, on top of each others and not side by side. Do you have any idea how to fix this ?
Something like that :
Ext.onReady(function () {
var chart;
chart = new Ext.chart.Chart({
width: 800,
height: 600,
animate: true,
store: store1,
renderTo: Ext.getBody(),
shadow: true,
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'
}, {
type: 'Numeric',
position: 'right',
fields: ['data2'],
title: 'Test'
}],
series: [{
type: 'column',
axis: 'left',
highlight: true,
xField: 'name',
yField: 'data1'
}, {
type: 'column',
axis: 'right',
xField: 'name',
yField: 'data2'
}]
});
});
Thanks
Create a zero value entry into the store and append it to the first and second series items. The number of additions depends on the length of series yField items of the other axes.
For example, creating two series items having yField respectively as below:
yField: ['data1', 'data2','data4']
and
yField: ['data4','data4','data3']
where data4 is a zero value entry in the store.
The solution worked perfectly. :)
This will add two columns for the left axis and a third one for the right axis:
series: [{
type: 'column',
axis: 'left',
highlight: true,
label: {
field: ['data1']
},
xField: ‘name’,
yField: ['data1', 'data2','whateverUndefinedFieldNameYouComeUpWith'] // Use an undefined field
},{
type: 'column',
axis: 'right',
highlight: true,
label: {
field: 'data3′
},
xField: 'name',
yField: ['name','name','data3'] // or just use the same field you use for the x axis
}]
I hope you get the idea.
AFAIK, you cannot have them side-by-side. The reason is they are not in the same series. When you have two data in same series, they get displayed side-by-side. In your case, you have two series.. one configured to use the left axis and other the right. I suggest you use a different type of chart for one of your series.
series: [{
type: 'line', // Instead of column chart I am using line chart...
axis: 'left',
highlight: true,
xField: 'name',
yField: 'data1'
}, {
type: 'column',
axis: 'right',
xField: 'name',
yField: 'data2'
}]

Hide the chart's series in ExtJs 4

I'm migrating ExtJs 3 application to ExtJs 4. One of the component that I need to change is a chart that has series of bars and lines on it. It displays the data for previous and current years. Beside the chart there is a checkbox "Compare to previous year". When it checked all line series should be visible and hidden when it is not checked.
In ExtJs 3 I did this task by setting visibility:hidden for series styles this way: chart.setSeriesStyles(...). But in ExtJs 4 this function is absent and I can't find any other way to hide series on demand.
Here is the code of my chart:
var store = Ext.create('Ext.data.Store', {
fields: [
'month','data1','data2','data3','prev_data1','prev_data2','prev_data3'
],
proxy: {
type: 'ajax',
url: '/getmonthlystats.php'
}
});
this.statChart = Ext.create('Ext.chart.Chart', {
flex: 1,
store: store,
axes: [{
type: 'Numeric',
position: 'left',
minimum: 0,
maximum: 100,
fields: [
'data1',
'data2',
'data3',
'prev_data1',
'prev_data2',
'prev_data3'
],
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
grid: true
},{
type: 'Category',
position: 'bottom',
fields: ['month'],
label: {
rotate: {
degrees: 315
}
}
}],
series: [{
type: 'column',
yField: ['data1','data2','data3'],
xField: 'month'
},
{
type: 'line',
yField: 'prev_data1',
xField: 'month'
},{
type: 'line',
yField: 'prev_data2',
xField: 'month'
},{
type: 'line',
yField: 'prev_data3',
xField: 'month'
}]
});
So, the lines prev_data1, prev_data2, prev_data3 should be shown or hidden when needed (depending on the checkbox state). Does anyone know the way to do that?
Thanx.
Try this (sample from my code):
handler: function (checkbox, checked) {
if (checked)
chart.series.getAt(index).showAll();
else
chart.series.getAt(index).hideAll();
}
For ExtJS 4.2.x
If you use 'legend' with your charts, this code will be better for you:
var chart = Ext.getCmp(chartId);
var series = chart.series.getAt(seriesIndex);
if (value) {
series.showInLegend = true;
series.showAll();
} else {
series.showInLegend = false;
series.hideAll();
}
chart.redraw();

Resources