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
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
I find a solution to render Highcharts on IE7, IE8 and more !
Add this :
<meta http-equiv="X-UA-Compatible" content="chrome=IE7">
I don't know why this works but it works :)
Related
Ok hello everyone. I have designed my HighStock works from
CSV-file. I can get time and 1 line to my serie. I want to
get 2 lines from data. Any ideas? In future I want to get 2 decimals for example 25,01. have you got ideas for that?
In CSV there's seconds,data,data. And it's prints it 1minutes.
And yes, I'm from Finland Student and my code sucks... :)
http://imgur.com/L2VSRGj
Data:
Time in Seconds,Value,Value
0,25,23
60,25,23
120,25,23
....
14220,24,22
14280,24,22
14340,24,22
Javascript in my HC.htm: (it's index)
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Hannun virtamittaus</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<style type="text/css">
${demo.css}
</style>
<script type="text/javascript">
function getDataFilename(str){
point = str.lastIndexOf("file=")+4;
tempString = str.substring(point+1,str.length)
if (tempString.indexOf("&") == -1){
return(tempString);
}
else{
return tempString.substring(0,tempString.indexOf("&"));
}
}
query = window.location.search;
var dataFilePath = "/data/"+getDataFilename(query);
$(function () {
var chart;
$(document).ready(function() {
// define the options
var options = {
chart: {
renderTo: 'container',
zoomType: 'x',
spacingRight: 5
},
title: {
text: 'Arduinolla mitatut virran arvot'
},
subtitle: {
text: 'Zoomaa haluttu luenta alue'
},
xAxis: {
type: 'datetime',
maxZoom: 2 * 4000000
},
yAxis: {
title: {
text: 'Virran arvot 0-250A'
},
min: 0,
startOnTick: false,
showFirstLabel: false
},
legend: {
enabled: false
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
Highcharts.dateFormat('%H:%M - %b %e, %Y', this.x) +': '+ this.y;
}
},
plotOptions: {
series: {
cursor: 'pointer',
lineWidth: 1.0,
point: {
events: {
click: function() {
hs.htmlExpand(null, {
pageOrigin: {
x: this.pageX,
y: this.pageY
},
headingText: this.series.name,
maincontentText: Highcharts.dateFormat('%H:%M - %b %e, %Y', this.x) +':<br/> '+
this.y,
width: 100
});
}
}
},
}
},
series: [{
name: 'Op1',
marker: {
radius: 2
}
}]
};
// Load data asynchronously using jQuery. On success, add the data
// to the options and initiate the chart.
// http://api.jquery.com/jQuery.get/
jQuery.get(dataFilePath, null, function(csv, state, xhr) {
var lines = [],
date,
// set up the two data series
lightLevels = [];
// inconsistency
if (typeof csv !== 'string') {
csv = xhr.responseText;
}
// split the data return into lines and parse them
csv = csv.split(/\n/g);
jQuery.each(csv, function(i, line) {
// all data lines start with a double quote
line = line.split(',');
date = parseInt(line[0], 10)*1400;
lightLevels.push([
date,
parseInt(line[1], 10)
]);
});
options.series[0].data = lightLevels;
chart = new Highcharts.Chart(options);
});
});
});
</script>
</head>
<body>
<script src="https://code.highcharts.com/stock/4.2.4/highstock.js"></script>
<script src="https://code.highcharts.com/stock/4.2.4/modules/exporting.js"></script>
<div id="container" style="height: 400px; min-width: 155px"></div>
</body>
</html>
You need to set an array of series objects.
Series:
series: [{
name: 'Op1',
marker: {
radius: 2
}
},{
name: 'Op2'
}]
Parser
jQuery.get(dataFilePath, null, function(csv, state, xhr) {
var lines = [],
date,
// set up the two data series
lightLevels = [];
topLevels = [];
// inconsistency
if (typeof csv !== 'string') {
csv = xhr.responseText;
}
// split the data return into lines and parse them
csv = csv.split(/\n/g);
jQuery.each(csv, function(i, line) {
// all data lines start with a double quote
line = line.split(',');
date = parseInt(line[0], 10)*1400;
lightLevels.push([
date,
parseInt(line[1], 10)
]);
topLevels.push([
date,
parseInt(line[2], 10)
]);
});
options.series[0].data = lightLevels;
options.series[1].data = topLevels;
chart = new Highcharts.Chart(options);
});
I am trying to plot a chart which will read a data from csv file which is appending on every minute with latest data as per below format.
The chart will continue reading data from csv file and show the graph on every second wise. Can you please help me on this? I want to show the exact time which are coming from file should be show on graph.
CSV format..
time,count
18:01:00,3
18:01:01,4
....
$(document).ready(function () {
var csv = [],
x;
Highcharts.setOptions({
global: {
useUTC: false
}
});
var data = 'time,count\n18:01:00,3\n18:01:01,4';
//$.get('data.csv', function(data) {
var lines = data.split('\n');
$.each(lines, function(lineNo, line) {
if(lineNo > 0) {
var items = line.split(',');
useUTC: false;
x = items[0].split(':');
csv.push([Date.UTC(2015,1,1,x[0],x[1],x[2]), parseFloat(items[1])]);
}
});
console.log(csv);
$('#container').highcharts({
chart: {
renderTo: 'container',
type: 'spline',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
useUTC: false,
events: {
load: function () {
// set up the updating of the chart each second
var series = this.series[0];
setInterval(function () {
var l = series.data.length - 1,
lastX = series.data[l].x;
$.get('data.csv', function(data) {
var lines = data.split('\n'),
len = lines.length,
items = lines[len - 1].split(','),
x = items[0].split(':'),
y = parseFloat(items[1]);
useUTC: false;
x = Date.UTC(2015,1,1,x[0],x[1],x[2]);
if(x !== lastX) {
series.addPoint([x, y], true, true);
}
});
}, 1000); //refresh each 1 second
}
}
},
title: {
text: 'TPS Data'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150
},
yAxis: {
title: {
text: 'Value'
},
plotLines: [{
value: 3,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' +
Highcharts.dateFormat('%H:%M:%S', this.x) + '<br/>' +
Highcharts.numberFormat(this.y, 2);
}
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
series: [{
name: 'Count',
data: csv
}]
});
//});
});
div {
min-width: 50px;
height: 200px;
margin: 0 auto;
}
<script type="text/javascript" src="http://code.jquery.com/jquery-1.12.0.js"></script>
<script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style=""></div>
Note In the snippet I was replace the ajax function $.get with hardcoded data so it will show the result but the question is about the ajax way.
I'm new in Laravel, so I'm still facing problems whenever I try to add js functions to my code.
I need to add a highchart to my laravel project. As a beginning, I just copied the code of one of the charts available on highcharts.com and pasted it in the main view, but nothing is being displayed.
When I added the same code to a normal html file, the graph was displayed normally.
Here's my javascript code
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript">
$(function () {
$(document).ready(function () {
Highcharts.setOptions({
global: {
useUTC: false
}
});
$('#container').highcharts({
chart: {
type: 'spline',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
load: function () {
// set up the updating of the chart each second
var series = this.series[0];
setInterval(function () {
var x = (new Date()).getTime(), // current time
y = Math.random();
series.addPoint([x, y], true, true);
}, 1000);
}
}
},
title: {
text: 'Live random data'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150
},
yAxis: {
title: {
text: 'Value'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' +
Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
Highcharts.numberFormat(this.y, 2);
}
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
series: [{
name: 'Random data',
data: (function () {
// generate an array of random data
var data = [],
time = (new Date()).getTime(),
i;
for (i = -19; i <= 0; i += 1) {
data.push({
x: time + i * 1000,
y: Math.random()
});
}
return data;
}())
}]
});
});
});
</script>
and the html code
<div id="container" style="width:100%; height:400px;"></div>
Any suggestions how to display the graph?
Thanks in advance.
I think the problem is with the syntax you are creating the chart with: $('#container').highcharts...
It seems highcharts function is not defined using laravel.
There is another way that you can try:
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
...
},
...
});
I want to put dynamic information into my php page and keep my global option to an external JS files but "option" seem undefined:
External file:
$(function () {
var options = {
chart: {
rendedTo: 'barchart',
type: 'column',
width: 765
},
xAxis: {
labels: {
rotation: -45,
align: 'right'
}
},
yAxis: {
min: 0,
title: {
text: 'Nombre de sous-titres postés ce mois'
}
},
legend: {
enabled: false
},
tooltip: {
formatter: function() {
var s = (this.y > 1) ? 's' : '';
return '<b>'+ this.x +'</b><br/>'+
this.y+' sous-titre'+s+' posté'+s;
}
},
series: [{
name: 'Nombre d\'upload'
}]
}
});
Then I put the building lines on my head tag:
<script type="text/javascript">
$(document).ready(function(){
$.getJSON('include/ajax/statistiquesMembreMensuel.json.php?id=1', function(data) {
options.xAxis.categories = data[0];
options.series[0].data = data[0];
options.chart.title = "Nombre d\'upload mensuel effectués par le membre '.stripslashes($row['pseudo']).'";
var chart = new Highcharts.Chart(options);
});
});
</script>
I need to put the how can I send the $_GET['id'] information to the getJSON url if i put it into the .js file ?
How can I edit the chart title after the chart has been loaded?
1) Remove var to create global variable, or better, remove $(function () { ... }); which wraps options.
2) To set title, see this.
I am trying to parse the following JSON string remotely:
[{"name":"Object1","data":[1,2]},{"name":"Object2","data":[3,4]}]
I am doing so with the following code:
$(function () {
var chart;
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
type: 'line',
marginRight: 130,
marginBottom: 25
},
title: {
text: 'hits by time',
x: -20 //center
},
subtitle: {
text: 'Source:',
x: -20
},
xAxis: {
categories: ['8am', '9am', '10am', '11am', '12pm', '1pm',
'2pm', '3pm', '4pm', '5pm', '6pm', '7pm']
},
yAxis: {
title: {
text: 'Hits'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ this.y;
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
series: []
};
$.getJSON('http://localhost:8080/jsonget', function(data) {
var series = {
data: []
};
$.each(data, function(i,item){
alert(item.name);
series.name = item.name;
$.each(item.data, function(j,dataitem){
alert(dataitem);
series.data.push(parseFloat(dataitem[i]));
});
});
options.series.push(series);
// Create the chart
var chart = new Highcharts.Chart(options);
});
});
});
The chart does not render, but does so when I substitute the remote portion for the CSV example on the site.
Does anyone know what the problem is?
As far as I can tell your data seems to be well formed. So, this should do it:
var chart;
$.getJSON('http://localhost:8080/UDPver/tagdiscover', function(data) {
// Populate series
options.series = data;
// Create the chart
chart = new Highcharts.Chart(options);
});
The problems is that the chart then is redrawn. So if you have other lines that is disabled (from legend), it will be visible agian when you do a update.
I have 5 lines in my graph. It is updated every second.
From the legend I can disable/remove some of the lines from the graph.
But using this method above (it works) the complete graph is redrawn and all lines is visible again.
Is it possible to just update the series (lines) and not the paramaters?
Like this (not working):
function doAjaxData() {
AjaxLoadingIcon(1);
$.ajax({
url: getAjaxUrl(1),
dataType: 'json',
cache: false,
async: true,
success: function (json) {
AjaxLoadingIcon(0);
gchartOptions.series = [];
gchartOptions.series = json;
// gchart = new Highcharts.Chart(gchartOptions);
gchart.render();
_updateTimer = window.setTimeout("doAjaxData()", 1000);
}
}
});
}
Atma.
You just should write just dataitem instead of dataitem[i] and it will work.
$.each(data, function(i,item){
alert(item.name);
series.name = item.name;
$.each(item.data, function(j,dataitem){
alert(dataitem);
series.data.push(parseFloat(dataitem[i]));
});
});