Highcharts graph not visible - javascript

I'm working on a graph but it is not visible.
In my code there are two lines, one that is working and one that is not working.
(I have commented them)
//this line does not work
//data3.push([new Date(d.timestamp).getTime(),data.data.risk);
//this line works
data3.push([new Date(d.timestamp).getTime(),data.data.threshold[0].amber_threshold]);
My goal : I want to run the line that is not working.
I think I'm not passing the data properly.
I want to pass the array called risk to make the graph.
Just copy paste the code in a file and it should work.
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
</head>
<body style="background:#212224;">
<div id="container2" style="max-width: 1666px; margin: 0 auto"></div>
<script type="text/javascript">
$.getJSON('https://dl.dropboxusercontent.com/u/76618626/data2.json', function (data) {
console.log("data is : ");
console.log(data);
var minX = _.min(data.data.risk, function (d) {
return new Date(d.timestamp).getTime();
});
var maxX = _.max(data.data.risk, function (d) {
return new Date(d.timestamp).getTime();
});
var data3 = [];
$.each(data.data.risk, function (i, d) {
//this line does not work
//data3.push([new Date(d.timestamp).getTime(),data.data.risk);
//this line works
data3.push([new Date(d.timestamp).getTime(),data.data.threshold[0].amber_threshold]);
});
$('#container2').highcharts({
chart: {
backgroundColor: '#000000',
},
title: {
text: 'Test Graph',
style: {
color: '#FFFFFF',
fontWeight: 'bold'
}
},
xAxis: {
type: 'datetime',
title: {
text: 'Time Stamp'
},
gridLineColor: 'grey',
gridLineWidth: 1,
lineWidth:1
},
yAxis: {
title: {
text: 'Value'
},
gridLineColor: 'grey',
gridLineWidth: 1,
lineWidth:1
},
legend: {
enabled: true
},
exporting: false,
plotOptions: {
line: {
lineColor: 'red',
fillOpacity: 1,
lineWidth: 2,
states: {
hover: {
lineWidth: 2
}
},
threshold: null,
marker: {
fillColor: '#e57255'
}
},
},
series: [{
name: 'Graph',
data: data3
}]
});
});
</script>
</body>
</html>

I assume you want the value's from risk. You have already iterated through each items of risk in this line : $.each(data.data.risk, function (i, d) {
To get values of risk use the line : data3.push([new Date(d.timestamp).getTime(),d.value]);
You can check the below example.
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
</head>
<body style="background:#212224;">
<div id="container2" style="max-width: 1666px; margin: 0 auto"></div>
<script type="text/javascript">
$.getJSON('https://dl.dropboxusercontent.com/u/76618626/data2.json', function (data) {
console.log("data is : ");
console.log(data);
var minX = _.min(data.data.risk, function (d) {
return new Date(d.timestamp).getTime();
});
var maxX = _.max(data.data.risk, function (d) {
return new Date(d.timestamp).getTime();
});
var data3 = [];
$.each(data.data.risk, function (i, d) {
//this line does not works
data3.push([new Date(d.timestamp).getTime(),d.value]);
//this line works
// data3.push([new Date(d.timestamp).getTime(),data.data.threshold[0].amber_threshold]);
});
$('#container2').highcharts({
chart: {
backgroundColor: '#000000',
},
title: {
text: 'Test Graph',
style: {
color: '#FFFFFF',
fontWeight: 'bold'
}
},
xAxis: {
type: 'datetime',
title: {
text: 'Time Stamp'
},
gridLineColor: 'grey',
gridLineWidth: 1,
lineWidth:1
},
yAxis: {
title: {
text: 'Value'
},
gridLineColor: 'grey',
gridLineWidth: 1,
lineWidth:1
},
legend: {
enabled: true
},
exporting: false,
plotOptions: {
line: {
lineColor: 'red',
fillOpacity: 1,
lineWidth: 2,
states: {
hover: {
lineWidth: 2
}
},
threshold: null,
marker: {
fillColor: '#e57255'
}
},
},
series: [{
name: 'Graph',
data: data3
}]
});
});
</script>
</body>
</html>
Output:

Related

How to get the last 10 objects only from JSON data

I have a file .json and I want get only the last 10 objects from this json file using graph hightcharts.
My problem is that script is getting full objects from array, and I want only get the last 10 objects...
Fixed.
My code is this:
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>
<script>
$.getJSON('https://cdn.rawgit.com/highcharts/highcharts/057b672172ccc6c08fe7dbb27fc17ebca3f5b770/samples/data/usdeur.json',
function (data) {
var currentValue = 0.9345;
Highcharts.chart('container', {
chart: {
zoomType: 'x'
},
title: {
text: 'USD to EUR exchange rate over time'
},
subtitle: {
text: document.ontouchstart === undefined ?
'Click and drag in the plot area to zoom in' : 'Pinch the chart to zoom in'
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: 'Exchange rate'
},
plotLines: [{
value: currentValue,
color: 'green',
dashStyle: 'Dot',
width: 1,
label: {
text: currentValue,
textAlign: 'left',
x: -45
}
}]
},
legend: {
enabled: false
},
plotOptions: {
area: {
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
},
marker: {
radius: 2
},
lineWidth: 1,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
}
},
series: [{
type: 'area',
name: 'USD to EUR',
data: data
}]
});
}
);
</script>
Will be great if anyone can help me :)
Well it's quite simple, to get only the last 10 items of your json array, you can filter it, based on index, using Array.filter() method like this:
var last10 = data.filter(function(el, index) {
return index >= data.length - 10;
});
You just need to filter items that has the last 10 indexes, using index >= data.length - 10.
Demo:
In your situation you just need to filter the data array and pass the new filtered array to the chart:
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<script>
$.getJSON(
'https://cdn.rawgit.com/highcharts/highcharts/057b672172ccc6c08fe7dbb27fc17ebca3f5b770/samples/data/usdeur.json',
function(data) {
var last10 = data.filter(function(el, index) {
return index >= data.length - 10;
});
Highcharts.chart('container', {
chart: {
zoomType: 'x'
},
title: {
text: 'USD to EUR exchange rate over time'
},
subtitle: {
text: document.ontouchstart === undefined ?
'Click and drag in the plot area to zoom in' : 'Pinch the chart to zoom in'
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: 'Exchange rate'
}
},
legend: {
enabled: false
},
plotOptions: {
area: {
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
},
marker: {
radius: 2
},
lineWidth: 1,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
}
},
series: [{
type: 'area',
name: 'USD to EUR',
data: last10
}]
});
}
);
</script>

highmap does not display

$(document).ready(function () {
Highcharts.mapChart('container1', {
chart: {
map: 'map',
spacingBottom: 20
},
title: {
text: 'areas'
},
legend: {
enabled: true
},
plotOptions: {
map: {
allAreas: false,
joinBy: ['area', 'code'],
dataLabels: {
enabled: true,
color: '#FFFFFF',
style: {
fontWeight: 'bold'
},
// Only show dataLabels for areas with high label rank
format: null,
formatter: function () {
if (this.point.properties && this.point.properties.labelrank.toString() < 5) {
return this.point.properties['area'];
}
}
},
tooltip: {
headerFormat: '',
pointFormat: '{point.area}: <b>{series.area}</b>'
}
}
},
series: [{
name: 'Area1',
data: ['1','2'].map(function (code) {
return { code: code };
})
}, {
name: 'Area2',
data: ['3','4'].map(function (code) {
return { code: code };
})
}, {
name: 'nodata',
data: [{
code: 'RU'
}]
}]
});
});
i have to display highmap on my web page . i have followed this example
https://www.highcharts.com/maps/demo/category-map
i am not getting any error but my map is not loading or displaying. actually shapefile is not displaying . above is is my code
You should use jQuery to load your data after DOM is loaded:
$(document).ready(function () { ... });
Example:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/maps/modules/map.js"></script>
<script src="https://code.highcharts.com/maps/modules/exporting.js"></script>
<!-- Import the world -->
<script src="https://code.highcharts.com/mapdata/custom/world.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<script type="text/javascript">
$(document).ready(function () {
Highcharts.mapChart('container1', {
chart: {
map: 'custom/world', //add the world as a map
spacingBottom: 20
},
title: {
text: 'areas'
},
legend: {
enabled: true
},
plotOptions: {
map: {
allAreas: false,
joinBy: ['iso-a2', 'code'], //join by iso-a2
dataLabels: {
enabled: true,
color: '#FFFFFF',
style: {
fontWeight: 'bold'
},
// Only show dataLabels for areas with high label rank
format: null,
formatter: function () {
if (this.point.properties && this.point.properties.labelrank.toString() < 5) {
return this.point.properties['iso-a2']; //join by iso-a2
}
}
},
tooltip: {
headerFormat: '',
pointFormat: '{point.name}: <b>{series.name}</b>'
}
}
},
series: [{
name: 'Area1',
// use country code as CODE
data: ['FR','BE'].map(function (code) {
return { code: code };
})
}, {
name: 'Area2',
data: ['ES','PT'].map(function (code) {
return { code: code };
})
}, {
name: 'nodata',
data: [{
code: 'RU'
}]
}]
});
});
</script>
<div id="container1" style="height: 500px; min-width: 310px; max-width: 800px; margin: 0 auto"></div>
EDIT : Here is a working fiddle, because the one in SO seems to have some bugs: https://jsfiddle.net/zxmfvp0u/10/

Exception in highcharts.js line 167

I did a chart and generally it works pretty good.
If I open my .html file with safari on MAC OX it works well.
If I open the file with Internet Explorer no chart appears. I now start the Debug Mode an I see an exception at highchairs.js line 167:
(I want to upload an image of this, but it says i need at least 10 reputations to post images).
Behind "_legendItemPos," "e=d[0]" ist marked and it says: Property "0" of an undefined or Zero-reference can not be recalled
My .html file looks like this, with 3 JSON Files named: Daten1, Daten2, Daten3
!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="Highcharts\exporting-server\phantomjs\jquery.1.9.1.min.js"></script>
var fullPath = document.getElementById('upload').value;
if (fullPath) {
var startIndex = (fullPath.indexOf('\\') >= 0 ? fullPath.lastIndexOf('\\') : fullPath.lastIndexOf('/'));
var filename = fullPath.substring(startIndex);
if (filename.indexOf('\\') === 0 || filename.indexOf('/') === 0) {
filename = filename.substring(1);
}
alert(filename);
}
<script type="text/javascript">
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
type: 'line',
zoomType: 'xy',
resetZoomButton: {
position: {
align: 'right',
verticalAlign: 'top',
x: 0,
y: -30
}
}
},
title: {
text: 'Testgraph',
x: -20 //center
},
subtitle: {
text: '3 Datensätze mit 3 Y-Achsen',
x: -20
},
xAxis: {
lineWidth: 1,
//lineColor: Highcharts.getOptions().colors[1],
gridLineWidth: 1,
//gridLineColor: Highcharts.getOptions().colors[1],
type: 'datetime',
dateTimeLabelFormats: {
day: '%e of %b'
},
tickPixelInterval: 150,
maxZoom: 60000,
title: {
text: 'Zeit',
style: {
color: Highcharts.getOptions().colors[1]
}
}
},
yAxis: [{
lineWidth: 0,
lineColor: Highcharts.getOptions().colors[1],
//minorGridlineColor: Highcharts.getOptions().colors[1],
//gridlineColor: Highcharts.getOptions().colors[1],
minorTickInterval: 5,
labels:{
format: '{value}°C',
style: {
color: Highcharts.getOptions().colors[1]
}
},
title: {
text: 'Temperatur',
style: {
color: Highcharts.getOptions().colors[1]
}
},
minPadding: 0.02,
maxPadding: 0.02
},
{
//gridlineColor: Highcharts.getOptions().colors[1],
//minorGridlineColor: Highcharts.getOptions().colors[1],
minorTickInterval: 5,
gridLineWidth: 1,
labels:{
format: '{value}ml',
style: {
color: Highcharts.getOptions().colors[1]
}
},
title: {
text: 'Volumen',
style: {
color: Highcharts.getOptions().colors[1]
}
},
minPadding: 0.02,
maxPadding: 0.02
},
{
//gridlineColor: Highcharts.getOptions().colors[1],
//minorGridlineColor: Highcharts.getOptions().colors[1],
minorTickInterval: 50,
labels:{
format: '{value}mbar',
style: {
color: Highcharts.getOptions().colors[1]
}
},
title: {
text: 'Druck',
style: {
color: Highcharts.getOptions().colors[1]
}
},
minPadding: 0.02,
maxPadding: 0.02
}],
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)+
this.series.tooltipOptions.valuePrefix;
}
},
plotOptions: {
line: {
marker: {
enabled: false
}
}
},
legend: {
layout: 'vertical',
align: 'center',
layout: 'horizontal',
borderWidth: 1
},
series: [{
name: 'Temperatur',
data: [],
tooltip: {
valuePrefix: '°C'
},
color: Highcharts.getOptions().colors[0]
},
{
name: 'Volumen',
yAxis:1,
data: [],
tooltip: {
valuePrefix: 'ml'
},
color: Highcharts.getOptions().colors[3]
},
{
name: 'Druck',
yAxis:2,
data: [],
tooltip: {
valuePrefix: 'mbar'
},
color: Highcharts.getOptions().colors[2]
}
]
}
$.getJSON("Daten1.json", function(json) {
options.series[0].data = json;
chart = new Highcharts.Chart(options);
});
$.getJSON("Daten2.json", function(json) {
options.series[1].data = json;
chart = new Highcharts.Chart(options);
});
$.getJSON("Daten3.json", function(json) {
options.series[2].data = json;
chart = new Highcharts.Chart(options);
});
});
</script>
<script src="Highcharts\js\highcharts.js"></script>
</head>
<body>
<div id="container" style="min-width: 400px; height: 800px; margin: 0 auto"></div>
</body>
</html>
I have no idea what ist not working correct. I have the latest Highcharts Version.
Any hint would be helpful. Thanks for your help, Patrick
The IE / Chrome / FF doens't call ajax locally. So you need to setup your own webserver and run your code.

unable to display json data on highcharts

I am trying to build a highchart on my page. I do get the chart frame and title but now lines or legends. When I do:
document.write(output)
[ {"name":"dc1_sx02","data":[[1406269800,0.092],[1406271600,0.092],[1406273400,0.091],[1406275200,0.093],[1406277000,0.091],[1406278800,0.09],[1406280600,0.093],[1406282400,0.094],[1406284200,0.092],[1406286000,0.09],[1406287800,0.094]]},{"name":"dc1_sx03","data":[[1406340000,0.01],[1406341800,0.009],[1406343600,0.009],[1406345400,0.009],[1406347200,0.009],[1406349000,0.009],[1406350800,0.009],[1406352600,0.009],[1406356200,0.01],[1406358000,0.009],[1406359800,0.009],[1406361600,0.009],[1406365200,0.009],[1406367000,0.009],[1406368800,0.009],[1406370600,0.009],[1406374200,0.009],[1406376000,0.009],[1406377800,0.01],[1406379600,0.009],[1406383200,0.009],[1406385000,0.009],[1406386800,0.009],[1406388600,0.009],[1406392200,0.009],[1406394000,0.009],[1406475000,0.009],[1406476800,0.009],[1406478600,0.009],[1406480400,0.009],[1406482200,0.009],[1406484000,0.009],[1406485800,0.009],[1406487600,0.009],[1406489400,0.009],[1406491200,0.011],[1406493000,0.01],[1406494800,0.009],[1406496600,0.009],[1406498400,0.009],[1406500200,0.01],[1406502000,0.009],[1406503800,0.009],[1406505600,0.009],[1406507400,0.009],[1406509200,0.009],[1406511000,0.009],[1406512800,0.009],[1406514600,0.009],[1406516400,0.009],[1406518200,0.009],[1406520000,0.009],[1406521800,0.009],[1406523600,0.009],[1406525400,0.009],[1406527200,0.009],[1406529000,0.01],[1406530800,0.009],[1406532600,0.009],[1406534400,0.009],[1406536200,0.009],[1406538000,0.009],[1406539800,0.009],[1406541600,0.009],[1406543400,0.009],[1406547000,0.009],[1406548800,0.009],[1406550600,0.009],[1406552400,0.009],[1406554200,0.009],[1406556000,0.009],[1406557800,0.009],[1406559600,0.009],[1406561400,0.009],[1406563200,0.009],[1406565000,0.009],[1406566800,0.009],[1406568600,0.009],[1406570400,0.009],[1406572200,0.009],[1406574000,0.009],[1406575800,0.009],[1406577600,0.009],[1406579400,0.009],[1406581200,0.009],[1406583000,0.009],[1406584800,0.009],[1406586600,0.009],[1406588400,0.009],[1406590200,0.009],[1406592000,0.009],[1406593800,0.009],[1406595600,0.009],[1406597400,0.009],[1406599200,0.009],[1406601000,0.009],[1406602800,0.009],[1406604600,0.01],[1406606400,0.009],[1406608200,0.009],[1406610000,0.009],[1406611800,0.009],[1406613600,0.009],[1406615400,0.01],[1406617200,0.011],[1406619000,0.012],[1406620800,0.012],[1406622600,0.012],[1406624400,0.012],[1406626200,0.012],[1406628000,0.012],[1406629800,0.012],[1406631600,0.012],[1406633400,0.012],[1406635200,0.012],[1406637000,0.011],[1406638800,0.012],[1406640600,0.012],[1406642400,0.012],[1406644200,0.012],[1406646000,0.012],[1406647800,0.013],[1406649600,0.012],[1406651400,0.012],[1406653200,0.012],[1406655000,0.012]]} ]
I do get the nicely formated json output. Any ideas what I might be missing from this script:
<!DOCTYPE html>
<html>
<head>
<title>Hello</title>
<!-- Include order: first jquery, then opencpu.js, and then your code -->
<script src="opencpu/jquery-1.10.2.min.js"></script>
<script src="opencpu/opencpu-0.4.js"></script>
<script src="opencpu/highcharts.js"></script>
<script src="opencpu/export-csv.js"></script>
<script>
//init this script when the page has loaded
$(document).ready(function(){
$("#submitbutton").on("click", function(){
//disable the button to prevent multiple clicks
$("#submitbutton").attr("disabled", "disabled");
var myname = $("#namefield").val();
//perform the request
var req = ocpu.rpc("output", {
myname : myname
}, function(output){
document.write(output);
//alert(output);
$('#output').highcharts({
//$("#output").highcharts('StockChart',{
chart: {
borderColor: '#98AFC7',
borderRadius: 20,
borderWidth: 1,
renderTo: 'output',
type: 'line',
marginRight: 10,
zoomType: 'x',
resetZoomButton: {
position: {
x: -50,
y: -50
}
}
},
plotOptions: {
line: {
marker: {
radius: 4,
lineColor: '#666666',
lineWidth: 5
}
}
},
exporting: {
enabled: true
},
legend: {
enabled: true,
backgroundColor: '#FCFFC5',
borderColor: 'black',
borderWidth: 2,
shadow: true
},
rangeSelector: {
enabled:true
},
scrollbar: {
enabled: true
},
navigator : {
enabled : true
},
xAxis: {
type:'datetime',
gridLineColor: '#EEEEEE',
gridLineWidth: 1
},
yAxis: { // Primary yAxis
labels: {
style: {
color: 'blue'
}
},
gridLineColor: '#EEEEEE',
gridLineWidth: 1,
title: {
text: '% CPU Utilization',
fontSize: '50px',
style: {
color: 'blue'
}
}
},
credits: {
enabled: false
},
title: {
text: '% CPU UTILIZATION',
style: {
color: '#333000',
fontSize: '14px'
}
},
tooltip: {
positioner: function(){
return{x:20,y:-5};
},
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}<b>',
valueDecimals: 2
},
series:output
});
});
//if R returns an error, alert the error message
req.fail(function(){
alert("Server error: " + req.responseText);
});
//after request complete, re-enable the button
req.always(function(){
$("#submitbutton").removeAttr("disabled")
});
});
});
</script>
<style>
#output{
height: 600px;
width: 1500px;
border: 0px;
padding: 3px;
}
</style>
</head>
<body>
<h1>My First HighStock Chart!!!!</h1>
<b>Your name: </b> <input type="text" id="namefield">
<button id="submitbutton" type="button">Submit to server!</button>
<div id="output"> </div>
<br />
</body>
</html>
I did a
document.write(output)
and copyied the output to the jsfiddle at this address:
http://jsfiddle.net/gsaray101/rmL1573f/
it works there so I am assuming the data is accurate, any ideas what might be happening?
I resolved this problem by using JSON.parse() function in the ui as follows:
var data=output;
data=JSON.parse(data);

highstock conflict with jquery.ba-resize.js and jquery.flot.resize.js

after hours of troubleshooting about why my chart is not loading, i found using jquery.ba-resize and jquery.flot.resize concurrently with highstock in one page cause this error:
uncaught typeerror: cannot read property 'width' of undefined
currently im tring to integrate one of highstock examples into my page, which could be found at highstock demos.
any idea on how to fix this?
thanks
edit2: jsfiddle: http://jsfiddle.net/CFPqG/
actual code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highstock Example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var seriesOptions = [],
yAxisOptions = [],
seriesCounter = 0,
names = ['MSFT', 'AAPL', 'GOOG'],
colors = Highcharts.getOptions().colors;
$.each(names, function(i, name) {
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename='+ name.toLowerCase() +'-c.json&callback=?', function(data) {
seriesOptions[i] = {
name: name,
data: data
};
// As we're loading the data asynchronously, we don't know what order it will arrive. So
// we keep a counter and create the chart when all the data is loaded.
seriesCounter++;
if (seriesCounter == names.length) {
createChart();
}
});
});
// create the chart when all data is loaded
function createChart() {
$('#container').highcharts('StockChart', {
lang: {
rangeSelectorZoom: ''
},
chart: {
type: 'area'
},
legend: {
enabled: true,
borderRadius: 0,
layout: 'horizontal',
backgroundColor: null,
align: 'right',
verticalAlign: 'top',
floating: true,
borderWidth: 0,
y: 20
},
colors: [
'#71c49a',
'#444444',
'#777777',
'#910000',
'#1aadce',
'#492970',
'#f28f43',
'#77a1e5',
'#c42525',
'#a6c96a'
],
exporting: {
enabled: false
},
credits: {
enabled: false
},
xAxis: {
lineColor: '#d8efe3',
labels: {
style: {
color: '#71c49a'
},
}
},
yAxis: {
lineColor: '#d8efe3',
gridLineColor: '#d8efe3',
labels: {
style: {
color: '#71c49a'
},
formatter: function() {
return (this.value > 0 ? '+' : '') + this.value + '%';
}
},
plotLines: [{
value: 0,
width: 2,
color: '#71c49a'
}]
},
scrollbar: {
enabled: false
},
rangeSelector: {
selected: 1,
inputEnabled: false,
buttonSpacing: 5,
labelStyle: {
color: '#71c49a',
fontWeight: 'bold'
},
},
navigator: {
handles: {
backgroundColor: '#d8efe3',
borderColor: '#71c49a'
},
series: {
color: '#71c49a'
}
},
plotOptions: {
area: {
lineWidth: 3,
shadow: true,
marker: {
enabled: true,
fillColor: '#FFFFFF',
lineWidth: 2,
lineColor: null,
symbol: 'circle',
radius: 3,
states: {
hover: {
enabled: true
}
}
}
},
series: {
compare: 'percent',
fillOpacity: 0.7
}
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>',
valueDecimals: 2
},
series: seriesOptions
});
}
});
</script>
</head>
<body>
<script src="../../js/highstock.js"></script>
<script src="../../js/modules/exporting.js"></script>
<div id="container" style="height: 400px; min-width: 600px"></div>
<script src="your-path/jquery.ba-resize.js"></script>
<script src="your-path/jquery.flot.resize.js" type="text/javascript"></script>
</body>
</html>
Looks like that 'resize' library overwrites some jQuery function, which doesn't work the same way anymore.. ? In that case I advice to use Highcharts standalone version, see: http://jsfiddle.net/CFPqG/1/
<script type="text/javascript" src="https://rawgithub.com/cowboy/jquery-resize/v1.1/jquery.ba-resize.js"></script>

Categories