how to add data from mongodb database to highchart-ng - angularjs

This is the highchart code in angular controller
I am using charts for the first time in angularjs.I want to show data from my mongodb database like on x-axis all the names of tasks and on y-axis the total time required by that particular task to complete i.e- Total Duration.
I have added static data for the html to look like the attached image.
I am developing a project using MEAN Stack.I want to how know how do i add the data i get from database to highcharts.
This is how the output should look without statically giving data:
var tasks = ['Task1','Task2','Task3' ]
var res = [26,61,1]
$scope.chartConfig = {
chart: {
type: 'column'
},
title: {
text: 'Task Duration'
},
xAxis: {
categories: tasks,
crosshair: true
},
yAxis: {
min: 0,
title: {
text: 'Task Duration (Hrs)'
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span>
<table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">
{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'Tasks',
data: res
}]
}

Related

Highcharts with heavy data load crashes IE11

I'm using official Highcharts with React on a page to display different measurements. Everything works fine except for IE11 (go figure), which upon a specific scenario crashes the browser.
On the page the user is able to see measurements for daily, weekly, monthly etc. Each of these tabs then renders Highcharts with data for chosen time.
It works fine even in IE11 until user checks tab Monthly and to view the graph in hourly view (standard view for Monthly is a daily chart bar).
When Monthly -> Hourly view, the call responds with an object with about 700 arrays were the data is picked.
I did a test where I stripped the response for that specific scenario so that it showed only 50 entries = still a bit slow but didn't freeze on me.
I've been looking into this since it pretty much matches my issue as well but no luck:
https://github.com/highcharts/highcharts/issues/7725
Also, been trying to figure out how to provide a fiddle for this but the project is quite large which makes it difficult to pick bits and pieces.
So this is basically just a shout out to see if anyone has any other ideas. This works flawlessly in Chrome, Firefox etc.
I think it could be somewhat related to the amount of categories that are being set, just as the Github issue above says. But also, I've tried but no luck (or I did it wrong).
I'll provide the set of options that I have for Highcharts:
const options = {
chart: {
marginTop: 40,
animation: false,
},
title: {
text: ''
},
legend: {
enabled: this.state.resolutionType !== 'allyears',
reversed: true,
floating: true,
padding: 0,
x: 50,
align: 'left',
verticalAlign: 'top',
itemDistance: 5,
symbolRadius: 0,
symbolPadding: 2,
},
series: [{
type: this.state.graphType,
showInLegend: false,
data: this.state.newData,
tooltip: {
valueSuffix: ' :-'
}
},
{
type: this.state.graphType,
name: 'Historical',
visible: this.state.activeHistoricalData || this.state.activePreviousData,
showInLegend: false,
data: this.state.historicalData,
tooltip: {
valueSuffix: ' :-'
}
},
{
type: 'spline',
name: this.props.latestConsumptionContent('shortTemperature'),
visible: this.state.activeTemperature,
showInLegend: false,
showEmpty: false,
data: this.state.newTemp,
yAxis: 1,
tooltip: {
valueSuffix: ' .'
}
}],
plotOptions: {
series: {
maxPointWidth: 40,
connectNulls: true,
events: {
click: event => this.handleChartPointClick(event.point.time)
},
},
column: {
marker: {
enabled: false
}
},
line: {
marker: {
enabled: false
}
},
area: {
fillOpacity: 0.3,
marker: {
enabled: true,
symbol: 'circle'
}
}
},
xAxis: {
categories,
tickInterval: getTickInterval(this.state.resolutionType, this.state.periodTime),
reversedStacks: true,
autoRotation: false
}
},
yAxis: [{
min: 0,
title: {
text: ':-',
align: 'high',
offset: 0,
rotation: 0,
y: -20,
},
labels: {
format: getLabelFormat(this.state.resolutionType, this.state.periodTime),
}
},
{
title: {
text: this.props.latestConsumptionContent('shortTemperature'),
align: 'high',
offset: 0,
rotation: 0,
y: -20,
},
showEmpty: false,
reversed: this.state.reverseTemperatureAxis,
opposite: true
}],
credits: false
};

HIghchart Area Chart display NULL value in a wrong way

I have a series data like this [null,0,null,null,null,null,0.86,null,0,null]
As you can see, there are only three points in it.
However it has been displayed as below,
Please see the demo here,
Highcharts.chart('container', {
chart: {
type: 'area',
spacingBottom: 30
},
title: {
text: 'Fruit consumption *'
},
xAxis: {
categories: ["Term 3_week1","Term 3_week2","Term 3_week3","Term 3_week4","Term 3_week5","Term 3_week6","Term 3_week7","Term 3_week8","Term 3_week9","Term 3_week10"]
},
yAxis: {
title: {
text: 'Y-Axis'
}
},
plotOptions: {
area: {
fillOpacity: 0.5
}
},
credits: {
enabled: false
},
series: [{
name: 'John',
data: [null,0,null,null,null,null,0.86,null,0,null]
}]
});
I am quite confused why this been displayed like this.
Can anyone help?
Thanks
First if you look your demo on firefox it will only show 3 points without any area.
Now you may try to use connectNulls Api Doc like that :
chart: {
type: 'scatter',
spacingBottom: 30
},
plotOptions: {
area: {
fillOpacity: 0.5,
connectNulls:true
}
},
Edit: New type of chart
Updated Fiddle

Export data from highcharts in csv file with dates in milliseconds

I have an angularjs application with the library Highcharts.
In my application I have some graphs and want to export the data of the graphs in a CSV file. So I used the exporting function from highcharts but I have a problem with the dates. On my graphs, I display the dates with a format "MM/DD/YYYY hh:mm:ss" so when I export my data, I have the same format but I would have the dates in milliseconds. I try to change teh 'dateFormat' field in the exporting options but milliseconds is not part of the accepted formats.
This is my graph options:
widgetCtrl.chartDataLine = {
chart: {
type: 'spline',
zoomType: 'x',
isZoomed: false,
marginTop:55
},
title: {
text: 'title',
align:'left',
x: 20,
y: 18,
style: {
fontSize: '14px'
}
},
xAxis: {
type: 'datetime',
title: {
text: 'Date time'
}
},
yAxis: {
title: {
text: 'Power (W)'
}
},
boost: {
enabled: true
},
exporting: {
fallbackToExportServer: false,
enabled: true,
allowHTML: true,
filename: 'myFile',
menuItemDefinitions: {
downloadJSON: {
onclick: function () {
downloadJSON('myFile.JSON', widgetCtrl.chartDataLine.series);
},
text: 'Download JSON'
}
},
csv: {
decimalPoint: '.',
dateFormat: '%Y-%m-%d %H:%M:%S'
},
buttons: {
contextButton: {
menuItems: [
'printChart',
'downloadPNG',
'downloadJPEG',
'downloadPDF',
'downloadSVG',
'downloadCSV',
'downloadJSON'
]
}
}
},
navigation: {
buttonOptions: {
align: 'left'
}
}
series: [...]
};
Do you have an idea how I coul do that without writing myself teh csv file but using the highcharts functions ?
Unfortunately, Highcharts does not have the default option to export data in milliseconds (timestamp). However, it can be done easily by wrapping Highcharts.Chart.prototype.getDataRows method and map the data array which is used for export.
(function(H) {
H.wrap(H.Chart.prototype, 'getDataRows', function(proceed, multiLevelHeaders) {
var rows = proceed.call(this, multiLevelHeaders);
rows = rows.map(row => {
if (row.x) {
row[0] = row.x;
}
return row;
});
return rows;
});
}(Highcharts));
Demo:
https://jsfiddle.net/BlackLabel/5p1nvq37/

Highcharts graph does not update with firebase

$scope.hhData = $firebaseArray(aRef.orderByChild('ts').startAt('2018-07-02').limitToLast(50));
$scope.hhData.$loaded().then(function () {
$scope.chartSeriesYArray = [];
$scope.chartSeriesXArray = [];
$scope.hhData.$watch(function() {
angular.forEach($scope.hhData, function (value) {
$scope.chartSeriesXArray.push(moment(value.ts).format('MMMM Do YYYY, h:mm:ss'));
$scope.chartSeriesYArray.push(parseFloat(value.ein));
});
Highcharts.chart('chart', {
chart: {
type: 'column'
},
title: {
text: 'Half Hourly Energy Consumption'
},
xAxis: {
categories: $scope.chartSeriesXArray,
crosshair: true
},
yAxis: {
min: 0,
title: {
text: 'Energy (kwh)'
}
},
series: [{
name: 'Meter01',
data: $scope.chartSeriesYArray
}]
});
});
});
I wanted to be able to update the data live from Firebase into the chart. However, this code only allows the data to be updated once at the start and it never updates itself again. Is there any way to work around this? - tried the $interval method as suggested but it didn't work :(
Update: I managed to do so with $watch. However, this now means that my graph will only show when there is data coming in. If there is no data coming in (EG: when you just turn on the system) then no graph will show at all. This there another way around this
Try using the $interval service to retrieve your data after a certain amount of time.
$interval(function() {
$scope.hhData.$loaded().then(function () {
$scope.chartSeriesYArray = [];
$scope.chartSeriesXArray = [];
angular.forEach($scope.hhData, function (value) {
$scope.chartSeriesXArray.push(moment(value.ts).format('MMMM Do YYYY, h:mm:ss'));
$scope.chartSeriesYArray.push(parseFloat(value.ein));
});
Highcharts.chart('chart', {
chart: {
type: 'column'
},
title: {
text: 'Half Hourly Energy Consumption'
},
xAxis: {
categories: $scope.chartSeriesXArray,
crosshair: true
},
yAxis: {
min: 0,
title: {
text: 'Energy (kwh)'
}
},
series: [{
name: 'Meter01',
data: $scope.chartSeriesYArray
}]
});
});
}, 5000); //this function will run every 5 seconds
*don't forget you also need to add the $interval parameter to your controller, and the interval goes by milliseconds
app.controller('myCtrl',["$scope", "$interval", function($scope, $interval) {
//code goes here
}]);

Is it possible to do a custom rendering with highchart-ng?!

I tried to use Highcharts Renderer to create my own custom shapes.
Unfortunately, I cannot find a way to invoke those methods.
Is it even possible to use Highcharts methods? with highcharts-ng?!
My Plunk
My code:
var myapp = angular.module('myapp', ["highcharts-ng"]);
myapp.controller('myctrl', function ($scope) {
$scope.chartDonut = {
options: {
chart: {
type: 'pie',
},
colors: [
'#FFFFFF',
'#AA4643',
],
credits: {
enabled: false
},
legend: {
borderWidth: 0
},
plotOptions: {
pie: {
borderWidth: 0.2,
borderColor: '#000000',
}
}
},
title: {
text: 'Browser market share, April, 2011'
},
backgroundColor: '#cccccc',
tooltip: {
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ this.y +' %';
}
},
series: [{
name: 'Browsers',
data: [{
name: 'MATCHED',
y: 25
}, {
name: 'UNMATCHED',
y: 50,
color: {
pattern: 'http://highcharts.com/demo/gfx/pattern1.png',
width: 6,
height: 6
}
}],
size: '60%',
innerSize: '56%',
showInLegend: false,
dataLabels: {
enabled: true,
connectorWidth: 0,
connectorPadding: 0,
useHTML: true,
x: 20,
formatter: function() {
if (this.point.name === 'UNMATCHED')
return '<div id="donut_unmatched">'
+ '<div id="unmatched_num">' + this.y + '</div>'
+ '<div id="unmatched_txt">' + this.point.name + '</div>'
+ '</div>';
}
}
}]
};
});
This can be done with current version, while documentation is not clear.
In source code, highcharts constructor is called:
new Highcharts.Chart(mergedOptions, func)
The second parameter is a callback when highcharts initialization is finished:
http://api.highcharts.com/highcharts#Highcharts.Chart (it does not explain its arguments)
We can get the chart object from the 1st argument of this function. Add following code to your chart config object:
func: function(chart) {
$scope.chartObj = chart;
}
Then you can use it in your view or code (for any API calls):
<span>{{chartObj.renderer.height}}</span>
$scope.chartObj.renderer.circle(...);
$scope.chartObj.getSelectedPoints();
As an example I forked the original plunk here:
http://plnkr.co/edit/6WvHEjJfr4pGqd2OvPKF?p=preview
Author here. At the moment it is not possible to do this. Pull requests gladly accepted. I'll probably add it myself in the near future.
See here to track changes: https://github.com/pablojim/highcharts-ng/issues/97
i can't find the answer either,but i've got a resolution, which is invoke the renderer in the formatter of xAxis label formatter function, and it works..

Resources