Highcharts column Point Click - javascript

Hello I have already asked a question on Highcharts Point Click not working. Further to that what I have found is my click function works in google chrome but not in IE 8. Can you please help me with this? I am not getting any responses on my earlier question hence I am posting this again -
Below is my code -
var columnoptions = {
chart: {
renderTo: 'container',
type: 'column'
},
title: {
text: 'Exposure Details - Column Chart'
},
xAxis: {
categories: []
},
yAxis: {
title: {
text: 'Exposure'
}
},
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function() {
alert ('here');
}
}
}
}
},
series: []
};
and below is the function which draws column chart -
function displayColumnChart(){
columnoptions.series = [];
columnoptions.xAxis.categories = [];
var seriesOptions = {
name: 'chart',
data: [],
};
for(index = 0; index < categoryArray.length; index++){
columnoptions.xAxis.categories.push(categoryArray[index]);
seriesOptions.data.push(valueArray[index]);
}
columnoptions.series.push(seriesOptions);
chart = new Highcharts.Chart(columnoptions);
}
Is it because the way I am dynamically creating this chart? Please guide me regarding this. I am getting error - Object doesnt support this property or method. Highcharts.js line 25. Code 0. Char 55. I wish to implement chart drill down. Hence need to get this working. And IE is standard browser in the company. Please help me.

Object doesnt support this property or method
This is the Javascript error generated mostly in IE.
Always check for extra comma,single quote in your code when you encounter such JS error.
I can see such one in your code snippet.
var seriesOptions = {
name: 'chart',
data: [],
};
This should be
var seriesOptions = {
name: 'chart',
data: []
};
Firefox ignores such error but IE does not let you go. :)

I just used latest highcharts files 2.2.5 and that solved it. Works in IE8. And I feel overall performance is also improved..smooth. Thanks. :)

Related

Uncaught TypeError: Cannot read property 'map' of undefined with Highcharts

I'm currently working on creating some highcharts using data from Firebase.
I found an example here:
http://blog.dotnetnerd.dk/post/2014/01/27/Realtime-data-displays-with-Firebase.aspx
However, when I try and load it into my application I receive 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 JS and HTML for the highchart looks like this:
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:
If anyone knows why this error is occurring and how to solve it, it will be much appreciated.
Thank you,
G
You must use your own project name in the first line :
https://<ProjectName>.firebaseio.com/products
Change <ProjectName> with your firebase url. You can see which is in your firebase account.

Highcharts SetData Only Works One Time

I am using a button to change the series on a High Charts graph using the series[0].setData() function. It does change the data and update the graph, but when I try to use a second button to reset my back data, nothing seems to happen. Why can the Series only be updated once?
$('#button').click(function() {
chart.series[0].setData(mydata1);
});
http://jsfiddle.net/9ypsm98a/
EDIT:
Still looking for an answer, but a easy work around is to have the button first use chart.destroy(); then recreate a completely new chart.
The problem is that the array/objects are being passed by reference on first creating the chart. After that, High Charts appears to be only updating the existing objects, overwriting the originals. Try the following jsfiddle. I first create the chart using empty objects. Then the buttons work as expected.
http://jsfiddle.net/308zr285/
var emptyData = [{},{},{}];
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
backgroundColor: null,
type: 'treemap'
},
series: [{
type: "treemap",
layoutAlgorithm: 'squarified',
alternateStartingDirection: true
}],
title: {
text: 'Fruit consumption'
}
});
chart.series[0].setData(emptyData);
});

Highcharts not displaying charts through angular controller

I started playing with highcharts for a project I am doing. Highcharts was displaying properly when I dumped a massive array of data into it, but now that I am trying to parse through groups of data that I retrieved through MongoDB I can't get it to display.
Here is my angular
$scope.retrieveData = function(){
$http.get('/calldata').then(function(response){
$scope.toneDatas = response.data
var idArray = []
angular.forEach($scope.toneDatas, function(value, key) {
idArray.push({id: value._id, social_tone_data: value.social_tone_data})
for (var i = 0; i < idArray.length; i++) {
if (idArray[i].id === value._id) {
console.log(idArray[i].id)
var socialToneName = []
var socialToneScore = []
angular.forEach(value.social_tone_data, function(value, key) {
socialToneScore.push(value.tone_score)
socialToneName.push(value.tone_type)
})
$("#" + value._id).highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Fruit Consumption'
},
xAxis: {
categories: socialToneName
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
series: [{
data: socialToneScore
}]
});
};
};
})
});
};
When the page loads a get request calls the database and gets the data to be served to the web page, and I am trying for now to get the data group social_tone_data to display on a chart. I have 19 documents in my mongo database and want it so that each time the loop completes, one chart is generated and served to my webpage. I should have 19 charts. I am still playing around with the code but any help is appreciated.
UPDATE
I refactored my code through an angular directive and used the element argument to display on the page.
Some good info using NG-Highcharts.
as others have said, use a directive to modify dom elements, not controller & def not jQuery as updates fall outside of angulars digest loop.
Your example needs the supplemental template/html code to be relevant.

ECharts - Set options to externally loaded arrays

So I am using the library ECharts to create some charts and graphs for various data that I have on a website. This is my first time using the library and I am fairly new to Javascript/jQuery. What I am trying to do is set the xAxis data to the results from a local page which will return a JSON Object with an array containing the days of the week. After I can do this, I then plan to load the Series data in the same way.
The jSON that is returned is this
When I am trying to set the data for xAxis, I am doing it as shown
xAxis: [{
type: 'category',
boundaryGap: false,
data: function(){
$.ajax({
type: "POST",
url: "ajax/getData.php?test=t&graph_last_days=d&days=7",
cache: false,
success: function(result){
return result.data;
//console.log(result.data);
}
});
}
}],
However, I keep getting the error Uncaught TypeError: o.slice is not a function and this error is only being outputted when I try and use this method of setting the data. In addition to this, if I try and make a function to return the data from the external page and set a variable to that, whenever I try and print it to the console it says undefined
If I do not use my method of trying to load the external data and I predefine the data like so
xAxis: [{
type: 'category',
boundaryGap: false,
data: [
'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'
]
}]
Then there are no errors and it works just fine
Can anyone see the problem?
Seems that after speaking with some people, the only example usage or documentation available is this example they have which is closely related to my question here.
If anyone else wants some examples related to ajax or dynamic data loading with ECharts then here are some (in English) *
Line + Bar
Scatter + Candlestick
Pie + Radar
Helpful tip
If you do not speak Chinese and you are using some sort of translator for their code examples; be aware that it's common for websites such as Google Translate and Bing Translator to incorrectly translate the punctuation used in JS by doing things such as,
Translating arrays with single quotes into arrays with single quotes and double quotes: thus causing syntax errors.
Removing commas (,) from objects.
Changing Semi-colon's (;) into Colon's (:) or even removing them.
complete example for echarts pushing data from Ajax call
data.importPorts -> Array of strings
data.importBD -> Array of Objects { clientanem : [4,5,6,7,3]}
$.get("/Home/Graph1", { clients: "403,300", years: "2012" })
.done(function (data) {
var option = {
tooltip: {
show: true
},
legend: {
data: (function () {
var res = [];
for (var name in data.importBD) {
res.push(name);
};
return res;
})()
},
xAxis: [
{
type: 'category',
data: (function () {
var res = [];
data.importPorts.forEach(function (i) {
res.push(i);
});
return res;
})()
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
}
]
};
for (var name in data.importBD) {
var obj = {
name: name,
type: "bar",
data: data.importBD[name]
};
option.series.push(obj);
}
// Load data into the ECharts instance
imprtChart.setOption(option);
});

Highcharts - "Style is null or not an object"

So, I'm having some issues using Highcharts. It recently came up with an error that only fires up in Internet Explorer 8. The failing line comes up from the highcharts.src.js file line 270:
function css (el, styles) {
if (isIE) {
if (styles && styles.opacity !== UNDEFINED) {
styles.filter = 'alpha(opacity='+ (styles.opacity * 100) +')';
}
}
extend(el.style, styles); // This line fails...
}
The code that creates the chart is the following:
$(document).ready(function() {
chartcontainer1700 = new Highcharts.Chart({
chart: {
renderTo: 'container1700'
},
title: {
text: 'Loading chart...'
}
});
});
function onSuccess(options){
if (options.hasOwnProperty('restErrorMessage') && options.restErrorMessage != null) {
alert(options.restErrorMessage);
}
chartcontainer1700.destroy();
chartcontainer1700 = new Highcharts.Chart(options);
chartcontainer1700.redraw();
};
onSuccess function is fired after a webservice call succeeds to provide the chart data that is a Json as follows:
{"chart": {
"renderTo":"container0438",
"zoomType":"xy"},
"credits": {
"enabled": false,
"position": {
"align":"right",
"x":-10,
"verticalAlign":"bottom",
"y":-5
},
"href":"http:\/\/www.website.com",
"text":"Chart"
},
"legend": {
"borderRadius":0,
"borderWidth":0,
"enabled":true
},
"series":[{"data":[67.5,67.75],"name":"ME","type":"spline","yAxis":0}],
"title":{"align":"center","text":""},
"xAxis":[{
"categories":["Mar 22, 2011 - Mar 26, 2011","Mar 27, 2011 - Mar 29, 2011"],
"maxPadding":5,"minPadding":1
}],
"yAxis":[{
"labels":{
"style":{"color":"Gray"}
},
"opposite":false,
"title":{"text":"ME %","style":{"color":"Gray"}},
"type":"spline"}],
"exporting":{"enabled":true}
}
Everything works perfect in other browsers. Any thougths?
Thanks!
I've messed around with highcharts and do recall seeing this error message but was testing on chrome. I found it very helpful to just hard code my json data that is going to be fed into highcharts just to make sure it isn't the data being returned from the service. I would also try messing around with not having to call destroy and just finding a way to redraw the chart. I know it is suggested to destroy the chart but it has been problematic for me at times. Maybe just reuse the same instance of chart, chartcontainer1700, and just change the data being passed in, and redrawing it.

Categories