On left side, there are duplicated number, I don't know why? how can make it to display only single each number? 0,1,2 and only.
and the grid show on the bar, How can I make it place behind chart?
Code
axes: [{
type: 'Numeric',
position: 'left',
fields: ['inCnt'],
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
title: 'In Transaction Qty',
grid: true,
minimum: 0
}, {
type: 'Category',
position: 'bottom',
fields: ['month'],
title: 'Current 12 Month'
}],
series: [{
type: 'column',
axis: 'left',
highlight: true,
tips: {
trackMouse: true,
width: 130,
height: 40,
renderer: function (storeItem, item) {
this.setTitle(storeItem.get('inCnt') + ' transaction(s) in '+storeItem.get('month'));
}
},
label: {
display: 'insideEnd',
'text-anchor': 'middle',
field: 'inCnt',
renderer: Ext.util.Format.numberRenderer('0'),
orientation: 'vertical',
color: '#333'
},
xField: 'month',
yField: 'inCnt'
}]
JSON Data
[
{ "month" : "Nov", "inCnt" : 0 },
{ "month" : "Oct", "inCnt" : 2 },
{ "month" : "Sep", "inCnt" : 0 },
{ "month" : "Aug", "inCnt" : 0 },
{ "month" : "Jul", "inCnt" : 0 },
{ "month" : "Jun", "inCnt" : 3 },
{ "month" : "May", "inCnt" : 0 },
{ "month" : "Apr", "inCnt" : 0 },
{ "month" : "Mar", "inCnt" : 0 },
{ "month" : "Feb", "inCnt" : 0 },
{ "month" : "Jan", "inCnt" : 0 },
{ "month" : "Dec", "inCnt" : 0 }
]
Because you're using a renderer on the axis that truncates the decimal points, so
1.8
1.6
1.4
1.2
Becomes
1
1
1
1
Related
I want to develop an echart that has the area between 2 linecharts highlighted in a color. To achieve this, I made use of stacked area chart. I set the color of the upper area as the highlight color and color of lower area as white so as to achieve my result. However, the color of bigger area is merging with the lower area and producing a diff color. How can I set the colors of 2 areas to not interfere? Is there a way to give z-index to the areas for this?
Here is my code:
option = {
title: {
text: '堆叠区域图'
},
tooltip : {
trigger: 'axis',
axisPointer: {
type: 'cross',
}
},
legend: {
data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']
},
toolbox: {
feature: {
saveAsImage: {}
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis : [
{
type : 'category',
boundaryGap : false,
data : ['周一','周二','周三','周四','周五','周六','周日']
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'联盟广告',
type:'line',
smooth: true,
areaStyle: {color: 'red'},
data:[170, 182, 161, 184, 160, 180, 165]
},
{
name:'邮件营销',
type:'line',
smooth: true,
areaStyle: {color: 'white'},
data:[120, 132, 111, 134, 110, 130, 115]
}
]
};
What I have achieved:
You need to increase the opacity of the below chart:
option = {
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
z: -1, // optional, makes the yAxis' splitLines appear on top
data: [170, 182, 161, 184, 160, 180, 165],
smooth: true,
type: 'line',
areaStyle: {}
},
{
z: -1, // optional, makes the yAxis' splitLines appear on top
data: [120, 132, 111, 134, 110, 130, 115],
smooth: true,
type: 'line',
areaStyle: {
color: 'rgb(243, 243, 243)', // color of the background
opacity: 1, // <--- solution
},
}
]
};
The above answer only works if the series do not cross the X axis. Here is the configuration that works if your data is both above and below 0 for both upper and lower boundaries:
data = [{
"date": "2012-08-28",
"l": -2.6017329022,
"u": 0.2949717757
},
{
"date": "2012-08-29",
"l": 0.1166963635,
"u": 0.4324086347
},
{
"date": "2012-08-30",
"l": -0.8712221305,
"u": 0.0956413566
},
{
"date": "2012-08-31",
"l": -0.6541832008,
"u": 0.0717120241
},
{
"date": "2012-09-01",
"l": -1.5222677907,
"u": -0.2594188803
},
{
"date": "2012-09-02",
"l": -1.4434280535,
"u": 0.0419213465
},
{
"date": "2012-09-03",
"l": -0.3543957712,
"u": 0.0623761171
}];
myChart.setOption(option = {
xAxis: {
type: 'category',
data: data.map(function (item) {
return item.date;
})
},
yAxis: {
},
series: [
{
z: -1,
name: 'U',
type: 'line',
data: data.map(function (item) {
return item.u;
}),
lineStyle: {
opacity: 0
},
areaStyle: {
color: '#ccc',
origin: "start"
},
symbol: 'none'
},
{
name: 'L',
type: 'line',
data: data.map(function (item) {
return item.l;
}),
lineStyle: {
opacity: 0
},
z: -1,
areaStyle: {
color: "white",
origin: "start",
// opacity: 1
},
symbol: 'none'
}]
});
Create a third series with the difference between the minimum and maximum values. This data series is used only to be able to color the area between minimum and maximum values.
The stackStrategy option works from version v5.3.3
let max = [10, 22, 28, 20, 23];
let min = [8, 15, 23, 18, 19];
let dif = max.map((v, i) => min[i] - v); // [-2, -7, -5, -2, -4]
option = {
xAxis: {
data: ['A', 'B', 'C', 'D', 'E']
},
yAxis: {},
tooltip: {
trigger: 'axis',
},
series: [
{
data: max,
type: 'line',
stack: 'x', // stack name
},
{
data: dif,
type: 'line',
stack: 'x', // stack name
stackStrategy: 'positive', // strategy
lineStyle: {
opacity: 0 // hide line
},
symbol: 'none', // hide symbol
areaStyle: {
color: '#ccc'
},
tooltip: {
show: false // hide value on tooltip
}
},
{
data: min,
type: 'line',
},
]
};
I am trying to add infinite scrolling to ag-grid-vue. But failed to do so.
I have the data from api and for every scroll, I need to get 50 more from the server and try to reload the grid. Plunker :
https://plnkr.co/edit/t8m2KgmuEcGB5pxBuMdA?p=preview
Attaching the code used:
https://github.com/ag-grid/ag-grid-vue-example
Please help me to include infinite scroll with an api on the rich grid from above example.
ag-grid-vue-example/src/rich-grid-example/RichGridExample.vue
var columnDefs = [
{headerName: "ID", width: 50,
valueGetter: 'node.id',
cellRenderer: 'loadingRenderer'
},
{headerName: "Athlete", field: "athlete", width: 150},
{headerName: "Age", field: "age", width: 90},
{headerName: "Country", field: "country", width: 120},
{headerName: "Year", field: "year", width: 90},
{headerName: "Date", field: "date", width: 110},
{headerName: "Sport", field: "sport", width: 110},
{headerName: "Gold", field: "gold", width: 100},
{headerName: "Silver", field: "silver", width: 100},
{headerName: "Bronze", field: "bronze", width: 100},
{headerName: "Total", field: "total", width: 100}
];
var gridOptions = {
components:{
loadingRenderer: function(params) {
if (params.value !== undefined) {
return params.value;
} else {
return '<img src="../images/loading.gif">'
}
}
},
enableColResize: true,
rowBuffer: 0,
debug: true,
rowSelection: 'multiple',
rowDeselection: true,
columnDefs: columnDefs,
rowModelType: 'infinite',
paginationPageSize: 100,
cacheOverflowSize: 2,
maxConcurrentDatasourceRequests: 2,
infiniteInitialRowCount: 1,
maxBlocksInCache: 2
};
document.addEventListener('DOMContentLoaded', function() {
var gridDiv = document.querySelector('#myGrid');
new agGrid.Grid(gridDiv, gridOptions);
agGrid.simpleHttpRequest({url: 'https://raw.githubusercontent.com/ag-grid/ag-grid-docs/master/src/olympicWinners.json'}).then(function(data) {
var dataSource = {
rowCount: null, // behave as infinite scroll
getRows: function (params) {
console.log('asking for ' + params.startRow + ' to ' + params.endRow);
setTimeout( function() {
var rowsThisPage = data.slice(params.startRow, params.endRow);
var lastRow = -1;
if (data.length <= params.endRow) {
lastRow = data.length;
}
params.successCallback(rowsThisPage, lastRow);
}, 500);
}
};
gridOptions.api.setDatasource(dataSource);
});
});
I have an app that worked great for 2.0p5. I was able to set the various columns in the chart specific colors. In the chart config, I added
colors: [
'#89A54E',
'#4572A7',
'#AA4643'
],
When I upgraded to 2.0rc1, the colors no longer seem to get set. My chart config is:
Ext.create('Rally.ui.chart.Chart', {
animate: true,
chartData: {
series: [{
type: 'column',
name: 'Data1',
data: data1
},
{
type: 'column',
name: 'Data2',
data: data2
},
{
type: 'column',
name: 'Data3',
data: data3
}],
categories: xAxisData
},
chartConfig: {
chart: {
type: 'column'
},
title: {
text: 'Show Data'
},
yAxis: {
min: 0,
title: {
text: 'yAxis Info'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: 'gray'
}
}
},
legend: {
align: 'right',
x: -100,
verticalAlign: 'top',
y: 20,
floating: true,
backgroundColor: 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
formatter: function() {
return '<b>'+ this.x +'</b><br/>'+
this.series.name +': '+ this.y +'<br/>'+
'Total: '+ this.point.stackTotal;
}
},
colors: [
'#89A54E',
'#4572A7',
'#AA4643'
],
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: 'white'
}
}
}
}
});
Any ideas why I lost my color setting capabilities in 2.0rc1?
An example from one of my apps:
var series = [{
name : 'Col 1',
data : [],
showInLegend : false
},{
name : 'Col 2',
data : [],
showInLegend : false
},{
name : 'Col 3',
data : [],
showInLegend : false
}];
Ext.Array.each(records, function(record) {
//HighCharts Data
record.set('name', ...);
record.set('y', ...);
record.set('color', ...);
//Add record to series
series[index].data.push(record.data);
// Add to chartData
});
Hope this helps/works for you!
I am trying to put 2 charts next to each other, just like the Yearly view in the example EnergyApp. My code I use for initiating the charts and putting them into the Panel is as follows:
var salesChart = new Ext.Panel({
title: 'Sales',
iconCls: 'line',
cls: 'chartpanel',
layout: {
type: 'hbox',
align: 'stretch'
},
items: [{
flex: 1,
xtype: 'chart',
cls: 'sales',
store: StoreDemo.stores.SalesStore,
shadow: true,
animate: true,
interactions: [{
type: 'iteminfo',
listeners: {
show: function(interaction, item, panel) {
// Can be used to pop-up more information or to load drill down chart
}
}
}, {
type: 'panzoom',
axes: ['bottom']
}],
axes: [{
type: 'Numeric',
position: 'left',
minimum: 0,
maximum: 1000,
fields: ['total'],
label: {
renderer: function(v) {
return v.toFixed(0);
}
},
title: 'Total'
},
{
type: 'Category',
position: 'bottom',
fields: ['month'],
label: {
renderer: function(v) {
return Date.monthNames[(v - 1) % 12];
}
},
title: 'Month of the Year'
}],
series: [{
type: 'column',
axis: 'left',
highlight: true,
label: {
field: 'total'
},
xField: 'month',
yField: 'total'
}, {
type: 'line',
highlight: {
size: 7,
radius: 7
},
fill: true,
axis: 'left',
smooth: true,
label: {
field: 'forecast'
},
xField: 'month',
yField: 'forecast'
}]
}, {
flex: 1,
xtype: 'chart',
cls: 'sales-forecast',
store: StoreDemo.stores.SalesForecastStore,
shadow: true,
animate: true,
interactions: [{
type: 'iteminfo',
listeners: {
show: function(interaction, item, panel) {
// Can be used to pop-up more information or to load drill down chart
}
}
}, {
type: 'panzoom',
axes: ['bottom']
}],
axes: [{
type: 'Numeric',
position: 'left',
minimum: 0,
maximum: 1000,
fields: ['total'],
label: {
renderer: function(v) {
return v.toFixed(0);
}
},
title: 'Total (Forecast)'
},
{
type: 'Category',
position: 'bottom',
fields: ['month'],
label: {
renderer: function(v) {
return Date.monthNames[(v - 1) % 12];
}
},
title: 'Month of the Year'
}],
series: [{
type: 'column',
axis: 'left',
highlight: true,
label: {
field: 'total'
},
xField: 'month',
yField: 'total'
}]
}]
});
StoreDemo.views.ChartView = new Ext.TabPanel({
tabBar: {
dock: 'top',
layout: {
pack: 'center'
}
},
ui: 'light',
cardSwitchAnimation: {
type: 'slide'
},
items: [salesChart]
});
The two charts overlap, but only the data, not the axes. Here is a screenshot from Chrome 14 (it also happens on Chrome 16 and Safari 5):
You can see that the right chart is empty since the data is displayed behind the left chart.
The same thing happens for 3 charts. I tried to set a fixed width and height instead of a flex number, but then the charts completely disappeared.
I searched Google and this forum and didn't find any topic to help me (I also read the articles in the Sencha Learn, and of course the source of the EnergyApp).
Your help is very appreciated.
Ofir
You can try to set the layout of items that under the panel as 'fit'.
Using ExtJS4, I need to draw a straight line across a column chart indicating the average of the series. Does anyone have know of an example of this or have a suggestion on how to do it?
I usually have the average value calculated on server side and held in the store. For exmaple, My store will be:
Ext.data.Store({
fields: ['name','active','avg'],
autoLoad: true,
proxy: {
type: 'ajax',
url : '/location/to/data'
}
})
The 'avg' holds the average value. The average line is drawn using the following series configuration:
{
type: 'line',
xField: 'name',
yField: 'avg',
showMarkers: false // Ensures that markers don't show up on the line...
}
Or we can calculate it on client side like this. Here is a working sample.
var container = Ext.create('Ext.Container', {
renderTo: Ext.getBody(),
width: 600,
height: 400,
layout: 'fit',
items: {
xtype: 'cartesian',
store: {
fields: ['month', 'value'],
data: [{
month: 'January',
value: 40
}, {
month: 'February',
value: 30
}, ]
},
axes: [{
id: 'left',
type: 'numeric',
position: 'left',
fields: 'value',
grid: true,
listeners: { // this event we need.
rangechange: function (axis, range) {
var store = this.getChart().getStore();
var tmpValue = 0, ortalama = 0, idx = 0;
store.each(function (rec) {
tmpValue = rec.get('value');
ortalama = tmpValue + ortalama;
idx++;
});
ortalama = (ortalama / idx).toFixed(2);
this.setLimits({
value: ortalama,
line: {
title: {
text: 'Average: ' + ortalama + ' USD'
},
lineDash: [2, 2]
}
});
}
}
}, {
id: 'bottom',
type: 'category',
position: 'bottom',
fields: 'month'
}],
series: {
type: 'bar',
xField: 'month',
yField: 'value',
label: {
field: 'value',
display: 'outside',
orientation: 'horizontal'
}
}
}
});