New on extjs chart.
I am having an extjs area chart, I got the store, model, ok, but the chart is not showing up at all, nothing, I have no idea where the problem is:
var store1 = Ext.create('Ext.data.Store', {
fields: ['date', 'ged', 'watt', 'sicomor'],
data: [{
"date": 20-10-2014,
"ged": 52,
"watt": 21,
"sicomor": 18
}, {
"date": 21 - 10 - 2014,
"ged": 24,
"watt": 62,
"sicomor": 14
}, {
"date": 22-10-2014,
"ged": 41,
"watt": 69,
"sicomor": 25
}]
});
Ext.define("dashboard.view.HrsWorkedChart", {
extend: "Ext.chart.Chart",
alias: "widget.hrsworkedchart",
style: 'background:#fff',
animate: true,
store: store1,
legend: {
position: 'right'
},
axes: [{
type: 'Numeric',
minimum: 0,
position: 'left',
fields: ['watt', 'ged', 'sicomor'],
title: 'Nombre documents en retard',
minorTickSteps: 1,
grid: {
odd: {
opacity: 1,
fill: '#ddd',
stroke: '#bbb',
'stroke-width': 0.5
}
}
}, {
type: 'Category',
position: 'bottom',
fields: ['date'],
title: 'Jours'
}],
series: [{
type: 'area',
axis: 'left',
xField: 'name',
yField: ['watt', 'ged', 'sicomor'],
}]
});
Ext.application({
name: 'AreaChart',
launch: function () {
Ext.Viewport.add({xtype: 'hrsworkedchart'})
}
});
jsfiddle
Can you help me out.
Cheers a lot
You must write all your code inside the launch method of your Ext.application to make sure that ExtJS is loaded and ready to be used. You should also create your Viewport, for this you could use the autoCreateViewport method or simply add an Ext.create to the end of your launch method.
This should work:
Ext.application({
name: 'AreaChart',
launch: function () {
var store1 = Ext.create('Ext.data.Store', {
fields: ['date', 'ged', 'watt', 'sicomor'],
data: [{
"date": 20-10-2014,
"ged": 52,
"watt": 21,
"sicomor": 18
}, {
"date": 21 - 10 - 2014,
"ged": 24,
"watt": 62,
"sicomor": 14
}, {
"date": 22-10-2014,
"ged": 41,
"watt": 69,
"sicomor": 25
}]
});
Ext.define("dashboard.view.HrsWorkedChart", {
extend: "Ext.chart.Chart",
alias: "widget.hrsworkedchart",
style: 'background:#fff',
animate: true,
store: store1,
legend: {
position: 'right'
},
axes: [{
type: 'Numeric',
minimum: 0,
position: 'left',
fields: ['watt', 'ged', 'sicomor'],
title: 'Nombre documents en retard',
minorTickSteps: 1,
grid: {
odd: {
opacity: 1,
fill: '#ddd',
stroke: '#bbb',
'stroke-width': 0.5
}
}
}, {
type: 'Category',
position: 'bottom',
fields: ['date'],
title: 'Jours'
}],
series: [{
type: 'area',
axis: 'left',
xField: 'name',
yField: ['watt', 'ged', 'sicomor'],
}]
});
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [{
xtype: 'hrsworkedchart'
}]
});
}
});
you'd better define the view and data (maybe model as well) in separate files.
for your case:
//create a file under dashborad.store.HrsWorkedChart.js
Ext.define("dashboard.store.HrsWorkedChart", { //config options });
//create a file under dashboard.view.HrsWorkedChart.js
Ext.define("dashboard.view.HrsWorkedChart", {
......
store: dashboard.store.HrsWorkedChart,
......
});
then you load your viewport as Guiherme said.
Related
I'm trying to put an ExtJS chart into a jquery UI tab... the simple code is this
Ext.onReady(function() {
Ext.create('Ext.chart.CartesianChart', {
renderTo: 'binding-example',
deferredRender: false,
width: 600,
height: 200,
store: {
fields: ['name', 'g1', 'g2'],
data: [
{ "name": "Item-0", "g1": 57, "g2": 59 },
{ "name": "Item-1", "g1": 45, "g2": 50 },
{ "name": "Item-2", "g1": 67, "g2": 43 },
{ "name": "Item-3", "g1": 45, "g2": 18 },
{ "name": "Item-4", "g1": 30, "g2": 90 }
]
},
legend: {
docked: 'bottom'
},
//define x and y axis.
axes: [{
type: 'numeric',
position: 'left'
}, {
type: 'category',
visibleRange: [0, 1],
position: 'bottom'
}],
//define the actual series
series: [{
type: 'line',
xField: 'name',
yField: 'g1',
title: 'Normal'
}, {
type: 'line',
xField: 'name',
yField: 'g2',
title: 'Smooth'
}]
});
});
and the html is this:
<div id="mytabs">
<ul>
<li><span>tab01</span></li>
<li><span>tab02</span></li>
</ul>
<div id="fragment-1">
<div id="first_tab"></div>
</div>
<div id="fragment-2">
<div id="binding-example"> </div>
</div>
</div>
<script>
$(document).ready(function() {
jQuery('#mytabs').tabs(); });
</script>
when I change the code:
renderTo:document.body
or
renderTo:'first_tab'
I can make the chart render properly according to this
link to the unaltered example
¿is there a method in ExtJS or in JQuery UI tabs that render properly?
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 working to create highchart for a marketing team, please check this:
http://jsfiddle.net/jyotipuri/kh5jY/5124/
$(function () {
$('#container').highcharts({
chart: {
renderTo: 'container',
events: {
load: function () {
Highcharts.updateMarketMarkers(this);
},
redraw: function () {
Highcharts.updateMarketMarkers(this);
}
}
},
title: {
text: null
},
xAxis: [
{
categories: ['North','South','East', 'West']
}
],
yAxis: [
{
title: null,
labels: {enabled: false},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
{
title: null,
labels: {enabled: false}
}
],
tooltip: false,
plotOptions: {
column: {
pointPadding: 0,
borderWidth: 0
},
series: {
point: {
events: {
click: function () {
$scope.drillChart(this.category);
}
}
}
}
},
series: [
{
name: 'Jan',
data: [23, 45, 24, 30],
type: 'column'
},
{
name: 'Feb',
data: [50, 40, 25, 10],
type: 'column'
}
]
});
});
The columns here show sales in various regions, I need to be able to mark out specific point on the columns that will be sales target and it will show is sales met the target. The marking has to be done for both columns (Jan, Feb) for all 4 regions (NORTH, SOUTH, WEST, EAST).
How would you mark out that points? I think you can achieve that in two ways:
using column series with low options (or columnrange series): http://jsfiddle.net/kh5jY/5132/
using scatter just to put marker on such point: http://jsfiddle.net/kh5jY/5133/
{
name: 'South target',
data: [20, 20, 20, 20],
zIndex: 10,
pointPlacement: 0.15,
type: 'scatter'
}, {
name: 'North target',
data: [20, 20, 20, 20],
zIndex: 10,
pointPlacement: -0.15,
type: 'scatter'
}
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.
I am developing a mixed charts component for Extjs, and the curves are like too sharp. I could not find a configuration for the curves to have radius. If you have dealt with something like can you provide some way to make the curves to me smooth a little. Here is my code:
Ext.define('Ext.vcops.rootCause.RootCauseScoreChart', {
extend : 'Ext.chart.Chart',
initMembers : function() {
this.store = Ext.create('Ext.data.JsonStore', {
fields: ['name', 'score', 'noiseIndex', 'line1', 'line2', 'line3'],
data: generateData()
});
this.axes = [{
type: 'Numeric',
minimum: 0,
maximum: 100,
constrain: false,
dashSize: 0,
majorTickSteps: 7,
position: 'left',
title: 'Score',
grid: true
},{
type: 'Category',
position: 'bottom',
grid: true,
label: {
renderer: function(name) {
return '';
}
}
}];
this.series = [{
type: 'area',
highlight: false,
axis: 'left',
xField: 'name',
yField: ['score'],
style: {
opacity: 1
}
}, {
type: 'line',
axis: 'left',
shadowAttributes: false,
xField: 'name',
yField: 'noiseIndex',
style: {
stroke: '#000000',
'stroke-width': 1,
opacity: 1,
'stroke-dasharray': 10
},
showMarkers: false
}, {
type: 'line',
axis: 'left',
shadowAttributes: false,
showInLegend: false,
xField: 'name',
yField: 'line1',
style: {
stroke: '#FFDD16',
'stroke-width': 2,
opacity: 1
},
showMarkers: false
}, {
type: 'line',
axis: 'left',
shadowAttributes: false,
showInLegend: false,
xField: 'name',
yField: 'line2',
style: {
stroke: '#F1592A',
'stroke-width': 2,
opacity: 1
},
showMarkers: false
}, {
type: 'line',
axis: 'left',
shadowAttributes: false,
showInLegend: false,
xField: 'name',
yField: 'line3',
style: {
stroke: '#EE1C25',
'stroke-width': 2,
opacity: 1
},
showMarkers: false
}];
this.themeAttrs.colors = ["#65B9E0", "#94ae0a", "#115fa6", "#a61120", "#ff8809", "#ffd13e", "#a61187", "#24ad9a", "#7c7474", "#a66111"];
},
initComponent : function() {
this.initMembers();
var config = {
insetPadding: 0,
legend: {
position: 'right',
boxStroke : 'transparent',
boxFill: 'transparent'
},
listeners: {
select: {
fn: function(me, selection) {
//TODO zoom logi here
}
}
}
};
Ext.apply(this, Ext.apply(config, this.initialConfig));
Ext.vcops.rootCause.RootCauseScoreChart.superclass.initComponent.apply(this, arguments);
}
});
I use line chart with fill=true, it's the same effect as area but with curved areas.
Ext.application({
name: 'Fiddle',
launch: function() {
Ext.application({
name: 'PanelHeaderItems',
launch: function() {
var graphStore = Ext.create('Ext.data.Store', {
fields: ['kg', 'ha'],
data: [{
"kg": "0.23",
"ha": "90"
}, {
"kg": "0.4",
"ha": "20"
}, {
"kg": "0.6",
"ha": "70"
}, {
"kg": "0.8",
"ha": "56"
}, {
"kg": "0.95",
"ha": "100"
}]
});
wizardStep3Chart = new Ext.chart.CartesianChart({
width: 400,
height: 300,
animation: true,
store: graphStore,
legend: {
position: 'right'
},
axes: [{
type: 'numeric',
position: 'left',
grid: true,
fields: ['ha'],
renderer: function(v) {
return v;
}
}, {
type: 'numeric',
position: 'bottom',
grid: true,
adjustByMajorUnit: false,
fields: ['kg'],
label: {
rotate: {
degrees: -45
}
}
}],
series: [{
type: 'line',//<-----------
smooth:true,//<-----------
fill:true,//<-----------
axis: 'left',
xField: 'kg',
yField: 'ha',
style: {
opacity: 0.80
},
highlight: {
fillStyle: '#125489',
lineWidth: 2,
strokeStyle: '#fff'
},
tooltip: {
trackMouse: true,
style: 'background: #fff',
renderer: function(storeItem, item) {
this.setHtml(storeItem.get('ha') + ': ' + storeItem.get('kg'));
}
}
}],
renderTo: Ext.getBody()
});
}
});
}
});
Use the smooth: true option on the line series.