Reload in Ext js is not working

Reload in Ext js is not working - javascript

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

Related

Create and update multiple series in Zingchart

I'm trying to graph some Network data in Realtime using Zingchart. I'm using websockets to send data from a twisted pyton server to Zingchart.
Is there any way to identify which serie to update? For instance if a have this serie:
'series': [
{
'text': 'Serie 1',
'values': []
},
{
'text': 'Series 2',
'values': []
}
]
use "text" or another id to identify the serie to update with the data sent via websockets? Also is it possible to create series dynamically from the websocket?

Well, It might not be a right solution for you.
you can just write code below;
zingchart.exec('myChart', 'appendseriesvalues', {
plotindex : 0,
values : [[time,newValue-20]]
});
zingchart.exec('myChart', 'appendseriesvalues', {
plotindex : 1,
values : [[time,newValue+10]]
});
The point is you can set right order of the plotindex attribute;
I modified script source from the site below, see how it works.
Here is a complete source;
<html>
<head>
<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
<script>
zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/";
ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "ee6b7db5b51705a13dc2339db3edaf6d"];
</script>
<style>
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.zc-ref {
display: none;
}
</style>
</head>
<body>
<div id='myChart'><a class="zc-ref" href="https://www.zingchart.com/">Charts by ZingChart</a></div>
<script>
var myConfig = {
gui: {
contextMenu: {
position: 'right',
docked: true,
alpha: 0.9,
item: {
textAlpha: 1
},
button: {
visible: true
}
}
},
graphset: [{
type: 'line',
borderColor: "#cccccc",
borderWidth: 1,
borderRadius: 2,
plot: {
aspect: 'spline'
},
plotarea: {
margin: 'dynamic'
},
utc: true,
timezone: 9,
title: {
text: 'Uniform Step Time Series Line Chart',
adjustLayout: true,
align: 'left',
marginLeft: '15%'
},
legend: {
draggable: true,
backgroundColor: 'transparent',
header: {
text: "Facility N",
backgroundColor: '#f0f0f0'
},
marker: {
visible: false
},
//item: {
// margin: '5 17 2 0',
// padding: '3 3 3 3',
// fontColor: '#fff',
// cursor: 'hand'
//},
verticalAlign: 'middle',
borderWidth: 0
},
scaleX: {
//minValue: 1484870400000, //set minValue timestamp
//minValue: 1512018819470,
//step: 'day', //set step for scale
step: '30minute',
//step: 'minute',
maxItems: 7,
itemsOverlap: true,
zooming: true,
transform: {
type: 'date',
all: "%d %M %Y<br>%g:%i:%s"
}
},
preview: {
adjustLayout: true,
live: true
},
scaleY: {
step: 50,
label: {
text: 'Sensor'
},
guide: {
lineStyle: 'solid'
}
},
crosshairX: {
lineColor: '#555',
plotLabel: {
backgroundColor: '#fff',
multiple: true,
borderWidth: 2,
borderRadius: 2,
},
marker: {
size: 5,
borderWidth: 1,
borderColor: '#fff'
}
},
tooltip: {
visible: false
},
series: [{
values: [],
text: 'Sensor FC-456',
legendItem: {
backgroundColor: '#29A2CC',
borderRadius: 2
}
}, {
values: [],
text: 'Sensor AB-265',
legendItem: {
backgroundColor: '#D31E1E',
borderRadius: 2
}
}, {
values: [],
text: 'Sensor DC-445',
legendItem: {
backgroundColor: '#7CA82B',
borderRadius: 2
}
}, {
values: [],
text: 'Sensor ER-985',
legendItem: {
backgroundColor: '#EF8535',
borderRadius: 2
}
}]
}]
};
zingchart.render({
id: 'myChart',
data: myConfig,
height: '100%',
width: '100%'
});
//Set up of a websocket
var ws = new WebSocket('ws://65.50.232.201:8888/', 'zingchart');
//var ws = new WebSocket('ws://localhost:8080/examples/websocket/chartProgrammatic');
//var ws = new WebSocket('ws://192.9.112.69:8080/examples/websocket/sychart');
//Tell our internal server what to send.
ws.onopen = function(){
//console.log("########send##########");
ws.send('zingchart.feed');
ws.send('zingchart.push');
ws.send('zingchart.getdata');
}
//Setup an event to call a ZingChart API Method to update our chart.
ws.onmessage = function (e) {
console.log("===== \n " + JSON.stringify(e.data));
console.log("===== \n ");
//var data = JSON.parse(e.data);
var data = JSON.parse(e.data);
var newValue = data['plot0'][1];
var time = data['plot0'][0];
//console.log("====> " + time);
//console.log("====> " + newValue);
zingchart.exec('myChart', 'appendseriesvalues', {
plotindex : 0,
values : [[time,newValue-20]]
});
zingchart.exec('myChart', 'appendseriesvalues', {
plotindex : 1,
values : [[time,newValue+10]]
});
zingchart.exec('myChart', 'appendseriesvalues', {
plotindex : 2,
values : [[time,newValue+150]]
});
zingchart.exec('myChart', 'appendseriesvalues', {
plotindex : 3,
values : [[time,newValue+200]]
});
};
ws.onclose = function(event) {
console.log('Client notified socket has closed',event);
};
</script>
</body>
</html>
The output is as follows;
I hope it will help you.

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
}]
});
});
});

Loading json data to highstocks with multiple series and adding TimeStamp to xAxis

How to load json data to multiple series and add Time to xAxis in HighStock?
And any idea how to add multiple yAxis on the right and left of the HighStock chart?
I tried to convert to json structure ["name": data:[]] but i can't find how to do it. Please help.
My code is in ASP.Net MVC 4:
public JsonResult GetData()
{
var chart = new List<object>();
chart.Add( new { Speed = 50, Tank = 201.56, odomoter = 2319.956, Time = "05/04/2015 23:53:07" } );
chart.Add( new { Speed = 80, Tank = 201.56, odomoter = 2319.956, Time = "05/04/2015 23:52:06" } );
chart.Add( new { Speed = 90, Tank = 201.56, odomoter = 2191.907, Time = "05/04/2015 23:51:06" } );
var jss = new JavaScriptSerializer();
var output = jss.Serialize( chart );
return Json( output, JsonRequestBehavior.AllowGet );
}
$(function () {
$.getJSON('GetData', function(jdata) {
alert(jdata);
// Create the chart
$('#container').highcharts('StockChart', {
chart: {
type: 'spline',
zoomType: 'xy'
},
rangeSelector: {
buttons: [{
type: 'hour',
count: 1,
text: '1h'
}, {
type: 'day',
count: 2,
text: '2d'
}, {
type: 'week',
count: 1,
text: '1w'
}, {
type: 'month',
count: 1,
text: '1m'
}, {
type: 'year',
count: 1,
text: '1y'
}, {
type: 'all',
text: 'All'
}],
inputEnabled: true, // it supports only days
selected: 0 // day
},
//xAxis: {
// minRange: 3600 * 1000, // one hour
// type: 'datetime',
// dateTimeLabelFormats: { minute: '%H:%M', day: '%A. %e/%m' },
// // minRange: 15*60*1000,
// //maxZoom: 48 * 3600 * 1000,
// labels: {
// rotation: 330,
// y: 20,
// staggerLines: 1
// }
//},
yAxis: [{ // Primary yAxis
labels: {
format: '{value}°C',
style: {
color: '#89A54E'
}
},
title: {
text: 'Temperature',
style: {
color: '#89A54E'
}
}
}, { // Secondary yAxis
title: {
text: 'Consumo',
style: {
color: '#4572A7'
}
},
labels: {
format: '{value} Kw',
style: {
color: '#4572A7'
}
},
opposite: true
}],
title: {
text: 'AAPL Stock Price'
},
series: data
//series: [{
// name: 'AAPL',
// data: data,
// tooltip: {
// valueDecimals: 2
// }
//}]
});
});
});

Set enable/disable 3D mode with Highcharts

I made a form to change values dinamically in my chart. I can change title, subtitle, etc, but... How can I change to set enabled or disabled 3D mode??
$(document).ready(function () {
//Title inputText
$('#gra_title').blur(function(){
chart.setTitle({ text: $('#gra_title').attr("value") });
});
//Subtitle inputText
$('#gra_subtitle').blur(function(){
chart.setTitle(null, { text: $('#gra_subtitle').attr("value") });
});
//Credits checkbox
$('#gra_credits_visible').click(function () {
if ($('#gra_credits_visible').is(':checked')){
chart.credits.show();
}else{
chart.credits.hide();
}
});
......... //More events to change chart
//3D checkbox - MY PERSONAL BUG
$('#gra_3d_visible').click(function () {
if ($('#gra_3d_visible').is(':checked')){
chart.options.chart.options3d.enabled = true;
}else{
chart.options.chart.options3d.enabled = false;
}
chart.redraw();
// return TRUE or FALSE, but don't change 3D/2D mode
alert(chart.options.chart.options3d.enabled);
});
});
This is my chart:
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
marginRight: 0,
events: {
load: function () {
this.credits.element.onclick = function () {
window.open('http://www.url.com', '_blank');
}
}
},
marginTop: 80,
type: 'column',
options3d: {
enabled: true,
alpha: 15,
beta: 15,
viewDistance: 25,
depth: 90
}
},
plotOptions: {
column: {
depth: 90
}
},
credits: {
enabled: true,
text: 'MyWeb.com',
style: {
cursor: 'pointer',
color: '#909090',
fontSize: '10px'
}
},
title: {
text: 'Población Mundial'
},
subtitle: {
text: 'Fuente: Wikipedia.org'
},
xAxis: {
title: {
text: 'Continentes'
},
categories: ['Africa', 'América', 'Asia', 'Europa', 'Oceanía']
},
yAxis: {
title: {
text: 'Población (millones)'
},
},
series: [{
name: 'Año 1800',
data: [107, 31, 635, 203, 2]
}]
});
I've looking for in API Documentation but I didn't find nothing.

Unfortunately you need destroy and create chart, update option for 3d is not available.

We Keep Coding

JavaScript is the programming language of the Web.

Reload in Ext js is not working - javascript

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

Related

Create and update multiple series in Zingchart

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

Hide/Show yaxis on series hide/show event

Loading json data to highstocks with multiple series and adding TimeStamp to xAxis

Set enable/disable 3D mode with Highcharts

Categories

Resources