I am currently working on developing highcharts using data from Firebase.
I came across a helpful example here:
However, when I try to integrate it into my application, I encounter the following error:
firebase.js:43 Uncaught TypeError: Cannot read property 'map' of undefined
at app.html:343 at firebase.js:93 at ic (firebase.js:43) at Wd (firebase.js:93) at Ud.Jb (firebase.js:93) at be.Xd.Jb (firebase.js:94) at firebase.js:109 at firebase.js:59 at cc (firebase.js:55) at R (firebase.js:59)
The JavaScript and HTML code for the highchart is as follows:
var fb = new Firebase("https://<ProjectName>.firebaseio.com/products");
fb.on("value", function(data) {
var model = data.val();
$('#container').highcharts({
chart: { type: 'column' },
title: { text: 'Sales' },
xAxis: {
categories: model.Categories
},
yAxis: { title: { text: 'Quantity' } },
series: model.Series.map(function(element) {
return {
name: element.Name,
data: element.Data
}
})
});
}); <div id="container" style="width:100%; height:400px;"></div> Here is the JSON:
https://i.stack.imgur.com/er62J.png
If anyone has insights into the cause of this error and a potential solution, I would greatly appreciate it.
Thank you,
G