We Keep Coding

Pie of a Pie chart in HighCharts

I have a question regarding to Highcharts option for plotting a "pie-of-a-pie" chart. I need to show something similar to the one: https://www.amcharts.com/demos/pie-of-a-pie/?theme=material Can i do the same thing in Highcharts? If yes please do help.
If not possible in High Charts, can you please help in amcharts only?

Yes, you can achieve that result in Highcharts. You can use two pie series and update one of them in series.point.events.click funtion. For example:
series: [{
data: [{
y: 1,
details: [1, 3, 2]
}, {
y: 2,
details: [4, 31, 2]
}, {
y: 3,
details: [14, 3, 2]
}],
point: {
events: {
click: function() {
var series = this.series.chart.series;
series[1].setData(this.details.slice());
}
}
},
center: [200, 100],
size: 200
}, {
size: 100,
center: [500, 100],
data: []
}]
Live demo: http://jsfiddle.net/BlackLabel/6m4e8x0y/4996/
API Reference:
https://api.highcharts.com/highcharts/series.pie.size
https://api.highcharts.com/highcharts/series.pie.center
https://api.highcharts.com/highcharts/series.pie.point.events.click
https://api.highcharts.com/class-reference/Highcharts.Series#setData

Highcharts stream graph - how to make 1:1 scale by Y axis?

Here is my code - https://jsfiddle.net/rxqpt8u4/1/
var colors = Highcharts.getOptions().colors;
Highcharts.chart('container', {
chart: {
type: 'streamgraph',
marginBottom: 30,
zoomType: 'x'
},
yAxis: {
min:0
},
// Data parsed with olympic-medals.node.js
series: [
{
"name": "Austria",
"data": [
2, 3, 4, 5, 5, 6, 6, 6, 7
]
}]
});
Can't understand why values dont scales 1:1.
Instead of that, they scale 0.5:1.
Please advise.

The axes adapt to the data and they are independent of each other. To have the same scale on the axes set the same tickInterval, max and min properties:
events: {
load: function() {
var xAxis = this.xAxis[0];
this.yAxis[0].update({
tickInterval: xAxis.tickInterval,
max: xAxis.dataMax
});
}
}
Live demo: https://jsfiddle.net/BlackLabel/289jtzp1/

How to set new data then reverse to original data in Highcharts?

I have two arrays I would like to display in Highcharts with custom buttons : Day and Week.
To reset the chart and display the original data I need a reset button but my problem is that it fails to render this specific array (original_data).
What could be the reason of this issue and how can I sort it out ?
Thank you,
JSFiddle
original_data = [1, 2, 3, 4, 5];
new_data1 = [6, 7, 6, 7, 6];
new_data2 = [15, 14, 13, 12, 11];
var mychart = Highcharts.chart('container', {
series: [{
name: 'Total',
data: original_data,
type: 'area'
}
],
exporting: {
buttons: {
first_Button: {
text: 'Day',
onclick: function () {
mychart.series[0].setData(new_data1);
}
},
second_Button: {
text: 'Week',
onclick: function () {
mychart.series[0].setData(new_data2);
}
},
third_Button: {
text: 'Reset',
onclick: function () {
mychart.series[0].setData(original_data);
}
}
}
}
});

You passed original_data in configuration object. Now everytime you call setData(new_data) you override original_data cause it works as reference.
So when you click 'Week' button in the background it looks like:
original_data = new_data2;
The solution is to pass clone of original_data in configuration object.
Example: JSFiddle

Highcharts: Add point to chart, then remove, then add it again... then repeat

I am using the Highcharts API, and am using a Column Range chart to represent a schedule of events. The vertical axis represents event IDs, the horizontal axis represents the time.
User should be able to add a single event by clicking the chart.
Once added, user should be able to click the newly added event to remove it.
After removal, user should then be able to click the chart again to re-add the new event in another location.
For the most part, this all works fine - See JS Fiddle Demo
On the demo, first click the chart to add a red bar. Then click the red bar to remove it. This is exactly as it should work. The problem is that if you try to add the red bar again after removing it, the categories on the vertical axis increase.
How do I add a point, then remove it, then add it again without "regenerating" extra categories on the vertical axis?
Here's the code (working JS fiddle is linked above). I've tried to simplify it as much as possible in order to focus on the problem at hand.
$(function () {
var flag = false;
$('#container').highcharts({
chart: {
type: 'columnrange',
inverted: true,
events: {
click: function (e) {
if (!flag) {
var y = e.yAxis[0].value;
this.series[0].addPoint({
name: 'New',
low: y,
high: (y + 10),
color: 'red',
events: {
click: function () {
this.remove();
flag = false;
}
}
});
flag = true;
}
}
}
},
xAxis: {
categories: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
},
tooltip: {
enabled: false
},
series: [{
name: 'Temperatures',
data: [
[-9.7, 9.4],
[-8.7, 6.5],
[-3.5, 9.4],
[-1.4, 19.9],
[0.0, 22.6],
[2.9, 29.5],
[9.2, 30.7],
[7.3, 26.5],
[4.4, 18.0],
[3.2, 8.5]
]
}]
});
});
I've read through the Highcharts API and tried everything I can think of but to no avail. Any help is appreciated. Thanks.

A collaborative effort between the OP and myself ...
Re-inject the original x-axis categories and series data :
events: {
click: function () {
this.remove();
chart.xAxis[0].update({
categories: xAxisCategories
});
chart.series[0].update({
data: seriesData
});
flag = false;
}
}
where :
chart = $('#container').highcharts()
xAxisCategories = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
seriesData = [....] (the original series data)
updated fiddle

Is there a way to enter Highchart series data without eval?

I have been working on getting data into a highchart graph with much difficulty.
Eventually I had to go with using eval(data).
Is there a better way to do this?
JSFiddle Example
$(function () {
var test = "[[Date.UTC(2013, 4, 08), 45.95],[Date.UTC(2013, 5, 28), 19.95]]";
$('#container').highcharts({
chart: {
},
xAxis: {
type: 'datetime'
},
series: [{
data: eval(test)
}]
});
});
UPDATE 1
My actual objective is to pass a JSON object into a function (as shown below) then get the required strings and pass them to the series input.
The following is still not working.
function showPriceChart(priceData) {
var json = jQuery.parseJSON(priceData);
var pricePrices = [ json.pricePrices ];
// This works if I use eval below
// var pricePrices = '['+json.pricePrices+']';
/// Other chart config goes here
series: [{
name: 'Retailer Price',
data: pricePrices
}, {
name: 'RRP',
data: rrpPrices
}]
});
}
Here is the JSON object from php using print_r():
{"pricePrices":"[Date.UTC(2013, 4, 8), 67],[Date.UTC(2013, 5, 28), 29]","salePrices":"[Date.UTC(2013, 4, 8), ],[Date.UTC(2013, 5, 28), ]","rrpPrices":"[Date.UTC(2013, 4, 8), 67],[Date.UTC(2013, 5, 28), 67]"}

you were really close from your goal.
The following is working :
(http://jsfiddle.net/G6jrU/3/)
$(function () {
var test =[ [ Date.UTC(2013, 4, 08), 45.95 ],
[ Date.UTC(2013, 5, 28), 19.95 ] ];
$('#container').highcharts({
chart: {
},
xAxis: {
type: 'datetime'
},
series: [{ data : test }]
});
});
Rq : You might use JSON to serialize/unserialize data if you need to.

The problem is that you are using Date.UTC() function, so you need to use eval. How about passing numbers(timestamps in milliseconds) instead of that functions? So, your JSON should look this way:
{
"pricePrices":[1367971200000, 67],[1372377600000, 29],
"salePrices":[1367971200000, ],[1372377600000, ], //where are values ?!
"rrpPrices":[1367971200000, 67],[1372377600000, 67] //without extra '"'!!
}
Also, there is some missing values for second series, where are they?