I’m very new to Javascript so apologies in advanced.
This link contains a charts data from a file named jsonp.php using an AJAX request.
I’m attempting to recreate this but use a local file instead of the one from their server. I can download their example jsonp.php file and save it to my desktop.
I’ve managed to put together this code which allows me to open and read the file.
<!DOCTYPE html>
<html>
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>
<input type="file" id="files" name="file" />
<div id="container" style="height: 500px; min-width: 500px"></div>?
<script>
function handleFileSelect(evt)
{
var files = evt.target.files; // FileList object
for (var i = 0, f; f = files[i]; i++)
{
var reader = new FileReader();
reader.onload = (function(reader)
{
return function()
{
var contents = reader.result;
//var lines = contents.split('\n');
//example('test')
//////
//document.getElementById('container').innerHTML=contents;
}
})(reader);
reader.readAsText(f);
}
}
//function example(a)
//{
//alert('You have chosen: ' + a);
//}
document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>
</html>
I’m now trying to combine both scripts to show the charts with the local file (see link). I’ve tried to remove the ajax call and call the function with renderChart(f)
function renderChart(data) {
// Create the chart
window.chart = new Highcharts.StockChart({
chart : {
renderTo : 'container'
},
rangeSelector : {
selected : 1
},
title : {
text : 'AAPL Stock Price'
},
series : [{
name : 'AAPL',
data : data,
tooltip: {
valueDecimals: 2
}
}]
});
});
which isn’t working. Please can I ask where I’m going wrong
Thank you
There were several syntax errors in the JSFiddle you sent. Here is a new JSFiddle with the basic errors resolved. However I did not try to use a file formatted as Highcharts should need it.
Hint: try using the Javascript Console in Chrome to see the errors.