Jakub Jakub - 1 month ago 12
Javascript Question

IE < 9 + HighCharts don't render series

Hello I have a problem with HighCharts under IE < 9.

Internet explorer HighCharts screenshot

HighCharts works fine in other browsers screenshot

As you can see the chart is rendered in IE and in Chrome but..
The lines are rendered just in the Chrome, the data has to be there also for IE because legend box is there (Best Bid, Qualification Value ...)

The code(By the way it's erb template so I load data from Rails):

<script type="text/javascript">
"use strict";
var chart;
// assign data for current and qualification values
var qualificationTranslation = "<%= t(:qualification_value_nobr) %>";
var currentTranslation = "<%= t(:event_current_value) %>";
var qualificationValue = <%= @lot.qualification_value %>
var currentValue = <%= @lot.current_value %>

jQuery(document).ready(function() {
var parseChartData = function(data) {
var chartData = [];
jQuery.each(data, function(index, value) {
chartData.push({
x: Date.parse(value.x),
y: parseFloat(value.y),
formated_value: value.formated_value
});
});
return chartData;
};
var dataForChart = parseChartData(<%= raw data[:chart_data].to_json %>);

chart = new Highcharts.Chart({
chart: {
renderTo: 'chart',
type: 'line',
zoomType: 'x',
marginRight: 25
},
credits: {
enabled: false
},
title: {
text: "<%= t(:total_difference_progression_chart) %>",
x: -20 //center
},
xAxis: {
type: 'datetime',
labels: {
formatter: function() {
return Highcharts.dateFormat('%I:%M %p', this.value)
}
}
},
yAxis: {
title: {
text: "<%= t(:bid_value_price_per_uom_x_quantity, :symbol => @lot.event.currency.symbol) %>"
}
},
tooltip: {
formatter: function() {
var serieName = this.point.series.name;
// Don't show tooltip when you hover over qualification or current price
if(serieName == qualificationTranslation || serieName == currentTranslation) {
return false;
} else {
return '<b>'+ this.series.name +'</b><br/>'+
Highcharts.dateFormat('%d %b %I:%M:%S %p', this.x) +
'<br/><b>'+ this.point.formated_value + '</b>';
}
}
},
legend: {
backgroundColor: '#FFFFFF',
verticalAlign: 'top',
y: 20,
shadow: true
},
plotOptions: {
series: {
step: true
}
},
series: [{
name: "<%= t(:best_bid) %>",
data: dataForChart
}]
});

// This function will add the current price and qualification price lines
var addOrUpdateSerie = function(name, value, serie) {
var data = []

data.push([chart.xAxis[0].min, value])
data.push([chart.xAxis[0].max, value])

var options = {
name: name,
type: 'spline',
dashStyle: 'shortdot',
marker: {enabled: false},
data: data
}

if(!serie) {
chart.addSeries(options);
} else {
serie.setData(data)
}
};

addOrUpdateSerie(qualificationTranslation, qualificationValue);
addOrUpdateSerie(currentTranslation, currentValue);

socket = io.connect(
ioServerAddr + '/charts',
{query: "lot_id=<%= @lot.id %>", secure: isProduction}
)

socket.on('connect', function() {
socket.emit('join', 'host_difference_progression_event_chart');
});

socket.on('<%= @lot.id %>/host_difference_progression_event_chart', function(data) {
// Add data to series
chart.series[0].setData(parseChartData(data.chart_data))
//Update hirizontal values
addOrUpdateSerie(qualificationTranslation, qualificationValue, chart.series[1])
addOrUpdateSerie(currentTranslation, currentValue, chart.series[2])

chart.redraw();
});
});
</script>


EDIT: It raises NO error

SOLVED:
The problem was with Date.parse() because IE uses other format.
http://www.ruby-doc.org/stdlib-1.9.3/libdoc/date/rdoc/Date.html#method-i-httpdate solved the problem

Answer

SOLVED: The problem was with Date.parse() because IE uses other format. http://www.ruby-doc.org/stdlib-1.9.3/libdoc/date/rdoc/Date.html#method-i-httpdate solved the problem