I am using HighCharts together with Python to dynamically create charts. All works fine, however I get cannot read property "0" of undefined exception under IE8. Unfortunetly my client want it to work under IE8 as well. So heres the code of the main function:
function generateChart(series) {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'company_chart',
},
xAxis: {
type: "datetime",
},
yAxis: [{
title: {
text: "T1",
},
},{
title: {
text: "T2",
},
},
opposite: true,
}],
plotOptions: {
series: { shadow: false },
column: { shadow: false, },
},
series: series
});
);
Now my ajax request returns some data and I store it in the variable like this:
chart_data = [
{
type: "spline",
color: '#ff0000',
yAxis: 0,
data: dataT1,
},
{
type: "column",
color: '#0000ff',
yAxis: 1,
data: dataT2,
}
];
After that I call generateChart(chart_data);. The format of variables dataT1 and dataT2 is fine, since it works under every other browser. For example dataT1 may look like this:
dataT1 = [ [1325721600000,1.64],
[1325635200000,1.64],
[1325548800000,1.7],
[1325462400000,1.7],];
But still the exception is thrown under IE8. Any ideas how to fix this?
Those dangling commas are causing errors in Internet Explorer. Get rid of them.
Here's an example:
chart: {
renderTo: 'company_chart', // <--- get rid of that comma
},
Internet Explorer considers a comma at the end of an object literal like that to be an error. You should in fact be seeing the "Errors on page" warning, but the error is usually something that does not indicate this actual root cause.
edit — well apparently IE8 is not picky about that, though IE7 is.
edit again — However, IE8 interprets that last dangling comma in your data arrays as meaning that there should be an extra element! In other words:
[1, 2, 3,].length
is 3 in Firefox/Chrome/Safari but it's 4 in Internet Explorer. When you try to access that element, the browser gives you undefined.
Related
Hi I am using АpexChart but I have problem setting up xaxis. The picture below is from another chart, but I'm looking for the effect it has. Note the long straight line, this means there is no data for the specific period.
How do I set up a АpexChart so I can display similar data
var options = {
series: [{
name: "Level",
data: [30,45,50,60,70,91,125]
}],
chart: {
height: 350,
type: 'line',
zoom: {
enabled: true
}
},
dataLabels: {
enabled: true
},
stroke: {
curve: 'straight'
},
title: {
text: 'Battery',
align: 'left'
},
grid: {
row: {
colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
opacity: 0.5
},
},
xaxis: {
categories: [1991,1992,1993,1994,1995,1996,1997, 1998,1999]
}
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
The chart we see on your screenshot has been made with Highcharts, right? I know that you can do something similar with amCharts or Chart.js. But this feature is not available in ApexCharts yet. With ApexCharts, you will get blanks (see demo) if you have null values in your data.
Take a look at this issue and this pull request on GitHub.
Comment of the library author (2019), from the issue:
This has been proposed, but not worked upon yet.
Comment of the library author (2021), from the PR:
Update: This PR doesn't solve the issue the way we wanted and doesn't cover multiple use-cases.
Please bear with us. There might be a new PR with a completely different implementation.
In Visual studio code, When I am using chart.js in my app, prettier always put a comma at the end of the last data of the object 'label'. I think, it's create a bug which unable to show my chart on my browser. it show blank. Code is given bellow.
let massPopChart2 = new Chart(myChart2, {
type: "bar", // bar, horizontalBar, pie, line, doughnut, radar, polarArea
data: {
labels: [
"1st Day",
"2nd Day",
"3rd Day",
"4th Day",
"5th Day",
"6th Day",
"7th Day",
],
},
});
can anyone help me figure out why this happening?
JavaScript has allowed trailing commas in array literals since the
beginning, and later added them to object literals (ECMAScript 5) and
most recently (ECMAScript 2017) to function parameters.
This is a relatively new change in syntax, but the basic idea is that by putting a comma on each line allows for:
Easier to add an item or re-order items. Before you always had to check the trailing comma and make sure it was present or removed depending on location.
Removes the need to have one line item be special because it lacks the ,.
Allows for cleaner Git diffs.
You can read up on the full documentation if you like - it goes into further detail:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Trailing_commas
As far as the issue with your chart not displaying, unless you are using a very old browser, a trailing comma should not cause an error/information to not display.
You need to update the configuration of prettier extension.
There are two ways. Below one is mostly used.
Create a .prettierrc file at the root of your project and
specifying the below configuration.
{ "trailingComma": "es5" }
In order to honor the configuration make sure to enable the below
setting in vs code configuration.
"prettier.requireConfig": true
Prettier adds those commas at the end just because if you wanna add another data after that you don't need to type a comma. it does the same for semicolons(;).
you got the error because you haven't provided datasets.
data takes an object which contains labels & datasets values.
{/* <canvas id="myChart" width="400" height="400"></canvas> */}
// var ctx = document.getElementById('myChart');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['1','2'],
datasets: [
{
label: '1st',
data: '120',
borderColor: Utils.CHART_COLORS.red,
backgroundColor: Utils.transparentize(Utils.CHART_COLORS.red, 0.5),
},
{
label: '2',
data: '240',
borderColor: Utils.CHART_COLORS.red,
backgroundColor: Utils.transparentize(Utils.CHART_COLORS.blue, 0.5),
}
]
},
// options: {
// indexAxis: 'y',
// elements: {
// bar: {
// borderWidth: 2,
// }
// },
// responsive: true,
// plugins: {
// legend: {
// position: 'right',
// },
// title: {
// display: true,
// text: 'Chart.js Horizontal Bar Chart'
// }
// }
// },
// };
you can know more about it on official docs https://www.chartjs.org/docs/latest/charts/bar.html
I'm having an odd problem where my Highcharts graph is only properly "graphing" on Chrome. The graph frame itself shows up just fine (the axis' names, labels, white background, etc), but the actual columns do not get animated, nor do they show up on the graph to represent the actual data. It just appears to look like an empty graph.
The data is being called via AJAX. Everything on that end is fine. The code itself is also very simple, so not sure what could be causing this. Here is the code, any help would be greatly appreciated:
Highcharts.chart('modal-graph-wrapper', {
chart: {
type: 'column'
},
title: {
text: 'Build Time vs. Step'
},
yAxis: {
title: {
text: 'Length of Time (seconds)'
},
categories: timeArray
},
xAxis: {
categories: nameArray
},
plotOptions: {
series: {
pointStart: 0
}
},
series: [{
name: 'Build Time (seconds)',
data: timeArray,
lineWidth: 3,
marker: {
radius: 3,
fillColor: '#337ab7'
}
}]
});
I ended up figuring it out. It is because the Date.parse function does not work as expected in Firefox or Safari; whereas in Chrome it works as anticipated. Restructuring the time format solved my issue. Thanks!
I am using the following JavaScript Code to create a Highchart from a local csv file. This works correctly in Safari and Chrome (need to enable --allow-file-access-from-files for it to work in Chrome), however it does not work for Firefox for some reason. I have tried changing the value of security.fileurl.strict_origin_policy to false but that doesn't change the error or display the charts.
I get a JS "syntax error" for the csv file for ':1:1' which I assume is line 1 column 1. I don't understand why it works for 2 browsers and not for Firefox. I imagine it is something similar to Chrome where I have to enable access to local files but besides changing the about:config I'm not sure how to achieve this.
Any explanations or suggestions are appreciated.
$.get(data, function(csv) {
$('#container').highcharts({
chart: {
zoomType: 'x',
type: 'column',
},
data: {
csv: csv,
lineDelimiter: "\n",
},
title: {
text: 'CSV file data'
},
yAxis: {
title: {
text: 'Bytes'
}
}
});
});
It turns out that adding "text" after $.get(data, function(csv) {} solves this issue for firefox. Not entirely sure why. It takes longer than Chrome or Safari to load but it does load successfully.
Provided you have enabled --allow-file-access-from-files it will work in Chrome and doesn't cause any changes in Safari.
$.get(data, function(csv) {
$('#container').highcharts({
chart: {
zoomType: 'x',
type: 'column',
},
data: {
csv: csv,
lineDelimiter: "\n",
},
title: {
text: 'CSV file data'
},
yAxis: {
title: {
text: 'Bytes'
}
}
});
}, "text");
I am trying to change the default zoom level on a simple highstock chart. I've been looking around for a solution and came up with this:
rangeSelector: {
selected:0,
},
This did not work with the code below
chart = new Highcharts.StockChart({
chart: {
renderTo: 'dummycontainer'
},
rangeSelector: {
selected:0,
},
credits: {
enabled: false
},
yAxis: {
title: {
text: ''
},
max: 100
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> <br/>', //({point.change}%)
valueDecimals: 2
},
series: [{
name: 'MMP',
data: [
],
marker : {
enabled : true,
radius : 3
},
shadow : true
}]
});
What could be causing this?
rangeSelector: {
selected:0
}
very much works
Change default time range | Highchart & Highstock # jsFiddle
Check for any other javascript related errors in your browser's javascript console. If you are trying out on IE or even otherwise I would recommend removing the trailing comman(,) from selected:0, like in the code above or the demo.
Trailing commas lead to invalid json and some browsers may not behave correctly with them. You can validate your json # http://jsonlint.com/ or try the JSLint option in jsFiddle.