How to make Extjs 4.2 bar chart with 'pagination' - javascript

I have over 100 items (it is loaded dimamicly so it might be more in the feature) in jsonStore and want to display them using chart. Unfortunately render all features at one time will make chart unreadable. I want to display them in group of 20 items.
How to add 'pagination' mechanism? Is there a possibility to add a limit and offset to data to be rendered?


Yes.It is enough to paginatelocally / remotely the store attached to chart.
Ext.require([
'Ext.chart.*',
'Ext.Window',
'Ext.fx.target.Sprite',
'Ext.layout.container.Fit',
'Ext.window.MessageBox'
]);
Ext.onReady(function() {
window.generateData = function(n, floor) {
var data = [],
p = (Math.random() * 11) + 1,
i;
floor = (!floor && floor !== 0) ? 20 : floor;
for (i = 0; i < (n || 12); i++) {
data.push({
name: Ext.Date.monthNames[i % 12],
data1: Math.floor(Math.max((Math.random() * 100), floor)),
data2: Math.floor(Math.max((Math.random() * 100), floor)),
data3: Math.floor(Math.max((Math.random() * 100), floor)),
data4: Math.floor(Math.max((Math.random() * 100), floor)),
data5: Math.floor(Math.max((Math.random() * 100), floor)),
data6: Math.floor(Math.max((Math.random() * 100), floor)),
data7: Math.floor(Math.max((Math.random() * 100), floor)),
data8: Math.floor(Math.max((Math.random() * 100), floor)),
data9: Math.floor(Math.max((Math.random() * 100), floor))
});
}
return data;
};
window.store1 = Ext.create('Ext.data.JsonStore', {
fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5', 'data6', 'data7', 'data9', 'data9'],
data: generateData(),
pageSize: 3,
page: 0
});
window.doFilter = function() {
var k = 0,
start = store1.page * store1.pageSize;
store1.clearFilter();
if(start<0) start = 0;// add the max page test :P
store1.filter(function(r) {
return k++ >= start && k <= start + store1.pageSize;
});
}
doFilter();
var chart = Ext.create('Ext.chart.Chart', {
style: 'background:#fff',
animate: true,
shadow: true,
store: store1,
axes: [{
type: 'Numeric',
position: 'left',
fields: ['data1'],
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
title: 'Number of Hits',
grid: true,
minimum: 0
}, {
type: 'Category',
position: 'bottom',
fields: ['name'],
title: 'Month of the Year'
}],
series: [{
type: 'column',
axis: 'left',
highlight: true,
tips: {
trackMouse: true,
renderer: function(storeItem, item) {
this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data1') + ' $');
}
},
label: {
display: 'insideEnd',
'text-anchor': 'middle',
field: 'data1',
renderer: Ext.util.Format.numberRenderer('0'),
orientation: 'vertical',
color: '#333'
},
xField: 'name',
yField: 'data1'
}]
});
var win = Ext.create('Ext.panel.Panel', {
renderTo:Ext.getBody(),
width: 500,
height: 300,
minHeight: 300,
minWidth: 550,
hidden: false,
maximizable: true,
title: 'Column Chart',
autoShow: true,
layout: 'fit',
items: chart,
tbar: [{
text: 'Prev',
handler: function() {
store1.page--;
doFilter();
}
}, {
text: 'Next',
handler: function() {
store1.page++;
doFilter();
}
}]
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/extjs/4.2.1/ext-debug-w-comments.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/4.2.1/resources/css/ext-all-debug.css" rel="stylesheet" />

Related

Adding scrollbar to a custom series type in Echarts

I have create a custom series type to display the labels in Y Axis. When the label is large, then text is overlapping the main grid. I need to clip that overlapping text and also need to provide a scrollbar to display the remaining text. See the below image for better understanding of my question.
options = {
.......
grid: {
height: 250
},
yAxis: {
axisTick: { show: false },
splitLine: { show: false },
axisLine: { show: false },
axisLabel: { show: false },
min: 0,
max: this.labelData.length + 1,
},
series: [{
type: 'custom', // This is for rendering the main content (Gantt Chart)
renderItem: this.renderGanttItemClosure(),
itemStyle: {
opacity: 0.8
},
encode: {
x: [1, 2],
y: 0,
},
data: this.data
},
{
type: 'custom', // This is for rendering the label
renderItem: this.renderAxisLabelItem,
itemStyle: {
opacity: 0.8
},
encode: {
x: -1,
y: 0,
},
data: this.labelData,
}]
};
function renderAxisLabelItem(params: any, api: any) {
var categoryLevel = api.value(0);
var start = api.coord([0, categoryLevel]);
var barHeight = api.size([0, 1])[1] * 0.6;
var y = start[1];
if (y < params.coordSys.y + 5) {
return;
}
// M0,0 L0,150 L200,75 Z - Right arrow
// M0,0 L75,200 L150,0 Z - Down arrow
const labelItem = {
type: 'group',
position: [
10,
y
],
children: [] as any[]
};
var isExpanded = api.value(3);
const labelExpandIndicator = {
type: 'path',
shape: {
d: isExpanded ? 'M0,0 L75,200 L150,0 Z' : 'M0,0 L0,150 L200,75 Z',
x: 0,
y: -5,
width: 10,
height: 10,
layout: 'cover'
},
style: {
fill: '#000'
}
};
var hasChildren = api.value(2);
if (hasChildren) {
labelItem.children.push(labelExpandIndicator);
}
const hierarchyLevel = api.value(4);
const labelText = {
type: 'text',
style: {
x: 20 + (hierarchyLevel * 20),
y: 7,
text: api.value(1),
textVerticalAlign: 'bottom',
textAlign: 'left',
textFill: '#000'
}
};
labelItem.children.push(labelText);
return labelItem;
}
Demo code
Below is the full demo code. Just copy paste the below code in eCharts Editor
labelData = [{
name: "Application A to B",
value: [
2, // Category Level. Higher is on top.
"Application A to Application B", // Label Name
true, // Is there children
true, // Is expanded
0 // Hierarchy level
]
}, {
name: "Application B to Cosmos",
value: [
1,
"Application B to Cosmos",
false,
false,
1
]
}];
data = [{
name: "Application A to B",
value: [
2,
100,
1000,
1000
],
itemStyle: {
normal: {
color: '#7b9ce1'
}
}
}, {
name: "Application B processing",
value: [
1,
200,
700,
500
],
itemStyle: {
normal: {
color: '#bd6d6c'
}
}
}];
option = {
title: {
text: 'Dependency',
left: 'center'
},
tooltip: {
confine: true,
formatter: function (params) {
return params.marker + params.name + ': ' + params.value[3] + ' ms';
}
},
dataZoom: [{
type: 'slider',
filterMode: 'weakFilter',
showDataShadow: false,
top: 360,
labelFormatter: ''
}, {
type: 'inside',
filterMode: 'weakFilter'
},
{
type: 'slider',
zoomLock: true,
width: 10,
right: 10,
top: 70,
bottom: 20,
start: 95,
end: 100,
handleSize: 0,
showDetail: false,
}],
grid: {
height: 250
},
xAxis: {
min: 100,
scale: true,
axisLabel: {
formatter: function (val) {
return val + ' ms';
}
}
},
yAxis: {
axisTick: { show: false },
splitLine: { show: false },
axisLine: { show: false },
axisLabel: { show: false },
min: 0,
max: labelData.length + 1,
},
series: [{
type: 'custom',
renderItem: renderGanttItem,
itemStyle: {
opacity: 0.8
},
encode: {
x: [1, 2],
y: 0,
},
data: this.data,
zlevel: 10
},
{
type: 'custom',
renderItem: renderAxisLabelItem,
itemStyle: {
opacity: 0.8
},
encode: {
x: -1,
y: 0,
},
data: this.labelData,
zlevel: 5
}]
};
merge = {};
mergeData = {};
function renderAxisLabelItem(params, api) {
var categoryLevel = api.value(0);
var start = api.coord([0, categoryLevel]);
var barHeight = api.size([0, 1])[1] * 0.6;
var y = start[1];
if (y < params.coordSys.y + 5) {
return;
}
// M0,0 L0,150 L200,75 Z - Right arrow
// M0,0 L75,200 L150,0 Z - Down arrow
const labelItem = {
type: 'group',
position: [
10,
y
],
children: []
};
var isExpanded = api.value(3);
const labelExpandIndicator = {
type: 'path',
shape: {
d: isExpanded ? 'M0,0 L75,200 L150,0 Z' : 'M0,0 L0,150 L200,75 Z',
x: 0,
y: -5,
width: 10,
height: 10,
layout: 'cover'
},
style: {
fill: '#000'
}
};
var hasChildren = api.value(2);
if (hasChildren) {
labelItem.children.push(labelExpandIndicator);
}
const hierarchyLevel = api.value(4);
const labelText = {
type: 'text',
style: {
x: 20 + (hierarchyLevel * 20),
y: 7,
text: api.value(1),
textVerticalAlign: 'bottom',
textAlign: 'left',
textFill: '#000'
}
};
labelItem.children.push(labelText);
return labelItem;
}
function renderGanttItem(params, api) {
var categoryIndex = api.value(0);
var start = api.coord([api.value(1), categoryIndex]);
var end = api.coord([api.value(2), categoryIndex]);
var coordSys = params.coordSys;
var barLength = end[0] - start[0];
// Get the heigth corresponds to length 1 on y axis.
var barHeight = api.size([0, 1])[1] * 0.6;
var x = start[0];
var y = start[1] - barHeight / 2;
var rectNormal = echarts.graphic.clipRectByRect({
x: x, y: y, width: barLength, height: barHeight
}, {
x: params.coordSys.x,
y: params.coordSys.y,
width: params.coordSys.width,
height: params.coordSys.height
});
return {
type: 'group',
children: [{
type: 'rect',
shape: rectNormal,
style: api.style()
}]
};
}

Highcharts: Passing a secondary data variable in the tooltip

I'm trying to pass a secondary variable that's located in each point of my series' data-set. I've managed to that so far but when I try to hover on another data point on the chart, the same data gets printed for all points instead of showing the correct data for that specific point.
I've tried a variety of solutions and I would like to stick to this one, however I have this small hurdle which I can't seem to get over.
Here's a jsFiddle to show the problem I'm encountering: https://jsfiddle.net/Flik1/dfn51akc/47/
// Data gathered from http://populationpyramid.net/germany/2015/
// Age categories
var categories = [
'column 1', 'column 2', 'column 3', 'column 4'
];
Highcharts.chart('container', {
chart: {
type: 'bar',
followTouchMove: true,
spacingTop: 10,
spacingLeft: 5,
spacingRight: 5
},
xAxis: [{
reversed: true,
tickPosition: 'inside',
startOnTick: true,
endOnTick: true,
categories: categories,
labels: {
enabled: false
}
},
{ // mirror axis on right side
opposite: true,
reversed: true,
linkedTo: 0,
tickPosition: 'inside',
categories: [
'NIL'
],
labels: {
step: 1,
enabled: false
}
}
],
plotOptions: {
series: {
stacking: 'normal',
borderColor: '#fafafa'
}
},
tooltip: {
shared: true,
formatter: function() {
var points = this.points;
var series = this.series;
var pointsLength = points.length;
var tooltipMarkup = pointsLength ? '<span style=\'font-size: 10px\'>' + points[0].key + '</span><br/>' : '';
for (index = 0; index < pointsLength; index++) {
tooltipMarkup += '<b>' + this.points[index].series.name + ': </b>' + this.points[index].series.userOptions.data[0].tt + '<br/>';
}
return tooltipMarkup;
}
},
series: [{
data: [{
y: -2.2,
tt: "1"
}, {
y: -2.6,
tt: "2"
}, {
y: -1.3,
tt: "3"
}, {
y: -5.2,
tt: "4"
}]
}, {
color: '#FF0000',
dataLabels: {
enabled: true,
inside: true,
align: 'left',
format: '{x}'
},
data: [{
y: 1.3,
tt: "5"
}, {
y: 2.3,
tt: "6"
}, {
y: 4.3,
tt: "7"
}, {
y: 1.7,
tt: "8"
}]
}]
});
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>
I believe its a problem with this specific line of code as its displaying the first 'tt' variable from each series.
this.points[index].series.userOptions.data[0].tt
The expected outcome would be 1 and 5 for column 1, 2 and 6 for column 2, 3 and 7 for column 3 and 4 and 8 for column 4.

Try this.points[index].point.options.tt
// Data gathered from http://populationpyramid.net/germany/2015/
// Age categories
var categories = [
'column 1', 'column 2', 'column 3', 'column 4'
];
Highcharts.chart('container', {
chart: {
type: 'bar',
followTouchMove: true,
spacingTop: 10,
spacingLeft: 5,
spacingRight: 5
},
xAxis: [{
reversed: true,
tickPosition: 'inside',
startOnTick: true,
endOnTick: true,
categories: categories,
labels: {
enabled: false
}
},
{ // mirror axis on right side
opposite: true,
reversed: true,
linkedTo: 0,
tickPosition: 'inside',
categories: [
'NIL'
],
labels: {
step: 1,
enabled: false
}
}
],
plotOptions: {
series: {
stacking: 'normal',
borderColor: '#fafafa'
}
},
tooltip: {
shared: true,
formatter: function() {
var points = this.points;
var series = this.series;
var pointsLength = points.length;
var tooltipMarkup = pointsLength ? '<span style=\'font-size: 10px\'>' + points[0].key + '</span><br/>' : '';
for (index = 0; index < pointsLength; index++) {
tooltipMarkup += '<b>' + this.points[index].series.name + ': </b>' + this.points[index].point.options.tt + '<br/>';
}
return tooltipMarkup;
}
},
series: [{
data: [{
y: -2.2,
tt: "1"
}, {
y: -2.6,
tt: "2"
}, {
y: -1.3,
tt: "3"
}, {
y: -5.2,
tt: "4"
}]
}, {
color: '#FF0000',
dataLabels: {
enabled: true,
inside: true,
align: 'left',
format: '{x}'
},
data: [{
y: 1.3,
tt: "5"
}, {
y: 2.3,
tt: "6"
}, {
y: 4.3,
tt: "7"
}, {
y: 1.7,
tt: "8"
}]
}]
});
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>

Why I can't run this code in JsFiddle?Do I need to change html code?

I'm not able to run this code in jsfiddle.I can't figure out where is the problem.Do I need to change the html part.If then what is it?Can anyone help me on thisI'm really stuck here.I can't understand what is the problem.
jQuery(document).ready(function($) {
//second chart
var secondLeg1 = [],
secondLeg2 = [],
secondSpread = [],
secondProfit = [];
var secondChart = null,
secondChartOptions = {
chart: {
renderTo: 'secondChartContainer',
height: 600
},
rangeSelector: {
selected: 1
},
title: {
text: 'Natural Gas'
},
yAxis: [{
labels: {
align: 'right',
x: -3
},
title: {
text: 'NG - Long'
},
height: '20%',
lineWidth: 2
}, {
labels: {
align: 'right',
x: -3
},
title: {
text: 'NG - Short'
},
top: '25%',
height: '20%',
offset: 0,
lineWidth: 2
}, {
labels: {
align: 'right',
x: -3
},
title: {
text: 'Spread'
},
top: '50%',
height: '20%',
offset: 0,
lineWidth: 2
}, {
labels: {
align: 'right',
x: -3
},
title: {
text: 'Profit/Loss'
},
top: '75%',
height: '25%',
offset: 0,
lineWidth: 2
}],
tooltip: {
split: true
},
plotOptions: {
column: {
zones: [{
value: 0,
color: 'red'
}, {
color: 'green'
}]
}
},
series: [{
name: 'Natural Gas March 2017 Contract - Long',
data: secondLeg1
}, {
name: 'Natural Gas April 2017 Contract - Short',
data: secondLeg2,
yAxis: 1
}, {
name: 'Spread (Long minus Short)',
data: secondSpread,
yAxis: 2
}, {
type: 'column',
name: 'Profit/Loss in US Dollars',
data: secondProfit,
yAxis: 3
}],
exporting: {
buttons: {
reverseButton: {
text: 'Reverse',
onclick: function() {
var reversed = this.yAxis[0].reversed;
this.yAxis[0].update({
reversed: !reversed
});
reversed = this.yAxis[1].reversed;
this.yAxis[1].update({
reversed: !reversed
});
reversed = this.yAxis[2].reversed;
this.yAxis[2].update({
reversed: !reversed
});
reversed = this.yAxis[3].reversed;
this.yAxis[3].update({
reversed: !reversed
});
this.redraw();
},
align: 'left',
x: 350,
y: 35
},
yearDownButton: {
text: 'Year Down',
onclick: function() {
var xExtreme = this.xAxis[0].getExtremes();
// console.log(xExtreme.min);
this.xAxis[0].setExtremes(xExtreme.min - 31556952000, xExtreme.max - 31556952000)
},
align: 'left',
x: 450,
y: 35
},
yearUpButton: {
text: 'Year Up',
onclick: function() {
var xExtreme = this.xAxis[0].getExtremes();
// console.log(xExtreme.min);
this.xAxis[0].setExtremes(xExtreme.min + 31556952000, xExtreme.max + 31556952000)
},
align: 'left',
x: 550,
y: 35
}
}
}
};
function drawSecondChart() {
secondChart = new Highcharts.StockChart(secondChartOptions);
}
$.ajax({
url: "http://52.55.116.82/ui-chart/data?paths=%5B%5B%22strategy%22%2C%22code%3DSPREAD-NGH-NGJ%22%2C%22referenceYear%3D2016%22%2C%22start%3D20100301000000%22%2C%22end%3D20170228000000%22%2C%22daily%22%2C%22false%22%5D%5D&method=get",
complete: function(data) {
var jsonChartData = JSON.parse(data['responseText']);
var secondChartData = jsonChartData['jsonGraph']['strategy']['code=SPREAD-NGH-NGJ']['referenceYear=2016']['start=20100301000000']['end=20170228000000']['daily']['false']['value']['message'];
secondChartData = JSON.parse(secondChartData);
var secondChartDataLength = secondChartData.length;
for (var i = 0; i < secondChartDataLength; i++) {
secondLeg1.push([
secondChartData[i]['timestamp'],
secondChartData[i]['leg1']
]);
secondLeg2.push([
secondChartData[i]['timestamp'],
secondChartData[i]['leg2']
]);
secondSpread.push([
secondChartData[i]['timestamp'],
secondChartData[i]['spread']
]);
secondProfit.push([
secondChartData[i]['timestamp'],
secondChartData[i]['profit']
]);
}
drawSecondChart();
$('#resetButton').on("click", function(e) {
e.preventDefault();
$("#secondChartContainer").empty();
secondChartOptions.series = [];
secondChartOptions.series.push({
name: 'Natural Gas March 2017 Contract - Long',
data: secondLeg1
});
secondChartOptions.series.push({
name: 'Natural Gas April 2017 Contract - Short',
data: secondLeg2,
yAxis: 1
});
secondChartOptions.series.push({
name: 'Spread (Long minus Short)',
data: secondSpread,
yAxis: 2
});
secondChartOptions.series.push({
type: 'column',
name: 'Profit/Loss in US Dollars',
data: secondProfit,
yAxis: 3
});
secondChart = new Highcharts.StockChart(secondChartOptions);
});
}
});
//third chart
var thirdLeg1 = [],
thirdLeg2 = [],
thirdSpread = [],
thirdProfit = [];
var thirdChart = null,
thirdChartOptions = {
chart: {
renderTo: 'thirdChartContainer',
height: 600
},
rangeSelector: {
selected: 1
},
title: {
text: 'Natural Gas'
},
yAxis: [{
labels: {
align: 'right',
x: -3
},
title: {
text: 'NG - Long'
},
height: '20%',
lineWidth: 2
}, {
labels: {
align: 'right',
x: -3
},
title: {
text: 'NG - Short'
},
top: '25%',
height: '20%',
offset: 0,
lineWidth: 2
}, {
labels: {
align: 'right',
x: -3
},
title: {
text: 'Spread'
},
top: '50%',
height: '20%',
offset: 0,
lineWidth: 2
}, {
labels: {
align: 'right',
x: -3
},
title: {
text: 'Profit/Loss'
},
top: '75%',
height: '25%',
offset: 0,
lineWidth: 2
}],
tooltip: {
split: true
},
plotOptions: {
column: {
zones: [{
value: 0,
color: 'red'
}, {
color: 'green'
}]
}
},
series: [{
name: 'Natural Gas March 2017 Contract - Long',
data: thirdLeg1
}, {
name: 'Natural Gas April 2017 Contract - Short',
data: thirdLeg2,
yAxis: 1
}, {
name: 'Spread (Long minus Short)',
data: thirdSpread,
yAxis: 2
}, {
type: 'column',
name: 'Profit/Loss in US Dollars',
data: thirdProfit,
yAxis: 3
}],
exporting: {
buttons: {
reverseButton: {
text: 'Reverse',
onclick: function() {
var reversed = this.yAxis[0].reversed;
this.yAxis[0].update({
reversed: !reversed
});
reversed = this.yAxis[1].reversed;
this.yAxis[1].update({
reversed: !reversed
});
reversed = this.yAxis[2].reversed;
this.yAxis[2].update({
reversed: !reversed
});
reversed = this.yAxis[3].reversed;
this.yAxis[3].update({
reversed: !reversed
});
this.redraw();
},
align: 'left',
x: 350,
y: 35
},
yearDownButton: {
text: 'Year Down',
onclick: function() {
var xExtreme = this.xAxis[0].getExtremes();
// console.log(xExtreme.min);
this.xAxis[0].setExtremes(xExtreme.min - 31556952000, xExtreme.max - 31556952000)
},
align: 'left',
x: 450,
y: 35
},
yearUpButton: {
text: 'Year Up',
onclick: function() {
var xExtreme = this.xAxis[0].getExtremes();
// console.log(xExtreme.min);
this.xAxis[0].setExtremes(xExtreme.min + 31556952000, xExtreme.max + 31556952000)
},
align: 'left',
x: 550,
y: 35
}
}
}
};
function drawThirdChart() {
thirdChart = new Highcharts.StockChart(thirdChartOptions);
}
$.ajax({
url: "http://52.55.116.82/ui-chart/data?paths=%5B%5B%22strategy%22%2C%22code%3DSPREAD-NGH-NGJ%22%2C%22referenceYear%3D2016%22%2C%22start%3D20161212000000%22%2C%22end%3D20161212235900%22%2C%22minutes%22%2C%22false%22%5D%5D&method=get",
complete: function(data) {
var jsonChartData = JSON.parse(data['responseText']);
var thirdChartData = jsonChartData['jsonGraph']['strategy']['code=SPREAD-NGH-NGJ']['referenceYear=2016']['start=20161212000000']['end=20161212235900']['minutes']['false']['value']['message'];
thirdChartData = JSON.parse(thirdChartData);
var thirdChartDataLength = thirdChartData.length;
for (var i = 0; i < thirdChartDataLength; i++) {
thirdLeg1.push([
thirdChartData[i]['timestamp'],
thirdChartData[i]['leg1']
]);
thirdLeg2.push([
thirdChartData[i]['timestamp'],
thirdChartData[i]['leg2']
]);
thirdSpread.push([
thirdChartData[i]['timestamp'],
thirdChartData[i]['spread']
]);
thirdProfit.push([
thirdChartData[i]['timestamp'],
thirdChartData[i]['profit']
]);
}
drawThirdChart();
$('#resetButton').on("click", function(e) {
e.preventDefault();
$("#thirdChartContainer").empty();
thirdChartOptions.series = [];
thirdChartOptions.series.push({
name: 'Natural Gas March 2017 Contract - Long',
data: thirdLeg1
});
thirdChartOptions.series.push({
name: 'Natural Gas April 2017 Contract - Short',
data: thirdLeg2,
yAxis: 1
});
thirdChartOptions.series.push({
name: 'Spread (Long minus Short)',
data: thirdSpread,
yAxis: 2
});
thirdChartOptions.series.push({
type: 'column',
name: 'Profit/Loss in US Dollars',
data: thirdProfit,
yAxis: 3
});
thirdChart = new Highcharts.StockChart(thirdChartOptions);
});
}
});
});
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="http://code.highcharts.com/highcharts.src.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<div id="thirdChartContainer" style="height: 600px; margin-top: 1em"></div>

Since it looks like you're only using the stock charts, you shouldn't be loading http://code.highcharts.com/highcharts.src.js (since it sets the HighCharts object). From the documentation:
Highcharts is already included in Highstock, so it is not necessary to load both. The highstock.js file is included in the package. The highmaps.js file is also included, but unlike highstock.js, this doesn't include the complete Highcharts feature set. Highstock and Highmaps can be loaded separate files like this:
<script src="/js/highstock.js"></script>
<script src="/js/highmaps.js"></script>
But the separate files can't run in the same page along with each other or with highcharts.js. So if stock or maps are required in the same page as each other or with basic Highcharts, they can be loaded as modules:
Taking it out makes your code load the graphs.
jQuery(document).ready(function($) {
//second chart
var secondLeg1 = [],
secondLeg2 = [],
secondSpread = [],
secondProfit = [];
var secondChart = null,
secondChartOptions = {
chart: {
renderTo: 'secondChartContainer',
height: 600
},
rangeSelector: {
selected: 1
},
title: {
text: 'Natural Gas'
},
yAxis: [{
labels: {
align: 'right',
x: -3
},
title: {
text: 'NG - Long'
},
height: '20%',
lineWidth: 2
}, {
labels: {
align: 'right',
x: -3
},
title: {
text: 'NG - Short'
},
top: '25%',
height: '20%',
offset: 0,
lineWidth: 2
}, {
labels: {
align: 'right',
x: -3
},
title: {
text: 'Spread'
},
top: '50%',
height: '20%',
offset: 0,
lineWidth: 2
}, {
labels: {
align: 'right',
x: -3
},
title: {
text: 'Profit/Loss'
},
top: '75%',
height: '25%',
offset: 0,
lineWidth: 2
}],
tooltip: {
split: true
},
plotOptions: {
column: {
zones: [{
value: 0,
color: 'red'
}, {
color: 'green'
}]
}
},
series: [{
name: 'Natural Gas March 2017 Contract - Long',
data: secondLeg1
}, {
name: 'Natural Gas April 2017 Contract - Short',
data: secondLeg2,
yAxis: 1
}, {
name: 'Spread (Long minus Short)',
data: secondSpread,
yAxis: 2
}, {
type: 'column',
name: 'Profit/Loss in US Dollars',
data: secondProfit,
yAxis: 3
}],
exporting: {
buttons: {
reverseButton: {
text: 'Reverse',
onclick: function() {
var reversed = this.yAxis[0].reversed;
this.yAxis[0].update({
reversed: !reversed
});
reversed = this.yAxis[1].reversed;
this.yAxis[1].update({
reversed: !reversed
});
reversed = this.yAxis[2].reversed;
this.yAxis[2].update({
reversed: !reversed
});
reversed = this.yAxis[3].reversed;
this.yAxis[3].update({
reversed: !reversed
});
this.redraw();
},
align: 'left',
x: 350,
y: 35
},
yearDownButton: {
text: 'Year Down',
onclick: function() {
var xExtreme = this.xAxis[0].getExtremes();
// console.log(xExtreme.min);
this.xAxis[0].setExtremes(xExtreme.min - 31556952000, xExtreme.max - 31556952000)
},
align: 'left',
x: 450,
y: 35
},
yearUpButton: {
text: 'Year Up',
onclick: function() {
var xExtreme = this.xAxis[0].getExtremes();
// console.log(xExtreme.min);
this.xAxis[0].setExtremes(xExtreme.min + 31556952000, xExtreme.max + 31556952000)
},
align: 'left',
x: 550,
y: 35
}
}
}
};
function drawSecondChart() {
secondChart = new Highcharts.StockChart(secondChartOptions);
}
$.ajax({
url: "http://52.55.116.82/ui-chart/data?paths=%5B%5B%22strategy%22%2C%22code%3DSPREAD-NGH-NGJ%22%2C%22referenceYear%3D2016%22%2C%22start%3D20100301000000%22%2C%22end%3D20170228000000%22%2C%22daily%22%2C%22false%22%5D%5D&method=get",
complete: function(data) {
var jsonChartData = JSON.parse(data['responseText']);
var secondChartData = jsonChartData['jsonGraph']['strategy']['code=SPREAD-NGH-NGJ']['referenceYear=2016']['start=20100301000000']['end=20170228000000']['daily']['false']['value']['message'];
secondChartData = JSON.parse(secondChartData);
var secondChartDataLength = secondChartData.length;
for (var i = 0; i < secondChartDataLength; i++) {
secondLeg1.push([
secondChartData[i]['timestamp'],
secondChartData[i]['leg1']
]);
secondLeg2.push([
secondChartData[i]['timestamp'],
secondChartData[i]['leg2']
]);
secondSpread.push([
secondChartData[i]['timestamp'],
secondChartData[i]['spread']
]);
secondProfit.push([
secondChartData[i]['timestamp'],
secondChartData[i]['profit']
]);
}
drawSecondChart();
$('#resetButton').on("click", function(e) {
e.preventDefault();
$("#secondChartContainer").empty();
secondChartOptions.series = [];
secondChartOptions.series.push({
name: 'Natural Gas March 2017 Contract - Long',
data: secondLeg1
});
secondChartOptions.series.push({
name: 'Natural Gas April 2017 Contract - Short',
data: secondLeg2,
yAxis: 1
});
secondChartOptions.series.push({
name: 'Spread (Long minus Short)',
data: secondSpread,
yAxis: 2
});
secondChartOptions.series.push({
type: 'column',
name: 'Profit/Loss in US Dollars',
data: secondProfit,
yAxis: 3
});
secondChart = new Highcharts.StockChart(secondChartOptions);
});
}
});
//third chart
var thirdLeg1 = [],
thirdLeg2 = [],
thirdSpread = [],
thirdProfit = [];
var thirdChart = null,
thirdChartOptions = {
chart: {
renderTo: 'thirdChartContainer',
height: 600
},
rangeSelector: {
selected: 1
},
title: {
text: 'Natural Gas'
},
yAxis: [{
labels: {
align: 'right',
x: -3
},
title: {
text: 'NG - Long'
},
height: '20%',
lineWidth: 2
}, {
labels: {
align: 'right',
x: -3
},
title: {
text: 'NG - Short'
},
top: '25%',
height: '20%',
offset: 0,
lineWidth: 2
}, {
labels: {
align: 'right',
x: -3
},
title: {
text: 'Spread'
},
top: '50%',
height: '20%',
offset: 0,
lineWidth: 2
}, {
labels: {
align: 'right',
x: -3
},
title: {
text: 'Profit/Loss'
},
top: '75%',
height: '25%',
offset: 0,
lineWidth: 2
}],
tooltip: {
split: true
},
plotOptions: {
column: {
zones: [{
value: 0,
color: 'red'
}, {
color: 'green'
}]
}
},
series: [{
name: 'Natural Gas March 2017 Contract - Long',
data: thirdLeg1
}, {
name: 'Natural Gas April 2017 Contract - Short',
data: thirdLeg2,
yAxis: 1
}, {
name: 'Spread (Long minus Short)',
data: thirdSpread,
yAxis: 2
}, {
type: 'column',
name: 'Profit/Loss in US Dollars',
data: thirdProfit,
yAxis: 3
}],
exporting: {
buttons: {
reverseButton: {
text: 'Reverse',
onclick: function() {
var reversed = this.yAxis[0].reversed;
this.yAxis[0].update({
reversed: !reversed
});
reversed = this.yAxis[1].reversed;
this.yAxis[1].update({
reversed: !reversed
});
reversed = this.yAxis[2].reversed;
this.yAxis[2].update({
reversed: !reversed
});
reversed = this.yAxis[3].reversed;
this.yAxis[3].update({
reversed: !reversed
});
this.redraw();
},
align: 'left',
x: 350,
y: 35
},
yearDownButton: {
text: 'Year Down',
onclick: function() {
var xExtreme = this.xAxis[0].getExtremes();
// console.log(xExtreme.min);
this.xAxis[0].setExtremes(xExtreme.min - 31556952000, xExtreme.max - 31556952000)
},
align: 'left',
x: 450,
y: 35
},
yearUpButton: {
text: 'Year Up',
onclick: function() {
var xExtreme = this.xAxis[0].getExtremes();
// console.log(xExtreme.min);
this.xAxis[0].setExtremes(xExtreme.min + 31556952000, xExtreme.max + 31556952000)
},
align: 'left',
x: 550,
y: 35
}
}
}
};
function drawThirdChart() {
thirdChart = new Highcharts.StockChart(thirdChartOptions);
}
$.ajax({
url: "http://52.55.116.82/ui-chart/data?paths=%5B%5B%22strategy%22%2C%22code%3DSPREAD-NGH-NGJ%22%2C%22referenceYear%3D2016%22%2C%22start%3D20161212000000%22%2C%22end%3D20161212235900%22%2C%22minutes%22%2C%22false%22%5D%5D&method=get",
complete: function(data) {
var jsonChartData = JSON.parse(data['responseText']);
var thirdChartData = jsonChartData['jsonGraph']['strategy']['code=SPREAD-NGH-NGJ']['referenceYear=2016']['start=20161212000000']['end=20161212235900']['minutes']['false']['value']['message'];
thirdChartData = JSON.parse(thirdChartData);
var thirdChartDataLength = thirdChartData.length;
for (var i = 0; i < thirdChartDataLength; i++) {
thirdLeg1.push([
thirdChartData[i]['timestamp'],
thirdChartData[i]['leg1']
]);
thirdLeg2.push([
thirdChartData[i]['timestamp'],
thirdChartData[i]['leg2']
]);
thirdSpread.push([
thirdChartData[i]['timestamp'],
thirdChartData[i]['spread']
]);
thirdProfit.push([
thirdChartData[i]['timestamp'],
thirdChartData[i]['profit']
]);
}
drawThirdChart();
$('#resetButton').on("click", function(e) {
e.preventDefault();
$("#thirdChartContainer").empty();
thirdChartOptions.series = [];
thirdChartOptions.series.push({
name: 'Natural Gas March 2017 Contract - Long',
data: thirdLeg1
});
thirdChartOptions.series.push({
name: 'Natural Gas April 2017 Contract - Short',
data: thirdLeg2,
yAxis: 1
});
thirdChartOptions.series.push({
name: 'Spread (Long minus Short)',
data: thirdSpread,
yAxis: 2
});
thirdChartOptions.series.push({
type: 'column',
name: 'Profit/Loss in US Dollars',
data: thirdProfit,
yAxis: 3
});
thirdChart = new Highcharts.StockChart(thirdChartOptions);
});
}
});
});
<script src="//code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="//code.highcharts.com/stock/highstock.js"></script>
<div id="secondChartContainer" style="height: 600px; margin-top: 1em">
<div id="thirdChartContainer" style="height: 600px; margin-top: 1em"></div>

Hide/Show yaxis on series hide/show event

I'm making a multiple panel chart, and I'm trying to hide the y-axis on the hide event of the axis serie.
I tried setting the axis height and redrawing it (didn't work), set extremes, nothing worked. I also tryed this solution but didn't work, I beleave it didn't work beacause I'm using highstock and the "solution" use Highcharts, does that make sense?
I also have to resize the others y-axis when one is hidden, but this is another problem. But if someone has a tip on how to do it automatically would be thankful
Here is my JSFiddle code.
$(function () {
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-ohlcv.json&callback=?', function (data) {
var data1 = [ [100,0], [200,0], [300,1], [400,0], [500,1] ];
var data2 = [ [100,1], [200,0], [300,1], [400,0], [500,0] ];
var data3 = [ [100,1], [200,1], [300,0], [400,0], [500,1] ];
var data4 = [ [100,0], [200,1], [300,1], [400,0], [500,0] ];
// create the chart
var chart = $('#container').highcharts('StockChart', {
title: {
text: 'AAPL Historical'
},
legend: {
enabled: true
},
plotOptions: {
series: {
events: {
hide: function (event) {
console.log(this.yAxis)
//Hide
},
show: function (event) {
console.log(this.yAxis)
//Display
}
}
}
},
tooltip: {
pointFormatter: function() {
var state = (this.y == 1 ? "Active" : "Inactive");
var tooltip = '<span style="color:' + this.color + '">\u25CF</span> ' + this.series.name + ': <b>' + state + '</b><br/>'
return tooltip;
}
},
yAxis: [{
height: '25%',
offset: 0,
lineWidth: 2,
labels: {enabled: false}
}, {
top: '25%',
height: '25%',
offset: 0,
lineWidth: 2,
labels: {enabled: false},
title : {
text: "aaa"
}
}, {
top: '50%',
height: '25%',
offset: 0,
lineWidth: 2,
labels: {enabled: false}
}, {
top: '75%',
height: '25%',
offset: 0,
lineWidth: 2,
labels: {enabled: false}
}],
series: [{
name: 'Data1',
data: data1,
step: true,
yAxis: 0
}, {
name: 'Data2',
data: data2,
step: true,
yAxis: 1
}, {
name: 'Data3',
data: data3,
step: true,
yAxis: 2
}, {
name: 'Data4',
data: data4,
step: true,
yAxis: 3
}]
});
});
});

I worked more on solution and I found A way to hide the y-axis, by changing its height to 0% on the series hide event. I'm also increasing the axis height back to 25% in the series show event.
plotOptions: {
series: {
events: {
hide: function (event) {
this.yAxis.update({
height: '0%'
});
},
show: function (event) {
this.yAxis.update({
height: '25%'
});
}
}
}
},
Full code
Edit:
I found a way to resize the others y-axis when one of them is hidden or one the axis is displayed.
You can check the full code.
$(function () {
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-ohlcv.json&callback=?', function (data) {
var data1 = [ [100,0], [150,1], [150,0], [200,0], [300,1], [400,0], [500,1] ];
var data2 = [ [100,1], [200,0], [300,1], [400,0], [500,0] ];
var data3 = [ [100,1], [200,1], [300,0], [400,0], [500,1] ];
var data4 = [ [100,0], [200,1], [300,1], [400,0], [500,0] ];
// create the chart
var chart = $('#container').highcharts('StockChart', {
title: {
text: 'AAPL Historical'
},
legend: {
enabled: true
},
plotOptions: {
series: {
marker: {
enabled: true,
radius : 2
},
events: {
hide: function (event) {
var serieYAxis = this.yAxis;
serieYAxis.visivel = false;
serieYAxis.update({
height: '0%',
title: {
style: {"display":"none"}
}
});
var axis = this.chart.yAxis.filter(
function (axis) {
return axis.visivel == null || axis.visivel;
}
);
resizeAxis(axis);
},
show: function (event) {
this.yAxis.visivel = true;
this.yAxis.update({
title: {
style: {"display":"initial"}
}
});
var axis = this.chart.yAxis.filter(
function (axis) {
return axis.visivel == null || axis.visivel;
}
);
resizeAxis(axis);
}
}
}
},
tooltip: {
pointFormatter: function() {
var state = (this.y == 1 ? "Active" : "Inactive");
var tooltip = '<span style="color:' + this.color + '">\u25CF</span> ' + this.series.name + ': <b>' + state + '</b><br/>'
return tooltip;
}
},
yAxis: [{
height: '25%',
offset: 0,
lineWidth: 2,
labels: {enabled: false},
title : {
text: "y0"
}
}, {
top: '25%',
height: '25%',
offset: 0,
lineWidth: 2,
labels: {enabled: false},
title : {
text: "y1"
}
}, {
top: '50%',
height: '25%',
offset: 0,
lineWidth: 2,
labels: {enabled: false},
title : {
text: "y2"
}
}, {
top: '75%',
height: '25%',
offset: 0,
lineWidth: 2,
labels: {enabled: false},
title : {
text: "y3"
}
}],
series: [{
name: 'Data1',
data: data1,
step: true,
yAxis: 0
}, {
name: 'Data2',
data: data2,
step: true,
yAxis: 1
}, {
name: 'Data3',
data: data3,
step: true,
yAxis: 2
}, {
name: 'Data4',
data: data4,
step: true,
yAxis: 3
}]
});
});
});

Reload in Ext js is not working

What I Need:
When user clicks on a reload button, then data should be reloded.
Example: http://docs.sencha.com/extjs/4.1.3/#!/example/charts/Pie.html.
The example has helped but I cannot reload data in pie chart. Here is my code:
Ext.onReady(function () {
store.loadData(generateData());
var donut = false,
panel1 = Ext.create('widget.panel', {
width: 800,
height: 600,
title: 'Semester Trends',
renderTo: Ext.getBody(),
layout: 'fit',
tbar: [{
text: 'Reload Data',
handler: function() {
Ext.Msg.alert("click");
store.loadData(generateData());
}
},
{
text: 'Save Chart',
handler: function() {
Ext.MessageBox.confirm('Confirm Download', 'Would you like to download the chart as an image?', function(choice){
if(choice == 'yes'){
chart.save({
type: 'image/png'
});
}
});
}
},
{
enableToggle: true,
pressed: false,
text: 'Donut',
toggleHandler: function(btn, pressed) {
var chart = Ext.getCmp('chartCmp');
chart.series.first().donut = pressed ? 35 : false;
chart.refresh();
}
}],
items: {
xtype: 'chart',
id: 'chartCmp',
animate: true,
store: store,
shadow: true,
legend: {
position: 'right'
},
insetPadding: 60,
theme: 'Base:gradients',
series: [{
type: 'pie',
field: 'temperature',
showInLegend: true,
donut: donut,
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function(storeItem, item) {
//calculate percentage.
var total = 0;
store.each(function(rec) {
total += rec.get('date');
});
this.setTitle(storeItem.get('temperature') + ': ' + storeItem.get('date') );
}
},
highlight: {
segment: {
margin: 20
}
},
label: {
field: 'temperature',
display: 'rotate',
contrast: true,
font: '18px Arial'
}
}]
}
});
});
I've also used a sencha example url: http://try.sencha.com/extjs/4.0.7/examples/charts/pie/viewer.html but it's not working.
I have to reload the data in charts. My data is loaded into the chart, but it is not able to be reloaded.
example-data.js code :
Ext.onReady(function() {
window.generateData = function(){
var data = [];
data.push(
{ temperature: 86, date: new Date(2014, 1, 4, 8) },
{ temperature: 20, date: new Date(2014, 1, 5, 7) },
{ temperature: 75, date: new Date(2014, 1, 1, 11) },
{ temperature: 10, date: new Date(2014, 1, 1, 7) },
{ temperature: 46, date: new Date(2014, 1, 1, 12) }
);
return data;
};
window.store = Ext.create('Ext.data.JsonStore', {
fields: ['temperature', 'date'],
data: generateData()
});
window.loadTask = new Ext.util.DelayedTask();
});

var chartId = Ext.getStore('myStore');
ChartId.refresh();
try once

Categories