Home/ Questions/Q 8567357
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T17:51:56+00:00

I have the following test project in jsFiddle jsFiddle which runs as expected and

  • 0

I have the following test project in jsFiddle jsFiddle which runs as expected and JSLint reports code is valid.

I then copy and paste the html into a blank text file in Notepad and save as randomfilename.html

When I click the html file, I see the file chooser and I can select the file but the chart doesn’t render. Any ideas why? I’ve tried in IE, Chrome and Firefox and there’s no chart in any of them.

Thank you

EDIT: This is what I now have in a text file named randomfilename.html

It’s not working in

Chrome 21.0.1180.89 m or the latest firefox/IE for me?

<!DOCTYPE html>
<html>

<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<input type="file" id="files" name="file" />
<div id="container" style="height: 500px; min-width: 500px"></div>
<div id="testString"></div>

<script>

var dataString = new Array (
[1341187200000,592.52],[1341273600000,599.41],[1341446400000,609.94],[1341532800000,605.88],[1341792000000,613.89],[1341878400000,608.21],
[1341964800000,604.43],[1342051200000,598.90],[1342137600000,604.97],[1342396800000,606.91],[1342483200000,606.94],[1342569600000,606.26],
[1342656000000,614.32],[1342742400000,604.30],[1343001600000,603.83]);

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;
                document.getElementById('testString').innerHTML=contents;
                var gx;   
                gx=dataString;            
                renderChart(gx);  
}    
        })(reader);

        reader.readAsText(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
                }
            }]
        });
    };


document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I think you’re forgetting to include the jQuery library. When using a jsFiddle, it allows you to specify a JS library to be included automatically in your HTML (that you don’t physically see). When you copy/paste your HTML from jsFiddle, the jQuery library including is not copied over. Try adding something like:

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>

    right above the other <script> tags (ONLY in your text file you copy/paste to…you don’t need to do this in jsFiddle because it’s automatically “done”).

    Not that this will break it, but you’re also missing a <head> and <body> section in your HTML. I’m not sure if HTML5 makes this optional, but you might want to add those. Even if <head></head> is empty, it should be included…and all of your code inside of the current <html></html> should be inside of a nested <body></body>.

    • 0