Related
I've added two buttons into my chart: 'Scale -' and 'Scale +'. I'd like to change the width of the chart when user is clicked on the buttons. But the width of the chart doesn't change. I'd like to increase the width of the chart when user is clicked on the button 'Scale +', and I'd like to decrease the width of the chart when user is clicked on the button 'Scale -' for the same coefficient, for example 10%.
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css"
rel = "stylesheet" />
<script type = "text/javascript"
src = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
<script type = "text/javascript"
src = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/packages/charts/classic/charts.js"></script>
<link href = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/packages/charts/classic/classic/resources/charts-all.css"
rel = "stylesheet" />
<script type = "text/javascript">
Ext.onReady(function() {
Ext.create('Ext.chart.CartesianChart', {
renderTo: document.body,
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'
}],
dockedItems: [
{
xtype: 'toolbar',
flex: 1,
dock: 'bottom',
ui: 'footer',
layout: {
pack: 'end',
type: 'hbox'
},
items: [
{
xtype: 'button',
text: 'Scale -',
itemId: 'ScaleDec',
handler : function()
{
this.width = 100;
this.reload();
},
},
{
xtype: 'button',
text: 'Scale +',
itemId: 'ScaleInc',
handler : function()
{
this.width = 1000;
this.reload();
},
}
]
}
],
});
});
</script>
</head>
<body>
</body>
</html>
<script type = "text/javascript">
var width = 1000;
Ext.onReady(function() {
var myChart = Ext.create('Ext.chart.CartesianChart', {
renderTo: document.body,
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'
}],
dockedItems: [
{
xtype: 'toolbar',
flex: 1,
dock: 'bottom',
ui: 'footer',
layout: {
pack: 'end',
type: 'hbox'
},
items: [
{
xtype: 'button',
text: 'Scale -',
itemId: 'ScaleDec',
handler : function()
{
width = width - width * 0.1;
myChart.setWidth(width);
},
scope: this,
},
{
xtype: 'button',
text: 'Scale +',
itemId: 'ScaleInc',
handler : function()
{
width = width + width * 0.1;
myChart.setWidth(width);
},
scope: this,
}
]
}
],
});
});
</script>
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'
]
}
]
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.
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 want to know if it will be possible to use the two pane view (as this example) with a stacked area graph ?
I tryed to make it works in a fiddle http://jsfiddle.net/g2xDj/2/, but, the stacked area graph is not displayed.
var stacked_data = [{
name: 'Asia',
data: [[1364292000,502], [1364294000,635], [1364296000,809], [1364298000,947], [1364300000,1402], [1364302000,3634], [1364304000,5268]]
}, {
name: 'Africa',
data: [[1364292000,106], [1364294000,107], [1364296000,111], [1364298000,133], [1364300000,221], [1364302000,767], [1364304000,1766]]
}, {
name: 'Europe',
data: [[1364292000,163], [1364294000,203], [1364296000,276], [1364298000,408], [1364300000,547], [1364302000,729], [1364304000,628]]
}];
var line_data = [[1364292000,502], [1364294000,635], [1364296000,809], [1364298000,947], [1364300000,1402], [1364302000,3634], [1364304000,5268]];
// create the chart
$('#container').highcharts('StockChart',
{
chart : {
//type: 'area',
renderTo : 'container',
zoomType: 'x'
},
plotOptions: {
area: {
stacking: 'normal'
}
},
rangeSelector: {
selected: 1
},
title: {
text: 'AAPL Historical'
},
yAxis: [{
title: {
text: 'Load'
},
height: 200,
lineWidth: 2
},
{
title: {
text: 'Load 2'
},
top: 300,
height: 100,
offset: 0,
lineWidth: 2
}
],
series: [
{
name: "area",
data: stacked_data,
yAxis: 0
},{
name: "line",
data: line_data,
yAxis: 1
}]
});
});
Anybody have an idea to help me ?
In your example you have incorrect structure of series, because in stackedArea you try to push "series" structure for data.
Additionaly you should multiply all timestamp by 1000 to achieve JS timestamp format.
Updated example: http://jsfiddle.net/g2xDj/4/
var series = [{
name: 'Asia',
data: [
[1364292000000, 502],
[1364294000000, 635],
[1364296000000, 809],
[1364298000000, 947],
[1364300000000, 1402],
[1364302000000, 3634],
[1364304000000, 5268]
]
}, {
name: 'Africa',
data: [
[1364292000000, 106],
[1364294000000, 107],
[1364296000000, 111],
[1364298000000, 133],
[1364300000000, 221],
[1364302000000, 767],
[1364304000000, 1766]
]
}, {
name: 'Europe',
data: [
[1364292000000, 163],
[1364294000000, 203],
[1364296000000, 276],
[1364298000000, 408],
[1364300000000, 547],
[1364302000000, 729],
[1364304000000, 628]
]
}];
var line_data = {
type:'line',
yAxis:1,
data:[
[1364292000000, 502],
[1364294000000, 635],
[1364296000000, 809],
[1364298000000, 947],
[1364300000000, 1402],
[1364302000000, 3634],
[1364304000000, 5268]
]};
series.push(line_data);