how to increase name in pie chart in extjs - javascript

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

Related

Highcharts packed bubble chart not working for negative values

I am using High charts packed bubble chart and I need to show different sizes of bubbles according to its value (negative values). It is working fine when I pass positive values but size of the circle not changing when I pass negative values. Is there any way to show chart with negative values?
js fiddle link with code example
Highcharts.chart('container', {
chart: {
type: 'packedbubble',
height: '100%'
},
title: {
text: 'TOP Countries'
},
tooltip: {
useHTML: true,
pointFormat: '<b>{point.name}:</b> {point.value}'
},
plotOptions: {
packedbubble: {
minSize: '30%',
maxSize: '80%',
zMin: 0,
zMax: 1000,
layoutAlgorithm: {
splitSeries: false,
gravitationalConstant: 0.02
},
dataLabels: {
enabled: true,
format: '{series.name}',
filter: {
property: 'y',
operator: '>',
value: 250
},
style: {
color: 'black',
textOutline: 'none',
fontWeight: 'normal'
}
}
}
},
series: [{
name: 'ASEAN',
data: [{
name: "ASEAN",
value: -88.2
}]
}, {
name: 'KOR ',
data: [{
name: "KOR",
value: -605.2
}]
}, {
name: 'CHN ',
data: [{
name: "CHN",
value: -427233.7
}]
}, {
name: 'ISA ',
data: [{
name: "ISA",
value: -355.39
}]
}, {
name: 'ANZ ',
data: [{
name: "ANZ ",
value: -3331.4
}]
}, {
name: 'JP ',
data: [{
name: "JP1",
value: -22470857.0
},{
name: "JP2",
value: -21470857.0
}]
}]
});
graph with negative values
graph with positive values
Properties zMin and zMax are not a part of official packedbubble series API, but they are internally used and work as in bubble series.
plotOptions: {
packedbubble: {
minSize: '30%',
maxSize: '80%',
//zMin: 0,
//zMax: 1000,
...
}
}
Live demo: https://jsfiddle.net/BlackLabel/vro2wzL4/
API Reference:
https://api.highcharts.com/highcharts/series.packedbubble
https://api.highcharts.com/highcharts/series.bubble.zMin

ExtJS 4.2.1.883: Bar Graph not plotted

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/

How to render series data to a title in sencha charts

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'
]
}
]

Rendering pie chart using xtype and Ext.create

I first tried to render a pie chart using xtype into centre region of a panel with border layout. Here is the code:
{
xtype:'pie',
renderTo: Ext.getBody(),
width: 200,
height: 150,
animate: true,
layout:'fit',
store: store,
theme: 'Base:gradients',
series: [{
type: 'pie',
field: 'salary',
showInLegend: true,
highlight: {
segment: {
margin: 20
}
},
label: {
field: 'name',
display: 'rotate',
contrast: true,
font: '18px Arial'
}
}]
}
I am getting the following error:
Uncaught TypeError: Cannot call method 'substring' of undefined
But when i take the same code and use Ext.create then it is working fine.
var chart=Ext.create('Ext.chart.Chart', {
renderTo: Ext.getBody(),
width: 200,
height: 150,
animate: true,
layout:'fit',
store: store,
theme: 'Base:gradients',
series: [{
type: 'pie',
field: 'salary',
showInLegend: true,
highlight: {
segment: {
margin: 20
}
},
label: {
field: 'name',
display: 'rotate',
contrast: true,
font: '18px Arial'
}
}]
});
I am using chart as an item instead.
What can be the problem?
Here is the store:
var store=Ext.create('Ext.data.Store',{
model:'Layouts.Person',
autoLoad:true,
data:{'items':[
{'name':'john','empno':'1111','salary':'1234'},
{'name':'edward','empno':'1212','salary':'2234'},
{'name':'frank','empno':'1567','salary':'9774'},
{'name':'michel','empno':'3456','salary':'8932'},
]},
proxy:{
type:'memory',
reader:{
type:'json',
root:'items'
}
}
});
The xtype for pie chart is pie:
http://www.objis.com/formationextjs/lib/extjs-4.0.0/docs/api/Ext.chart.series.Pie.html
try this code it will work out for you.
{
xtype:'chart',
animate: true,
width: 500,
height: 300,
store: store,
theme: 'Base:gradients',
series: [{
type: 'pie',
field: 'data1',
showInLegend: true,
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function(storeItem, item) {
//calculate and display percentage on hover
var total = 0;
store.each(function(rec) {
total += rec.get('data1');
});
this.setTitle(storeItem.get('name') + ': ' + Math.round(storeItem.get('data1') / total * 100) + '%');
}
},
highlight: {
segment: {
margin: 20
}
},
label: {
field: 'name',
display: 'rotate',
contrast: true,
font: '18px Arial'
}
}]
}

loading extjs bar chart sample into a div tag

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.

Categories