Am creating a pie chart using data from http request butthe data is never rendered in a pie chart
I have tried
in the html
<div class="col-md-4" *ngIf="overallready">
<chart [options]="overallinsp" class="chart"></chart>
</div>
in typescript code i have
this._reportService.getOverview(utctime:number) //performs http request
.subscribe(
let dtaval = JSON.parse(JSON.stringify(res.totalinspectiondata));
console.log(dtval)
this.overallinsp = {
credits: {
enabled: false
},
chart: {
...
type: 'pie'
},
title: {
text: ...
},
series: [{
name: 'Brands',
colorByPoint: true,
data:dtval
}]
}
this.overallready = true;
)
The above console.log() produces
[{"name":"Bulker delivered","y":0},{"name":"Normal delivered truck","y":4}]
setting the value manually in the series works that is
series: [{
name: 'Brands',
colorByPoint: true,
data:[{"name":"Bulker delivered","y":0},{"name":"Normal delivered truck","y":4}]
}]
What could be wrong since manually setting the data output works but referencing it fails to work?
Related
I have apex chart in angular that is receiving input from a parent component. See code below
`
#Input() labels: string[] = [];
#Input() series: number[] = [];
constructor() {}
ngOnInit(): void {
this.chartOptions = {
series: this.series,
chart: {
type: 'donut',
width: 200,
},
dataLabels: {
enabled: false,
},
colors: ['#197254', '#62DAB3', '#E2F96F'],
legend: {
show: false,
},
labels: this.labels,
tooltip: {
enabled: false,
},
//dont show data label
plotOptions: {
pie: {
donut: {
size: '80%',
labels: {
show: false,
},
},
},
},
};
}
The series is gotten from the parent after it makes network request.
`
<app-piechart id="pie" [labels]="['Monthly', 'Quaterly', 'Anually']" [series]="[stats.activeSubscriber.subscriptionTypeAggregate.monthly.count, stats.activeSubscriber.subscriptionTypeAggregate.quarterly.count, stats.activeSubscriber.subscriptionTypeAggregate.annually.count]"></app-piechart>
`If i pass random value to the component directly, the pie chart renders well but if i pass in variable into the arrays, it shows like the image below
enter image description here
Please assit
If i pass random value to the component directly, the pie chart renders well but if i pass in variable into the arrays, it shows like the image below
enter image description here
And i confirmed the variables is in the pie chart component using the angular extension on chrome.
I have fixed the issue.
Apparently i was passing string into the series array
like ['1', '2',...]
instead of [1, 2, ..]
I'm using highchart large tree map demo. I'm getting level data on click of each section. But also need to get the data on back button. So I'm using events drill up function to get data on click of back button. below is my code.
this.setState({
data: {
series: [{
type: 'treemap',
layoutAlgorithm: 'squarified',
allowDrillToNode: true,
animationLimit: 1000,
dataLabels: {
enabled: false
},
levelIsConstant: false,
levels: [{
level: 1,
dataLabels: {
enabled: true
},
borderWidth: 0,
}],
data: points,
events: {
click:(e)=>{
console.log(e)
},
drillup:(e)=>{
console.log(e)
}
}
}],
// subtitle: {
// text: 'Click points to drill down. Source: WHO.'
// },
title: {
text: ''
}
}
})
But don't know drill up is not working even click is working and also I added
import drilldown from "highcharts/modules/drilldown";
drilldown(Highcharts);
But still not getting any data. Please help.
Notice that treemap series don't use the drilldown module, but has own drilldown implementation, which logic you can find here: https://code.highcharts.com/modules/treemap.src.js
What you will need to do is render a custom button while clicking the point and attach an update functionality on this button. Something like here:
Demo: https://jsfiddle.net/BlackLabel/gas07t34/
events: {
click() {
let chart = this.chart;
chart.button = chart.renderer.button('back', 500, 0, function() {
chart.series[0].update({
data: data1
})
chart.button.destroy();
}).add()
this.update({
data: data2
})
}
}
API: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#button
API: https://api.highcharts.com/class-reference/Highcharts.Series#update
I am using highcharts to display a bar chart of my data which i am getting from a json file.
I tried following highcharts example for a bar chart for some reason mine is not displaying anything on the chart nor giving me an error.
This is how i am loading my json data for labels and data values - i am returning the data that i want but the issue with display:
chartLabel: any[] = [];
chartValue: any[] = [];
this.serviceFile.getData().subscribe(
data => {
this.result = data;
this.result.forEach(graph =>{
this.chartLabel.push(graph.labelName);
this.chartValue.push(graph.value);
})
});
HTML:
<chart [options]="options"></chart>
chart options:
this.options = {
chart: {
type: 'bar',
margin: 75
},
xAxis: {
categories: this.chartLabel,
title: {
text: null
}
},
yAxis: {
min: 0,
labels: {
overflow: 'justify'
}
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
series: [{
data: this.chartValue
}]
};
I am not sure if the way i created the arrays of my json data are appropriate for the highcharts chart.
I noticed in my console.log the way the data prints out is different which i believe is the cause of the problem and maybe some light on this matter will help:
printout for this.chartValue:
(3)[12,34,54]
what this should look like is:
12,34,54
I have a Highchart graph which receives data from backend in the form of Handlebars expressions. Something like this.
$('#container').highcharts({
xAxis: {
categories: [{{{histKeys}}}]
},
yAxis: {
title: {
text: 'Failure Percentage',
style: {
color: '#cc0000'
}
},
labels: {
format: '{value}%',
style: {
color: '#cc0000'
}
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
credits: {
enabled: false
},
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function() {
var index = this.series.name;
var tfs = epochKeys[Math.ceil(this.x)];
window.location.href = url;
return false;
}
}
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [
{{#each histData as |index|}}
{
name: '{{#key}}',
type: 'spline',
allowPointSelect: true,
{{#each index as |status|}}
{{#if_eq #key "histSuccess"}}
{{/if_eq}}
{{#if_eq #key "histFailure"}}
data: [{{this}}],
{{/if_eq}}
{{/each}}
},
{{/each}}
]
});
Now i make an AJAX call to get data to refresh the graph. How do i pass the new value of Handlebars expressions to the variables used in the Highcharts code.
So the data i receive in the AJAX call contains the values of all these expressions that have been used in the Highcharts function.
Since the code is dynamic, i can't manually update the series values also because the number of lines on the graph differ depending upon the data coming from the backend.
Thanks for any input.
You can get the (already existing) highcharts object in the ajax callback like this:
$('#container').highcharts()
There's in fact a quite good API to interact with this object, documented here: http://api.highcharts.com/highcharts
For starters, you can replace an existing chart by calling addSeries() again. For that to work, your series must have an id, and you add a series with the same id again:
$('#container').highcharts().addSeries({ id: 'myid', data: .... });
In the same way, you can also remove existing series:
$('#container').highcharts().removeSeries('myid');
It's also possible only to replace the data of a series, something along the lines of this:
$('#container').highcharts().getSeries('myid').setData(...);
I hope that is a little help for you.
I have the following scenario in haml:
#ownershipChart{"chart-data" => [["pie1", 100], ["pie2", 150], ["pie3", 200]]}
#ownershipChart{"chart-data" => [["pie4", 45], ["pie5", 50], ["pie6", 20]]}
and in javascript:
$(function(){
$('#ownershipChart').highcharts({
chart: {
type: 'pie'
},
title:{
text: 'Ownership'
},
plotOptions:{
pie:{
allowPointSelect: true
}
},
series: [{
type: 'pie',
name: 'Ownership',
data: $('#ownershipChart').attr('chart-data')
}]
});
});
As you can figure, I'm trying to create one highcharts function that applies across these two charts at the same time. First, I know this is incorrect because $('#ownershipChart').attr('chart-data') isn't returning anything. Second, is this the right way to think about it? I'm currently dynamically generating the haml div id="ownershipChart" so dynamically generating a highcharts js object every time also feels wrong.
What's the best way to generate multiple highcharts when the div ids they are attached to is unknown and varies user by user?
You could instead use a class, and loop through each instance creating the chart as you go. Something like this:
$(function () {
$('.ownershipChart').each(function() {
$(this).highcharts({
chart: {
type: 'pie'
},
title: {
text: 'Ownership'
},
plotOptions: {
pie: {
allowPointSelect: true
}
},
series: [{
type: 'pie',
name: 'Ownership',
data: $(this).attr('chart-data')
}]
});
});
});
Note that the data property is filled by a reference to this, which means the data will be read from the current element in the iteration.