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>
$(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/
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.
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);
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>