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'
},
(...)
Related
I plotted a double donut chart using Highcharts library. My requirement is when I drill down from the initial level, I should be able to plot another double donut chart.
For eg: This is the initial level. Now if I click on Email, it should drill down and show another double donut chart
This is the desired result after drill down
Following is the current code to render chart. For each series data, we have drilldown option which can take a string for eg: 'Email'. I need double donut under the drilldown but drilldown series with same id don't work and I end up getting only 1 donut chart.
Highcharts.chart('container', {
chart: {
type: 'pie',
/* backgroundColor: '#000', */
},
title: {
text: '',
},
subtitle: {
text: '',
},
accessibility: {
announceNewData: {
enabled: true,
},
point: {
valueSuffix: '%',
},
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{point.name}: {point.y:.1f}%',
},
},
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat:
'<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>',
},
series: [
{
innerSize: 150,
size: 200,
name: 'Browsers',
colorByPoint: true,
data: [
{
name: 'Email',
y: 62.74,
drilldown: 'Email',
},
{
name: 'Social Media',
y: 10.57,
drilldown: 'Social Media',
},
{
name: 'Shopping',
y: 7.23,
drilldown: 'Shopping',
},
{
name: 'Trading',
y: 5.58,
drilldown: 'Trading',
},
{
name: 'Others',
y: 4.02,
drilldown: 'null',
},
],
},
{
showInLegend: false,
dataLabels: {
enabled: false,
},
innerSize: 100,
size: 150,
name: 'Email',
colorByPoint: true,
data: [
{
name: 'Email',
y: 52.74,
drilldown: null,
},
{
name: 'Social Media',
y: 15.57,
drilldown: null,
},
{
name: 'Shopping',
y: 12.23,
drilldown: null,
},
{
name: 'Trading',
y: 5.58,
drilldown: null,
},
{
name: 'Other',
y: 4.02,
drilldown: null,
},
],
},
],
drilldown: {
series: [
{
innerSize: 150,
size: 200,
name: 'Email',
id: 'Email',
data: [
['Gsuite', 0.1],
['office365', 1.3],
['Yahoo', 53.02],
],
},
{
innerSize: 100,
size: 150,
name: 'Email',
id: 'Email',
data: [
['user1', 0.1],
['user2', 1.3],
['user3', 53.02],
],
},
],
},
});
This is the current result
Here is the jsfiddle which I am currently working on.
Any help on this will be much appreciated.
Thanks
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
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
Hi I'm trying to update my piechart LIVE without redrawing the piechart, any advice?
this is the function that is being called
var i = 0;
setInterval(function(){
piecharts(i, 1, 2, 3, 4, 5);
i++;
},5000);
function piecharts(sector0Data, sector1Data, sector2Data, sector3Data, sector4Data, sector5Data)
{
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie',
options3d: {
enabled: false,
alpha: 45,
beta: 0
}
},
title: {
text: 'Number of person in each sector'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.y}</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
depth: 35,
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.y} ', //change percentage to y for decimal value
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
name: 'Avg number of person in this sector over the total of ',
colorByPoint: true,
data: [{
name: 'Sector0',
y: sector0Data
},{
name: 'Sector1',
y: sector1Data
},{
name: 'Sector2',
y: sector2Data
},{
name: 'Sector3',
y: sector3Data
},{
name: 'Sector4',
y: sector4Data
}, {
name: 'Sector5',
y: sector5Data
}]
}]
});
}
For every 5 second, my i will increase by 1 and my pie-chart will be drawn, this works fine but it kept redrawing my chart. any advice? thanks. also, i'm using v4.1.8 of highchart
You should use the update() method for this. Init your chart on the DOM ready event and just call a function in order to update data :
Demo
function updatePiechart(sector0Data, sector1Data, sector2Data, sector3Data, sector4Data, sector5Data)
{
var chart = $('#container').highcharts();
chart.series[0].update({
data: [{
name: 'Sector0',
y: sector0Data
},{
name: 'Sector1',
y: sector1Data
},{
name: 'Sector2',
y: sector2Data
},{
name: 'Sector3',
y: sector3Data
},{
name: 'Sector4',
y: sector4Data
}, {
name: 'Sector5',
y: sector5Data
}]
})
}
The reason for the re-render is that you create a new chart every five seconds instead of updating its data.
You need to call the update method for your y point on your chart series data:
chart.series[0].data[0].update(y);
Here is a simple example on how to update the data: Update pie data jsfiddle
Or have a look at the documentation for live data
I am working on a pie chart for the admin dashboard to display some data about the users. I am getting the response from PHP file correctly and store it in result_from_PHP variable as you can see the code below. My problem is, I don't know how to pass this variable result_from_PHP to the series part in the code y: result_from_PHP. Can anyone help please ?
<script type="text/javascript">
$.getJSON("PHP_trader_behav.php", function(data){
$.each(data.result,function(){
var result_from_PHP = this['visitors_count'];
alert(result_from_PHP);
$(function () {
alert(result_from_PHP);
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Browser market shares January, 2015 to May, 2015'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
name: 'Brands',
colorByPoint: true,
data: [{
name: 'Microsoft Internet Explorer',
y: result_from_PHP
}, {
name: 'Chrome',
y: 5000,
sliced: true,
selected: true
}, {
name: 'Firefox',
y: 1000
}, {
name: 'Safari',
y:1000
}, {
name: 'Opera',
y: 4000
}, {
name: 'Proprietary or Undetectable',
y:3000
}]
}]
});
});
});
});
</script>
TRY THIS ONE
y: <?PHP echo result_from_PHP ?>
you have do whatever your wish with in the php tag
Build series array[in the form of json] using $.each , then use that variable into $('#container').highcharts({series:some-variable})
you can study the below link:
JavaScript Arrays