I would like to change color of chart in extjs type ='pie'.
Can I use renderer in the series block please see the example:
..... },
series : [ {
type : 'bar',
axis : 'bottom',
gutter : 0,
groupGutter : 0,
yField : this.fields,
title : this.fieldTitles,
stacked : true,
fill: true,
scope: this,
renderer: function(sprite, record, attr, index, store) {
var color = this.fieldColors[index];
return Ext.apply(attr, {
fill: color
});
},.....
Instead of a custom renderer, you can use the colorSet property for your series.
series: [{
colorSet: this.fieldColors,
...
}]
See http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.chart.series.Pie-cfg-colorSet
Related
I am currently trying to use mixed chart types with vue-chartjs for a bar chart and a line chart(vue-chartjs#4.1.2, vuejs#2.6.14, chartjs#3.0.0).
As you can see in the following image the grid for the line chart (colored red) is not aligned with the grid for the bar chart.
mixed chart types
How I'm implementing the mixed chart types
const
chartContainer = this.chartContainer = this.chartContainer || document.createElement('canvas'),
data = {
datasets : [
{
data : rcd.getLineData(tAx.records),
borderColor : '#ff9e9e',
hoverBackgroundColor : '#ff0000',
fill : false,
stepped : 'end',
type : 'line',
xAxisID: 'xLine',
radius: 0,
},
{
data : rcd.getBarData(tAx.records, record, tAxs),
borderColor : '#ff9e9e',
backgroundColor : 'rgba(187,242,193,1)',
hoverBackgroundColor : '#a5eeac',
fill : true,
stepped : true,
type : 'bar',
barPercentage : 1.0,
categoryPercentage: 1.0,
xAxisID: 'xBar'
}
};
chartContainer.setAttribute('height', 100);
chartContainer.setAttribute('width', tAxModel.totalSize);
this.element.appendChild(chartContainer);
this.chart = new Chart(
chartContainer,
{
drawBorder : false,
data,
options : {
responsive : false,
animation : {
duration : 0
},
elements : {
point : {
radius : 0,
hoverRadius : 0
}
},
layout : {
padding : {
top : 5,
left : -10,
bottom : -19
}
},
plugins : {
legend : {
display : false
}
},
scales : {
xLine : {
offset: false,
grid : {
display : true,
offset : true,
color: 'red'
},
ticks : {
display : false,
}
},
xBar : {
grid : {
display : true,
offset : true
},
ticks : {
display : false,
}
},
y : {
borderWidth : 0,
min : 0,
ticks : {
display : false,
borderWidth : 0,
},
grid : {
borderWidth : 0,
display : true
}
},
},
tooltips: {
mode: 'index'
},
interaction : {
mode: 'index',
intersect : false,
axis : 'x'
}
},
}
);
Both charts get arrays with the same length and the same x-values for each item.
For example bar and line chart receive an array with values like {x: 'February 13, 2023', y: (value for bar or line chart)}
Logging this.chart and this.chart._sortedMetaSets I kind of found out that the difference for one pointElement to the next pointElement for line charts data is not equal to bar charts data.
For instance line charts pointElements: {x: 0, ...}, {x: 71.25, ...} -> it's 71.25 - but for bar charts pointElements: {x: 35, ...}, {x: 105, ...} -> it's 70.
Furthermore I found that the categoryScale for bar chart has difference to the line charts categoryScale.
Examples are _gridLineItems, _valueRange and _startValue.
Is there anything wrong in my implementation or my data?
Thank you in advance!
I want to fix my table/grid header in my ExtJs 4.2 application, so that the header is allways visible, while scroling. The main grid in my application has a fixed header and is implemented as in the code in the bottom of this post.
It is not working and I don't know why...
I tried it with the split attribute, but it isn't working, too... :(
This is the code:
function openThePopup() {
var win = new Ext.Window({
modal : true,
height : 500,
width : 900,
plain : true,
border : false,
resizable : false,
maximizable : false,
draggable : true,
closable : true,
closeAction : 'destroy',
title : 'Title',
autoScroll : true,
buttonAlign : 'center',
items : [ {
xtype : 'grid',
id : 'theGrid',
store : theStore,
border : 0,
layout : 'fit',
margins : '5 0 0 0',
split : true,
columns : [ {
text : 'Country',
dataIndex : 'country'
}, {
text : 'City',
dataIndex : 'city'
}, {
text : 'ZIP',
dataIndex : 'zip'
}, {
text : 'Street',
dataIndex : 'street',
width : 200
}, {
text : location,
dataIndex : 'name',
width : 200
} ],
listeners : {
itemdblclick : function(t, record, item, index, e, eOpts) {
...
}
}
} ],
buttons : [ {
onClick : function() {
...
}
} ]
}).show();
}
I appriciate any help.
Thank you very much in advance.
Best wishes to all of you.
Your layout isn't configured correctly. The layout: 'fit' should go on the window and the layout configuration should be removed from the grid. Also remove the autoScroll config on the window.
If FocusManager is enabled, then hiding a grid column via the menu header causes the location hash to change. This does not happen if FocusManager is not enabled. I tried overriding Ext.menu.Item onClick in order to stopEvent, but that doesn't work, because it looks like the browser click event is inaccessible because EventManager is wrapping the listener and replacing it with an EventObject focus event.
Here is example code (also at http://jsfiddle.net/jacobg/8X3qw/). You can see console log of location hash change, and try with both FocusManager.enable commented out and uncommented:
window.onhashchange = function () {
console.log('hash changed to: ' + location.hash);
};
Ext.define('Company', {
extend: 'Ext.data.Model',
fields: [
{name: 'company'},
{name: 'price', type: 'float', convert: null, defaultValue: undefined},
{name: 'change', type: 'float', convert: null, defaultValue: undefined},
{name: 'pctChange', type: 'float', convert: null, defaultValue: undefined},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia', defaultValue: undefined}
],
idProperty: 'company'
});
Ext.onReady(function() {
//Ext.FocusManager.enable();
// sample static data for the store
var myData = [
['3m Co', 71.72, 0.02, 0.03, '9/1 12:00am'],
['Alcoa Inc', 29.01, 0.42, 1.47, '9/1 12:00am'],
['Altria Group Inc', 83.81, 0.28, 0.34, '9/1 12:00am']
];
// create the data store
var store = Ext.create('Ext.data.ArrayStore', {
model: 'Company',
data: myData
});
// create the Grid
var grid = Ext.create('Ext.grid.Panel', {
renderTo: Ext.getBody(),
store: store,
columns: [
{
text : 'Company',
flex : 75,
sortable : false,
dataIndex: 'company'
},
{
text : 'Price',
width : 50,
sortable : true,
renderer : 'usMoney',
dataIndex: 'price'
},
{
text : 'Change',
width : 50,
sortable : true,
dataIndex: 'change'
}
],
height: 200,
width: 400,
title: 'Array Grid'
});
});
Indeed hash is changing in that case. To bypass this, you can create override of onColumnCheckChange method on Ext.grid.header.Container class and prevent default on mouse event there. You can do so for example by providing config of header container in columns config property of grid. Example:
var grid = Ext.create('Ext.grid.Panel', {
columns: {
items: [...],
onColumnCheckChange: function(checkItem, checked) {
Ext.grid.header.Container.prototype.
onColumnCheckChange.apply(this, arguments);
window.event.preventDefault();
}
}
});
Working sample: http://jsfiddle.net/VQN3H/5/
in Sencha Touch 2.1 how can I load the chart dynamically from json, also with dynamic fields store, chart axes, and chart series,
I know maybe this is too much, but I need to display many kind of data, If I create 1 chart component for each display means I have to create more than 15 chart component, I'm afraid it get bloated
I did not complete this dynamically, but I made it seem dynamic.
I first request a user to fill out a form.
I also have multiple panels that holds charts with empty stores, in the form of several different layouts.
Based on the user's form, I show and hide panels, or chart when they need to be displayed only after loading the store with the required data.
yes it is bulky, and they are static, but I found it slightly easier to handle than dynamically loading.
EDIT
After thinking,
have you tried a function like
function dynamiccharts(var1, var2, var3){
return Ext.chart.Chart({
....
})
}
variables would include things like data, url, store or etc.
This is my example creating a chart on controller inside a panel: axis, series, store fields, url are became parameters, PAR_FORM is global variable showing the difference between views, I'm using this code for another chart (Column, Pie)
Ext.define("Geis.controller.app", {
extend: "Ext.app.Controller",
config: {
refs: {
mainview: 'mainview',
barchartview: 'barchartview',
btnShowChartAnggaran: '#btnShowChartAnggaran'
},
control: {
'btnShowChartAnggaran': {
tap: 'onShowChartAnggaran'
}
}
}
createBarChart: function(fields, series_xfield, series_yfield, url) {
this.getBarchartview().add(new Ext.chart.CartesianChart({
id: 'barchartgenerateview',
store: {
fields: fields,
proxy: {
type: 'jsonp',
url: url
}
},
background: 'white',
flipXY: true,
colors: Geis.view.ColorPatterns.getBaseColors(),
interactions: [
{
type: 'panzoom',
axes: {
"left": {
allowPan: true,
allowZoom: true
},
"bottom": {
allowPan: true,
allowZoom: true
}
}
},
'itemhighlight'
],
series: [{
type: 'bar',
xField: series_xfield,
yField: series_yfield,
highlightCfg: {
strokeStyle: 'red',
lineWidth: 3
},
style: {
stroke: 'rgb(40,40,40)',
maxBarWidth: 30
}
}],
axes: [{
type: 'numeric',
position: 'bottom',
fields: series_yfield,
grid: {
odd: {
fill: '#e8e8e8'
}
},
label: {
rotate: {
degrees: -30
}
},
maxZoom: 1
},
{
type: 'category',
position: 'left',
fields: series_xfield,
maxZoom: 4
}]
}));
Ext.getCmp('barchartgenerateview').getStore().load();
},
onShowChartAnggaran: function() {
this.getBarchartview().remove(Ext.getCmp('barchartgenerateview'), true);
if (PAR_FORM == 'Dana Anggaran') {
this.createBarChart(['kode', 'keterangan', 'nilai'], 'keterangan', 'nilai',
Geis.util.Config.getBaseUrl() + 'anggaran/laporan/json/get_dana_anggaran_json/');
} else if (PAR_FORM == 'Alokasi Anggaran') {
this.createBarChart(['kode', 'keterangan', 'belanja_pegawai', 'belanja_barang', 'belanja_modal'],
'keterangan', ['belanja_pegawai', 'belanja_barang', 'belanja_modal'],
Geis.util.Config.getBaseUrl() + 'anggaran/laporan/json/get_alokasi_json/');
}
this.getMainview().animateActiveItem(1, {type:'slide', direction:'left'});
}
});
base on my experiment if you want to activate the interactions features you need to set the chart id dynamically too, for example by creating Global Counter Variable
I am creating a segmented button and i need to modify the app based on the value of the segmented button.
{
margin : '5 -5 0 25',
xtype: 'segmentedbutton',
allowMultiple: true,
height : 40,
id : 'fontStyleBtn',
items: [
{
text: 'B',
width : 50,
style: 'background-color:red !important',
action : 'boldText'
},
{
text: 'I',
width : 50,
style: 'font-size:14px;font-style:italic;background-color:#008c99',
action : 'italicText'
},
{
text: 'U',
width : 50,
style: 'font-size:14px;background-color:#008c99;text-decoration:underline',
action : 'underlineText'
}
]}
when i tap on B, the text in my app is getting bold. But i need to set a value to it, so that next time i tap on it, i can reset the text to normal.
Ext.getCmp('fontStyleBtn').getItems()[0].pressed = true;
This doesn't seem to be working for me.
Does Ext.getCmp('fontStyleBtn').getItems()[0] exactly return the "B" button?
If yes, try this instead:
Ext.getCmp('fontStyleBtn').getItems()[0].setPressed(true);