I am trying to draw a bar graph with tge same code from http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.chart.series.Bar
var store = Ext.create('Ext.data.JsonStore', {
fields: ['name', 'data'],
data: [
{ 'name': 'metric one', 'data':10 },
{ 'name': 'metric two', 'data': 7 },
{ 'name': 'metric three', 'data': 5 },
{ 'name': 'metric four', 'data': 2 },
{ 'name': 'metric five', 'data':27 }
]
});
Ext.create('Ext.chart.Chart', {
renderTo: Ext.getBody(),
width: 500,
height: 300,
animate: true,
store: store,
axes: [{
type: 'Numeric',
position: 'bottom',
fields: ['data'],
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
title: 'Sample Values',
grid: true,
minimum: 0
}, {
type: 'Category',
position: 'left',
fields: ['name'],
title: 'Sample Metrics'
}],
series: [{
type: 'bar',
axis: 'bottom',
highlight: true,
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function(storeItem, item) {
this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data') + ' views');
}
},
label: {
display: 'insideEnd',
field: 'data',
renderer: Ext.util.Format.numberRenderer('0'),
orientation: 'horizontal',
color: '#333',
'text-anchor': 'middle'
},
xField: 'name',
yField: 'data'
}]
});
Even though the values get plotted, the actual graph is not visible. I tried various examples with the same result. In Fiddle it works fine but in my code, the graph doesn't get plotted at all. Can someone help?
http://jsfiddle.net/kavitaC/8ecc1kme/2/
Related
when I use more then five letters in my name it comes out of the chart see the image i uploaded i am using extjs 6 I just want to have a large name on my chart
{
xtype: 'polar',
split: true,
flex: 0.3,
colors: [
'#347327',
'#2897d2',
'#de6110',
],
bind: {
store: '{pie}'
},
series: [{
type: 'pie',
showInLegend: true,
donut: false,
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function(storeItem, item) {
this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data'));
}
},
highlight: {
segment: {
margin: 15
}
},
label: {
field: 'name',
display: 'rotate',
contrast: true,
font: '12px Arial'
},
xField: 'data'
}],
interactions: [{
type: 'rotate'
}]
}
here is My dynamically given names i want that names in side of my pie chart i mean above on the chart But when i use name that contain more then 5 letters it goes out side of the chart i will upload a image.
var pieStore = this.getViewModel().getStore('pie');
var rec = selected[0];
if (rec.get('new')) {
pieStore.add({
'name': 'NEW',
data: rec.get('new'),
total: rec.get('total')
});
}
if (rec.get('openToQc')) {
pieStore.add({
'name': 'QC',
data: rec.get('openToQc'),
total: rec.get('total')
});
}
if (rec.get('open')) {
pieStore.add({
'name': 'Open',
data: rec.get('open'),
total: rec.get('total')
});
}
if (rec.get('rejected')) {
pieStore.add({
'name': 'Rejected',
data: rec.get('rejected'),
total: rec.get('total')
});
}
The problem is on your series label:
label: {
field: 'name',
display: 'rotate',
contrast: true,
font: '12px Arial'
},
display: 'rotate', displays the label inside the chart in some cases and outside in others, you should use instead display: 'inside',
You can see a working example here
I have a chart retrieving data from my store, the four bits of information are the following
Model Code
Ext.define('QvidiApp.model.ClipsViews', {
extend: 'Ext.data.Model',
requires: [
'Ext.data.Field'
],
config: {
fields: [
{
name: 'meta_id'
},
{
name: 'title'
},
{
name: 'viewed'
},
{
name: 'glances'
}
]
}
});
Now I have the viewed field and the glances field as the numeric fields in the chart, and the title field as the category title in the chart.
I want to render the title name of the field when I hover over it, reason id this. The titles are too long to fit in the x-axis of the chart so in place of the titles I am putting 'meta_id'. So when I hover over the x-axis meta_id field I want the title name to be shown
so for example
meta_id 100 will equal title value ###
Here's is my chart code so far
{
xtype: 'chart',
centered: true,
height: '150%',
colors: [
'#24ad9a',
'#7c7474',
'#a66111'
],
store: 'ClipsViewed',
axes: [
{
type: 'category',
fields: [
'meta_id'
],
grid: true,
label: {
rotate: {
degrees: 0
},
font: '7px'
},
title: 'Clips'
},
{
type: 'numeric',
fields: [
'viewed'
],
grid: true,
position: 'left',
title: 'Amount'
}
],
series: [
{
type: 'bar',
renderer: function(sprite, config, rendererData, index) {
},
style: {
minGapWidth: 1,
minBarWidth: 60,
maxBarWidth: 70,
opacity: 0.80
},
xField: 'meta_id',
yField: [
'viewed',
'glances'
]
}
],
interactions: [
{
type: 'panzoom'
}
],
legend: {
xtype: 'legend'
}
}
As you can see in the above code I have a render function but I dont know what to put into it
Use tips for series
series: [
{
type: 'bar',
tips: {
trackMouse: true,
width: 74,
height: 38,
renderer: function(storeItem, item) {
this.setTitle(storeItem.get('meta_id') + '<br />' + storeItem.get('title'));
}
},
style: {
minGapWidth: 1,
minBarWidth: 60,
maxBarWidth: 70,
opacity: 0.80
},
xField: 'meta_id',
yField: [
'viewed',
'glances'
]
}
]
I am using Ext 5 and would like to color segments in a line chart based on the values. Show line in green color if value greater than the target otherwise red.
Is there any way to change the color of a line segment in Ext line chart based on its value?
I could find that there is no built-in way of doing this in sencha from this link
I have also tried add a line sprite dynamically over the line to make an impact of varying colors. It worked. But I was unable to find the exact x, y coordinates to draw this custom line dynamically.
This is the code I have tried so far.
Ext.onReady(function () {
var data = [{
'date': '1',
'data2': 4
}, {
'date': '2',
'data2': 8
}, {
'date': '3',
'data2': 12
}, {
'date': '4',
'data2': 6
}, {
'date': '5',
'data2': 36
}];
Ext.create('Ext.chart.Chart', {
renderTo: Ext.getBody(),
width: 500,
height: 300,
store: {
fields: ['name', 'data2'],
data: data
},
listeners: {
redraw: function(){
var chart = this;
var series = chart.series[0];
var dataRange = series.dataRange;
var large = dataRange.find(function(v){ return v>14 });
if(large){
var line = series.getSurface().add({
type: 'line',
fromX: 354,
fromY: 75,
toX: 465,
toY: 257,
zIndex: 2000,
stroke: 'green',
'stroke-width': 2,
}).show(true);
}
}
},
axes: [{
type: 'numeric',
position: 'left',
fields: ['data2'],
title: {
text: 'Stores Visited',
fontSize: 15
},
grid: true,
minimum: 0
}, {
type: 'category',
position: 'bottom',
fields: ['date'],
title: {
text: 'Date',
fontSize: 15
}
}],
series: [{
type: 'line',
style: {
stroke: 'red',
lineWidth: 2
},
xField: 'date',
yField: 'data2'
}]
});
});
Actually, changing color of whole line, (which is between per metric) is not hard. The problem is how to change color of portion line. To fix this issue, I created data boundaries(pushed boundary items to store). I am not sure It will be useful for you. Unfortunately, I don't have any idea except this. Anyway, please check this fiddle: https://fiddle.sencha.com/#fiddle/v0d
var data = [{
'name': 'metric one',
'data2': 4
}, {
'name': 'metric two',
'data2': 8
}, {
'name': 'metric three',
'data2': 20
}, {
'name': 'metric four',
'data2': 12
}, {
'name': 'metric five',
'data2': 18
}, {
'name': 'metric six',
'data2': 24
}, {
'name': 'metric seven',
'data2': 36
}];
var newData = [];
Ext.each(data, function(dt, index) {
newData.push(dt);
if((index != data.length-1) && dt.data2 < 14 && 14 < data[index+1].data2) {
newData.push({'data2': 14, name: index});
}
});
Ext.create('Ext.chart.Chart', {
renderTo: Ext.getBody(),
width: 500,
height: 300,
store: {
fields: ['name', 'data2'],
data: newData
},
axes: [{
type: 'numeric',
position: 'left',
fields: ['data2'],
title: {
text: 'Sample Values',
fontSize: 15
},
grid: true,
minimum: 0
}, {
type: 'category',
position: 'bottom',
fields: ['name'],
title: {
text: 'Sample Values',
fontSize: 15
}
}],
series: [{
type: 'line',
style: {
lineWidth: 2,
maxBarWidth: 30,
stroke: 'red'
},
renderer: function(sprite, config, rendererData, index) {
var store = rendererData.store,
storeItems = store.getData().items,
record = storeItems[index],
prev = storeItems.length - 2,
last = storeItems.length - 1,
changes = {};
if (!record) {
return;
}
if (record.get('data2') > 14) {
changes.strokeStyle = 'green';
} else {
changes.strokeStyle = 'red';
}
return changes;
},
xField: 'name',
yField: 'data2'
}]
});
I am trying to draw two charts side by side which will use same store by passing different parameters but both charts are using second store's value. I can see response in Chrome console, it is proper with two requests and different response; below is my code.
Ext.define('testUtility.view.BarChart', {
extend: 'Ext.chart.Chart',
alias: 'widget.barChart',
renderTo: Ext.getBody(),
store: Ext.create('Ext.data.Store', {
fields: ['name', 'data'],
autoLoad: false,
proxy: {
type: 'ajax',
url: 'data/store1',
reader: {
type: 'json',
root: 'Data'
},
filterParam: undefined,
groupParam: undefined,
pageParam: undefined,
startParam: undefined,
sortParam: undefined,
limitParam: undefined
}
}),
axes: [{
type: 'Numeric',
position: 'left',
fields: ['data'],
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
title: 'Values',
grid: true,
minimum: 0
}, {
type: 'Category',
position: 'bottom',
fields: ['name'],
title: 'Master'
}],
series: [{
type: 'column',
axis: 'left',
highlight: true,
tips: {
trackMouse: true,
width: 100,
height: 28,
renderer: function(storeItem, item) {
this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data') + ' $');
}
},
label: {
display: 'insideEnd',
'text-anchor': 'middle',
field: 'data',
renderer: Ext.util.Format.numberRenderer('0'),
orientation: 'vertical',
color: '#333'
},
xField: 'name',
yField: 'data'
}]
});
app.js
Ext.application({
requires: [
'Ext.container.Viewport'
],
name: 'BAR Chart ',
launch: function() {
var chart1 = Ext.create('testUtility.view.BarChart', {
id: 'chart1',
height: 300,
width: '50%'
});
var store1 = chart1.getStore();
store1.proxy.extraParams = {
id: chart1.id
};
store1.load();
var chart2 = Ext.create('testUtility.view.BarChart', {
id: 'chart2',
height: 300,
width: '50%'
});
var store2 = chart2.getStore();
store2.proxy.extraParams = {
id: chart2.id
};
store2.load();
}
});
Both charts shows data from store whichever is loaded later.
Both of your stores are one and the same, when you call them in your definition. You should call the store when creating the instance of the class like so:
var chart1 = Ext.create( 'testUtility.view.BarChart', {
id: 'chart1',
height: 300,
width: '50%',
store: store1
} );
It is good practice to define your own store:
Ext.define( 'testUtility.store.BarChart', {
extend: 'Ext.data.Store',
...
} );
And then just use it before the first part of the code:
var store1 = Ext.create( 'testUtility.store.BarChart', { options } );
Your options including the extraparams, different for the 2 stores.
Just a newbie here trying to understand and work on extjs 4.2.1. I really like the charts and grids and wanted to incorporate them into my current application. I got the sample grid to work in my application but the chart turns out to be a little harder. I used the sample code at
sample code
which renders the chart in another window and was wondering if someone can help me put this into a div tag on one of my panels.
Here is the container I have for the chart:
<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="splitter:false">
<div id="container"></div>
</div>
and the chart script: charts.js
Ext.require('Ext.chart.*');
Ext.require(['Ext.Window', 'Ext.fx.target.Sprite', 'Ext.layout.container.Fit']);
Ext.onReady(function () {
var textArea;
var store = new Ext.data.JsonStore({
fields: ['name', 'visits', 'views'],
data: [
{ name: 'Jul 07', visits: 245000, views: 3000000 },
{ name: 'Aug 07', visits: 240000, views: 3500000 },
{ name: 'Sep 07', visits: 355000, views: 4000000 },
{ name: 'Oct 07', visits: 375000, views: 4200000 },
{ name: 'Nov 07', visits: 490000, views: 4500000 },
{ name: 'Dec 07', visits: 495000, views: 5800000 },
{ name: 'Jan 08', visits: 520000, views: 6000000 },
{ name: 'Feb 08', visits: 620000, views: 7500000 }
]
});
Ext.define('Ext.chart.theme.CustomBlue', {
extend: 'Ext.chart.theme.Base',
constructor: function (config) {
var titleLabel = {
font: 'bold 18px Arial'
}, axisLabel = {
fill: 'rgb(8,69,148)',
font: '12px Arial',
spacing: 2,
padding: 5
};
this.callParent([Ext.apply({
axis: {
stroke: '#084594'
},
axisLabelLeft: axisLabel,
axisLabelBottom: axisLabel,
axisTitleLeft: titleLabel,
axisTitleBottom: titleLabel
}, config)]);
}
});
var chart = Ext.create('Ext.chart.Chart', {
animate: true,
shadow: true,
store: store,
axes: [{
type: 'Numeric',
position: 'bottom',
fields: ['data1'],
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
title: 'Number of Hits',
grid: true,
minimum: 0
}, {
type: 'Category',
position: 'left',
fields: ['name'],
title: 'Month of the Year'
}],
theme: 'CustomBlue',
background: {
gradient: {
id: 'backgroundGradient',
angle: 45,
stops: {
0: {
color: '#ffffff'
},
100: {
color: '#eaf1f8'
}
}
}
},
series: [{
type: 'bar',
axis: 'bottom',
highlight: true,
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function (storeItem, item) {
this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data1') + ' views');
}
},
label: {
display: 'insideEnd',
field: 'data1',
renderer: Ext.util.Format.numberRenderer('0'),
orientation: 'horizontal',
color: '#333',
'text-anchor': 'middle'
},
xField: 'name',
yField: ['data1']
}]
renderTo: "container"
});
});
You didn't explain what the problem was, however it's pretty clear from looking at the code.
The issue is that you need to give the chart a width/height, because it needs those to size appropriately. In the original example in the docs, the dimensions are provided explicitly by the fit layout used on the window.