Develop Reference

How to show multiple graphs in drilldown (highcharts)?

NET MVC Project, where I use Highcharts. In my charts i have columns and a spline.
I have already implemented drilldown for my chart and it works perfectly, but only for the columns. On the first level the columns and the spline is shown, but when I trigger drilldown only the columns are shown. data2 should be the spline.
var mychart = Highcharts.chart('container', {
chart: {
zoomType: 'xy',
spacingBottom: 40,
spacingTop: 40,
events: {
// DRILLDOWN
drilldown: function (e) {
//Some variables id, func
$.getJSON(`/Home/GetDataForMinuteDrilldown?id=${id}&function=${func}`, function (data) {
console.log(data);
var durationArrMinutes = data.map(function (item) {
return item['minuteavg'];
});
var errorArrayMinutes = data.map(function (item) {
return item['errorsperminute']
});
var minuteArray = data.map(function (item) {
return {
name: drill + ":" + item['minute'],
y: item['minuteavg'],
drilldown: item['minute']
};
});
data2 = {
name: 'Errors per Minute',
type: 'spline',
data: errorArrayMinutes,
tooltip: {
valueSuffix: ' '
}
}
data = {
name: 'Average Duration per Minute',
type: 'column',
yAxis: 1,
data: minuteArray,
tooltip: {
valueSuffix: ' ms'
},
data2 //I think this is the error, but I i know no solution
}
console.log('Data:')
console.log(data);
mychart.hideLoading();
mychart.addSeriesAsDrilldown(e.point, data);
});
}
}
},
title: {
text: 'Performance and Error Analytics'
},
subtitle: {
text: 'Analytics of: ' + func
},
xAxis: [{
type: 'category',
crosshair: true
}],
yAxis: [{ // Primary yAxis
labels: {
format: '{value}',
style: {
color: Highcharts.getOptions().colors[1]
}
},
title: {
text: 'Errors',
style: {
color: Highcharts.getOptions().colors[2]
}
}
}, { // Secondary yAxis
title: {
text: 'Duration in ms',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value} ms',
style: {
color: Highcharts.getOptions().colors[0]
}
},
opposite: true
}],
tooltip: {
shared: true
},
legend: {
layout: 'vertical',
align: 'center',
x: 0,
verticalAlign: 'bottom',
y: 50,
floating: true,
backgroundColor:
Highcharts.defaultOptions.legend.backgroundColor || // theme
'rgba(255,255,255,0.25)'
},
series: [{
name: 'Average Duration per Hour',
type: 'column',
yAxis: 1,
data: durationPerHourArray,
tooltip: {
valueSuffix: ' ms'
}
}, {
name: 'Errors',
type: 'spline',
data: errorArray,
tooltip: {
valueSuffix: ' '
}
}],
drilldown: {
activeAxisLabelStyle: {
textDecoration: 'none',
fontStyle: 'normal',
color: 'black'
},
series: []
}
});

The addSeriesAsDrilldown method allows to add only one series to drilldown. From source code:
Chart.prototype.addSeriesAsDrilldown = function (point, options) {
this.addSingleSeriesAsDrilldown(point, options);
this.applyDrilldown();
};
Instad of addSeriesAsDrilldown, you can use internal addSingleSeriesAsDrilldown method to add both series and call applyDrilldown:
mychart.addSingleSeriesAsDrilldown(e.point, data);
mychart.addSingleSeriesAsDrilldown(e.point, data2);
mychart.applyDrilldown();
Live demo: http://jsfiddle.net/BlackLabel/obukspae/
Source code: https://code.highcharts.com/modules/drilldown.src.js

Highchart: how to update a dynamic chart by clicking on a button?

I intend to have a button on my web page so that upon clicking a button, a point will be added to a chart without redrawing the whole chart (the chart is a modified version of this http://www.highcharts.com/demo/dynamic-update). However, my current code is not working.
Here is the code in concern: http://jsfiddle.net/wtvaz9gc/7/
var series;
$(function drawCharts(numberOfPoint) {
// if(typeof chartData == undefined){
// chartData = $(dataStore.getXml());
// }
$("#b").click(function(){
series.addPoint([3,3]);
})
$(document).ready(function () {
Highcharts.setOptions({
global: {
useUTC: false
}
});
$('#container').highcharts({
chart: {
type: 'line',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
load: function () {
series = this.series[0];
// window.myGlobal1 = this.series[0].data[this.series[0].data.length - 1].y;
// console.log(window.myGlobal1 + " " + this.series[0].data[this.series[0].data.length - 1].y);
},
}
},
title: {
text: ''
},
xAxis: {
title: {
text: 'Jahre'
},
// gridLineWidth: 0,
// lineWidth:1,
startOnTick: true,
tickPixelInterval: 40,
min: 0,
max: 10,
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
yAxis: {
title: {
text: 'Vermögen(in EUR)'
},
labels: {
enabled: true
},
min: 0,
max: 100,
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
enabled : false,
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' +
Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
Highcharts.numberFormat(this.y, 2);
}
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
series: [{
name: 'Random data',
data: ($(function () {
// generate an array of random data
var data = [],
time = (new Date()).getTime(),
i, preValue;
for (i = 0; i < numberOfPoint; i += 1) {
if(i == 0){
data.push({
x: i,
y: 10
});
} else {
data.push({
x: i,
y: chartData["wealth"][0][i]
});
}
}
// showMsg(data);
// console.log(data);
return data;
}()))
}]
});
});
});
When I tries to run it in chrome, I got the following error report:
highcharts.js:Uncaught TypeError: i.splice is not a function
addPoint # highcharts.js:...
How should I use the function "addPoint" in this case?
Or should I use other method to achieve the purpose?

There is something wrong with the function generating your initial data, but addPoint is working fine:
var series;
$(function drawCharts(numberOfPoint) {
// if(typeof chartData == undefined){
// chartData = $(dataStore.getXml());
// }
$("#b").click(function(){
series.addPoint([10,10]);
})
$(document).ready(function () {
Highcharts.setOptions({
global: {
useUTC: false
}
});
$('#container').highcharts({
chart: {
type: 'line',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
load: function () {
series = this.series[0];
// window.myGlobal1 = this.series[0].data[this.series[0].data.length - 1].y;
// console.log(window.myGlobal1 + " " + this.series[0].data[this.series[0].data.length - 1].y);
},
}
},
title: {
text: ''
},
xAxis: {
title: {
text: 'Jahre'
},
// gridLineWidth: 0,
// lineWidth:1,
startOnTick: true,
tickPixelInterval: 40,
min: 0,
max: 10,
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
yAxis: {
title: {
text: 'Vermögen(in EUR)'
},
labels: {
enabled: true
},
min: 0,
max: 100,
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
enabled : false,
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' +
Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
Highcharts.numberFormat(this.y, 2);
}
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
series: [{
name: 'Random data',
data: [1,2,3]
}]
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.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; height: 400px; margin: 0 auto"></div>
<button id="b" href="#" >AddPoints</button>

I am not sure what you are trying to do in your series.data function but removing all that code and defining your chart in your click event so it knows what series is does add the point [3,3].
Series declaration now:
series: [{
name: 'Random data',
data: []
}]
And the click function (no moved after the chart code):
$("#b").click(function() {
var chart = $('#container').highcharts();
chart.series[0].addPoint([3, 3]);
})
Live demo.

HighCharts with Series datet/time

[{"name":"M3","data":[["2014-04-16 23:03:59","0"],["2014-04-15 17:48:37","0"],["2014-04-15 17:43:16","1"],["2014-04-15 17:42:52","0"],["2014-04-15 17:36:19","1"],["2014-04-15 17:35:43","0"],["2014-04-15 17:35:31","0"],["2014-04-15 17:30:22","0"],["2014-04-15 17:27:47","1"],["2014-04-15 17:26:00","1"],["2014-04-15 17:19:28","1"],["2014-04-15 17:00:26","0"],["2014-04-15 16:53:18","0"]]},{"name":"M2","data":[["2014-04-16 23:03:47","0"],["2014-04-15 17:47:25","0"],["2014-04-15 17:33:20","1"],["2014-04-15 17:30:10","0"],["2014-04-15 16:57:51","0"]]},{"name":"M1","data":[["2014-04-15 17:47:37","0"],["2014-04-15 17:45:15","0"]]}]
The above is the JSON data for HighCHarts wherein I need to set the X axis to date/time and Y to status . The JSON is generated and attached to the series property and is used as below: This is not plotting at all.
var handlerURL = "http://localhost:50687/Handler.ashx?";
$.ajax({
url: handlerURL,
type: "GET",
datatype: "json",
contentType: 'application/json',
complete: function (json) {
jsonData = json.responseText; alert(jsonData);
}
});
options = {
chart: {
renderTo: 'container',
type: 'spline',
marginRight: 130,
marginBottom: 50
},
setOptions: ({
global: { useUTC: true }
}),
title: {
text: 'Live Data',
x: -20
},
subtitle: {
text: '',
x: -30
},
xAxis: {
type: 'datetime',
tickPixelInterval: 100,
plotLines: [{
width: 5,
color: '#808080'
}]
},
yAxis: {
min: 0, max: 1,
title: {
text: 'Status'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' +
this.x + ': ' + this.y;
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
series: []
}
options.series = jsonData;
chart = new Highcharts.Chart(options);
});

Pass Ajax data in highcharts Combination chart

I'm trying to pass the data(line data and pie_data) in a combination chart. I'm able to pass the pie_data but unable to pass the line data. Here is my jsFiddle Link
Please suggest where I'm going wrong?
Here is my code.
$(function () {
var line_data = [{ // this is AJAX returned line_data.
'data': [
[1383741000000, 1608.3000000000002],
[1383741900000, 1611.9999999999973],
[1383742800000, 1612.299999999997]
],
'name': 'Bangalore'
}, {
'data': [
[1383741000000, 54.2],
[1383741900000, 54.300000000000004],
[1383742800000, 54.300000000000004]
],
'name': 'New Delhi'
}];
// this is AJAX returned pie_data.
// I'm able to get the pie chart, but not the line chart.
var pie_data = [['Jane',13], ['Jnanae',33] , ['Jasvdwdne',113]];
$('#container').highcharts({
chart: {
},
title: {
text: 'Combination chart'
},
xAxis: {
type: 'datetime'
},
series: [{
type: 'spline',
name: 'Average',
data: line_data,
marker: {
lineWidth: 2,
lineColor: Highcharts.getOptions().colors[3],
fillColor: 'white'
}
}, {
type: 'pie',
name: 'Total consumption',
data: pie_data,
center: [100, 80],
size: 100,
showInLegend: false,
dataLabels: {
enabled: false
}
}]
});
});

Try this out:- http://jsfiddle.net/5yzb2/6/
JS:-
$(function () {
var seriesOptions = [];
var line_data = [{ // this is AJAX returned line_data.
data: [
[1383741000000, 1608.3000000000002],
[1383741900000, 1611.9999999999973],
[1383742800000, 1612.299999999997]
],
name: 'Bangalore'
}, {
data: [
[1383741000000, 54.2],
[1383741900000, 54.300000000000004],
[1383742800000, 54.300000000000004]
],
name: 'New Delhi'
}];
// this is AJAX returned pie_data.
// I'm able to get the pie chart, but not the line chart.
var pie_data = [
['Jane', 13],
['Jnanae', 33],
['Jasvdwdne', 113]
];
//Adding all data seriesOptions
$.each(line_data, function (i, name) {
seriesOptions[i] = {
type: 'spline',
name: this.name,
data: this.data
};
});
seriesOptions[seriesOptions.length] = {
type: 'pie',
name: 'Total consumption',
data: pie_data,
center: [100, 80],
size: 100,
showInLegend: false,
dataLabels: {
enabled: false
}
};
$('#container').highcharts({
chart: {},
title: {
text: 'Combination chart'
},
xAxis: {
type: 'datetime'
},
tooltip: {
formatter: function () {
var s;
if (this.point.name) { // the pie chart
s = '' + this.point.name + ': ' + this.y + ' fruits';
} else {
s = '' + this.x + ': ' + this.y;
}
return s;
}
},
labels: {
items: [{
html: 'Total fruit consumption',
style: {
left: '40px',
top: '8px',
color: 'black'
}
}]
},
series: seriesOptions
});
});

Cannot get data to display on chart

I am receiving data correctly in my console from the mtgox api. However, I cannot get the data to display on my chart. I'm using highcharts. Any help is appreciated. My code is posted below. Thanks.
Javascript code:
$(document).ready(function() {
$.ajax({
url: "/chart/ajax_get_chart", // the URL of the controller action method
dataType: "json",
type: "GET",
success: function(result) {
var result = JSON.parse(result);
var date = new Array();
var price = new Array();
for (var i = 0; i < result.length; i++) {
date.push(result[i]['date']);
price.push(result[i]['price']);
}
$(function () {
console.log(date);
$('#container').highcharts({
chart: {
type: 'line',
marginRight: 130,
marginBottom: 25
},
title: {
text: 'Bitcoin Price',
x: -20 //center
},
subtitle: {
text: 'Source: MtGox.com',
x: -20
},
xAxis: {
categories: 'datetime'
},
yAxis: {
title: {
text: 'Price'
},
plotLines: [{
value: 'Price',
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: '°C'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
series: [{
name: 'Bitcoin',
data: price
}]
});
});
}
});
});
Model:
public function ajax_get_chart() {
$quotes = $this->rest->get('api/1/BTCUSD/trades/fetch');
$series_data = array();
$results = $quotes->return;
foreach ($results as $quote)
{
$series_tmp = array(
'date' => $quote->date,
'price' => $quote->price
);
$series_data[] = $series_tmp;
}
return json_encode($series_data);
}
}

Try changing this:
$('#container').highcharts({
chart: {
type: 'line',
marginRight: 130,
marginBottom: 25
},
to this:
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
type: 'line',
marginRight: 130,
marginBottom: 25
},