Indsæt data fra CSV-fil i JavaScript
Hejsa,Jeg har et stort problem idet jeg har en CSV-fil med nogle dataer ligesom følgende:
2010.05.01, 5,67
2010.05.02, 5,66
2010.05.03, 5,66
2010.05.04, 5,68
2010.05.05, 5,69
2010.05.06, 5,72
og så videre...
Det er dato og kurs på en valuta. Datoen og kursen skal jeg så have sat ind i et script (Master-detail chart fra Highcharts). Datoen skal indsætte i x-akslen, og kursen i y-akslen.
Koden som data fra CSV-filen skal bruges i ser sådan her ud:
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
zoomType: 'x',
margin: [330, 30, 30, 80],
events: {
// on load of the master chart, add the detail chart
load: function() {
var detailContainer = jQuery('#container').prepend(
'<div id="details-chart"></div>'
),
detailStart = Date.UTC(2008, 7, 1),
detailData = [];
// reverse engineer the last part of the data
jQuery.each(this.series[0].data, function(i, point) {
if (point.x >= detailStart) {
detailData.push(point.y);
}
});
// create a detail chart referenced by a global variable
detailChart = new Highcharts.Chart({
chart: {
borderWidth: 0,
backgroundColor: null,
renderTo: 'details-chart',
height: 330,
margin: [80, 30, 20, 80],
style: {
position: 'absolute'
}
},
credits: {
style: {
top: '20px',
right: '30px'
}
},
title: {
text: 'Historical USD to EUR Exchange Rate'
},
subtitle: {
text: 'Select an area by dragging across the lower chart'
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: null,
maxZoom: 0.1
},
tooltip: {
formatter: function() {
return '<b>'+ (this.point.name || this.series.name) +'</b><br/>'+
Highcharts.dateFormat('%A %B %e %Y', this.x) + ':<br/>'+
'1 USD = '+ Highcharts.numberFormat(this.y, 2) +' EUR';
}
},
legend: {
enabled: false
},
plotOptions: {
series: {
marker: {
enabled: false,
states: {
hover: {
enabled: true,
radius: 3
}
}
}
}
},
series: [{
name: 'USD to EUR',
pointStart: detailStart,
pointInterval: 24 * 3600 * 1000,
data: detailData
}]
});
},
// listen to the selection event on the master chart to update the
// extremes of the detail chart
selection: function(event) {
var extremesObject = event.xAxis[0],
min = extremesObject.min,
max = extremesObject.max,
detailData = [],
xAxis = this.xAxis[0];
// reverse engineer the last part of the data
jQuery.each(this.series[0].data, function(i, point) {
if (point.x > min && point.x < max) {
detailData.push({
x: point.x,
y: point.y
});
}
});
// move the plot bands to reflect the new detail span
xAxis.removePlotBand('mask-before');
xAxis.addPlotBand({
id: 'mask-before',
from: Date.UTC(2006, 0, 1),
to: min,
color: 'rgba(0, 0, 0, 0.2)'
});
xAxis.removePlotBand('mask-after');
xAxis.addPlotBand({
id: 'mask-after',
from: max,
to: Date.UTC(2008, 11, 31),
color: 'rgba(0, 0, 0, 0.2)'
});
detailChart.series[0].setData(detailData);
return false;
}
}
},
title: {
text: null
},
xAxis: {
type: 'datetime',
showLastTickLabel: true,
maxZoom: 14 * 24 * 3600000, // fourteen days
minPadding: 0.01,
maxPadding: 0.01,
plotBands: [{
id: 'mask-before',
from: Date.UTC(2006, 0, 1),
to: Date.UTC(2008, 7, 1),
color: 'rgba(0, 0, 0, 0.2)'
}],
title: {
text: null
}
},
yAxis: {
gridLineWidth: 0,
labels: {
enabled: false
},
title: {
enabled: false
},
min: 0.6,
showFirstLabel: false
},
tooltip: {
formatter: function() {
return false;
}
},
legend: {
enabled: false
},
credits: {
enabled: false
},
plotOptions: {
series: {
fillColor: {
linearGradient: [0, 0, 0, 70],
stops: [
[0, highchartsOptions.colors[0]],
[1, 'rgba(0,0,0,0)']
]
},
lineWidth: 1,
marker: {
enabled: false
},
shadow: false,
states: {
hover: {
lineWidth: 1
}
}
}
},
series: [{
type: 'area',
name: 'USD to EUR',
pointInterval: 24 * 3600 * 1000,
pointStart: Date.UTC(2006, 0, 01),
data: [
0.8446, 0.8445, 0.8444, 0.8451, 0.8418, 0.8264, 0.8258, 0.8232, 0.8233, 0.8258,
0.8283, 0.8278, 0.8256, 0.8292, 0.8239, 0.8239, 0.8245, 0.8265, 0.8261, 0.8269,
0.7407, 0.7288, 0.7074, 0.6927, 0.7083, 0.7191, 0.719, 0.7153, 0.7156, 0.7158,
0.714, 0.7119, 0.7129, 0.7129, 0.7049, 0.7095
]
}]
});
Koden kan også ses ved at trykke "View Options" HER. I ovenstående kode er data lagt ind manuelt og hentes ikke via en CSV-fil.
Grunden til at jeg vil benytte en CSV-fil er at den vil indeholde kurser/data for adskillige år, samt den vil blive opdateret daglig med dagens sidste kurs fra Nationalbankens XML-feed.
Håber jeg kan få lidt meget hjælp, da jeg simpelthen ikke forstår hvad jeg skal gøre.
I et andet sample på siden kan jeg se et andet chart hvor de henter data ind fra en CSV-fil. Men jeg er simpelthen ikke i stand til at "kopier" teknikken til det sample jeg skal bruge.
Kan godt trække mine dataer ind i samme sample, selvom det ser lidt underligt ud da mine dataer ikke er beregnet til den type chart. Men kan ikke dublikere det til den chart jeg vil benytte - muligvis alene fordi jeg ikke fatter hvordan jeg får defineret dataerne fra CSV-filen ud i x- og y-akslen.
Se HER hvor de trække data ud fra en CSV-fil. Benyt evt. vis kode.
Jeg vil være evigt taknemmelig, hvis jeg kan få lidt hjælp her så jeg kan løse problemet. Det skal lige siges at jeg stort set intet aner om JavaScript og at det nok også derfor er at jeg endnu ikke har kunne løse problemet - har siddet med det 3 dage nu.
På forhånd mange tak.
