We Keep Coding

Pie Chart Not Popping Up HighCharts

I am trying to make a pie chart that shows that rating of a python course. However every time I try to run it, the pie chart doesn't pop up, only the title. I am using HighCharts to create the pie chart and it is also supposed to be interactive. This is what I am using to create the pie chart. I also don't get any error message. Please help me.
https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/pie-basic
This is my code down below:
import justpy as jp
import justpy as jp
import pandas as pa
from datetime import datetime
from pytz import utc
data = pa.read_csv("reviews.csv", parse_dates=['Timestamp'])
share = data.groupby(['Course Name'])['Rating'].count()
chart_def = """
{
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Browser market shares in January, 2018'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
accessibility: {
point: {
valueSuffix: '%'
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %'
}
}
},
series: [{
name: 'Brands',
colorByPoint: true,
data: [{
name: 'Chrome',
y: 61.41,
sliced: true,
selected: true
}, {
name: 'Internet Explorer',
y: 11.84
}, {
name: 'Firefox',
y: 10.85
}, {
name: 'Edge',
y: 4.67
}, {
name: 'Safari',
y: 4.18
}, {
name: 'Sogou Explorer',
y: 1.64
}, {
name: 'Opera',
y: 1.6
}, {
name: 'QQ',
y: 1.2
}, {
name: 'Other',
y: 2.61
}]
}]
}
"""
def app():
wp = jp.QuasarPage()
h1 = jp.QDiv(a = wp, text = "Analaysis of Course Reviews", classes='text-h3 text-center q-pa-md')
p1 = jp.QDiv(a = wp, text = "These graphs represent course review analaysis")
hc = jp.HighCharts(a= wp, options = chart_def)
hc_data = [{"name":v1, "y":v2} for v1, v2 in zip(share.index, share)]
hc.options.series[0].data = hc_data
return wp
jp.justpy(app)

I had the same problem.
I fixed it by removing (or commenting out) the 2 code lines below, which set the "plotBackgroundColor" and "plotBorderWidth" properties to null:
chart_def = """
{
chart: {
//plotBackgroundColor: null, --> remove or comment out this line
//plotBorderWidth: null, --> remove or comment out this line
plotShadow: false,
type: 'pie'
},
(...)

Highcharts: Add multiple colors to area line chart

I am trying to create a chart like this one:
:
I have already achieved all of the features except the multi colored line of the area chart. I want to show the different gradients of the chart in different colors, thus I need multiple colors on the line.
I have already tested zones like shown here and also common plugins like this. Both do not work. The zones are applied to the area which I do not want and the plugin can only color lines OR areas but not only lines in area charts.
My current Highcharts settings look like this:
{
title: {
text: null
},
xAxis: {
crosshair: true,
labels: {
format: '{value} km'
},
title: {
text: null
},
opposite: true,
startOnTick: true,
endOnTick: false,
min: 0
},
yAxis: {
startOnTick: true,
showFirstLabel: false,
endOnTick: false,
maxPadding: 0.35,
title: {
text: null
},
min: 100,
labels: {
format: '{value} m'
}
},
plotOptions: {
dataGrouping: {
enabled: false
},
showInNavigator: true,
stacking: 'normal',
series: {
dragDrop: {
draggableY: true
},
point: {
events: {
mouseOver: (e) => {
this.chartHover.emit({
distance: e.target.x * 1000
});
},
}
},
},
area: {
dragDrop: {
draggableY: true,
dragPrecisionY: 1
}
}
},
credits: {
enabled: false
},
legend: {
enabled: false
},
chart: {
update: true,
styledMode: true,
marginBottom: 0,
marginRight: 0
},
tooltip: {
headerFormat: '',
pointFormatter: function () {
let point = this;
if (!this.series) {
return;
}
return '<span class="tooltip-area-series-' + this.series.index + '">\u25CF</span> ' + point.series.name + ': <b>' + point.y + 'm</b><br/>';
},
shared: true
},
series: [],
};
Is there an built-in solution for this?
EDIT:
I used the proposed solution by ppotaczek:
series: [{
type: 'areaspline',
id: 'areaSeries',
data: data
}, {
type: 'spline',
linkedTo: 'areaSeries',
data: data,
zoneAxis: 'x',
zones: [{
color: 'red',
value: 2
}, {
color: 'green',
value: 4
}]
}]
This works pretty good, but has some performance pitfalls when you try to add approx. more than 150 zones on desktop browsers.
There is also a small rendering issue - small gaps between the zones.
Best,
Philipp

You can add an extra spline series with zones:
series: [{
type: 'areaspline',
id: 'areaSeries',
data: data
}, {
type: 'spline',
linkedTo: 'areaSeries',
data: data,
zoneAxis: 'x',
zones: [{
color: 'red',
value: 2
}, {
color: 'green',
value: 4
}]
}]
Live demo: http://jsfiddle.net/BlackLabel/8er6y4u3/
API: https://api.highcharts.com/highcharts/series.spline.zones

Angular : SetData to HighChart widget from an array object

i'm using under my ANgular component a highchart widget :
DEMO OF THE CHART : https://www.highcharts.com/demo/pie-legend
from the documentation , using it is like that :
Highcharts.chart('divChart', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: this.nb
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
series: [{
name: 'Brands',
colorByPoint: true,
data: [{
name: 'Microsoft Internet Explorer',
y: 56.33
}, {
name: 'Chrome',
y: 24.03,
sliced: true,
selected: true
}, {
name: 'Firefox',
y: 10.38
}, {
name: 'Safari',
y: 4.77
}, {
name: 'Opera',
y: 0.91
}, {
name: 'Proprietary or Undetectable',
y: 0.2
}]
}]
});
But since am loading dynamically the datat ( chrome , firefox ...) ,
i have now a set fo key/ value data indicationg each browser with its value :
browsers: {[key: string ]: number } = {};
for example my browsers list contains :
chrome (name) -> 60 (value)
firefox -> 30
edge -> 10
....
i wanna inject my browsers list values dynamically to the data of the chart , and not mannually , since my list may contain numerous values.
i think there were some methode called setData , but i don't know if it's usefull.
Ideas ?

Yes there is setData function
http://api.highcharts.com/highcharts/Series.setData
but after you need to update chart http://api.highcharts.com/highcharts/Series.update

How can i get pie chart with dynamic json data in Angular js

in my controller:
calling the web services if the services is success then get the data and pushinig the data into corresponding arrays
for(var i = 0; i < $scope.reportRangeList.length; i++)
{
count++;
if(angular.isNumber($scope.reportRangeList[i].businessName))
{
$scope.nameBusiness.push($scope.reportRangeList[i].businessName);
}else{
$scope.nameBusiness.push(+$scope.reportRangeList[i].businessName);
}
if(angular.isNumber($scope.reportRangeList[i].total1))
{
$scope.total.push($scope.reportRangeList[i].total1);
}else{
$scope.total.push(+$scope.reportRangeList[i].total1);
}
if(count == $scope.reportRangeList.length){
//$log.info("dddd"+ angular.toJson($scope.bname) )
$scope.fetchChart();
$scope.comlete = true;
}
}
and in fetchChart() :
$scope.fetchChart = function(){
$scope.chartConfig = {
title: {
text: ""
},tooltip: {
visible: true,
pointFormat: '<b>{point.name}</b>: {point.percentage:.1f} %',
},
options: {
chart: {
type: 'pie'
},
plotOptions: {
series: {
stacking: ''
},
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
},
showInLegend: true
},
},
legend: {
layout: 'vertical',
align: 'topleft',
verticalAlign: 'top',
borderWidth: 1,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
}
},
/*xAxis: {
categories: $scope.bname
},*/
credits: {
enabled: true
},
seriesDefaults: {
labels: {
template:'{series.name}: <b>{point.percentage:.1f}%</b>',
position: "outsideEnd",
visible: true,
background: "transparent"
}
},
series: [{
type: "pie",
name: "",
data: //$scope.bname,
[
$scope.nameBusiness,$scope.total
//['Firefox', 42.0]
/* ['IE', 26.8],
{
name: 'Chrome',
y: 14.8,
sliced: true,
selected: true
},
['Safari', 6.5],
['Opera', 8.2],
['Others', 0.7]*/
],
}],
loading: false
}
};
I would like to display the pie chart high chart with above data ,in for loop i am try to push only numbers but it shows single line of pie chart even the circle is not formed .with out converting to number type when I was push ,it shows http://www.highcharts.com/errors/14 error .One more thing I can share $scope.reportRangeList[i].businessName is string type and $scope.reportRangeList[i].total1 is number type .
The pie chart is working with hard coded data .Now how can I get pie chart with dynamic json data .

The problem is that businessName is string, and your data format expects to be number. I guess you have pairs businessName + total1 for each slice, that's correct? In that case, create one point for each of pairs:
series: [{
type: "pie",
name: "",
data: [
[ $scope.nameBusiness, $scope.total ] // [name, value] format
]
}],

As I'm working on angular 2, I'll provide solution related to it.. See if it can help you..
Firstly, create a function and call the service which will fetch
result from the server and store the result in a variable.
Then use that variable in data section of your graph in place of static data.
Hope it will solve your issue.

Need to link URL in HighChart

I am working with HighChart Plugin to draw piecharts/Bar Graphs. While clicking the pie-chart parts I want to link other pages or in other words i want to redirect to other page.
Demo Link: http://www.highcharts.com/demo/pie-basic
$(function () {
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Browser market shares at a specific website, 2010'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
format: '<b>{point.name}</b>: {point.percentage:.1f} %'
}
}
},
series: [{
type: 'pie',
name: 'Browser share',
data: [
['Firefox', 45.0],
['IE', 26.8],
{
name: 'Chrome',
y: 12.8,
sliced: true,
selected: true
},
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
]
}]
});
});
Fiddle Link: http://jsfiddle.net/aravindkumarit/M8a3X/
They are not passing ID for the Parts so I am not able to write any event for the pie-chart parts.

Add
events:{
click: function (event) {
alert(event.point.name);
// add your redirect code and u can get data using event.point
}
}
in plotOptions.pie
like this
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
format: '<b>{point.name}</b>: {point.percentage:.1f} %'
},
events:{
click: function (event) {
alert(event.point.name);
// add your redirect code and u can get data using event.point
}
}
}
}
SEE DEMO