Title: Highcharts - Cannot load external data with JSON / No PHP
Tags: javascript;json;csv;highcharts
Question: I'm playing around with HighCharts / HighStocks and am trying to automatically pass data from my reporting software into the charts, without using a PHP file, but I can't quite figure out how to get my syntax right.

Quite bluntly, I think this is out of my league. I'm not a AJAX/Javascript/JSON coder. My skills lie elsewhere, and after going through and reading about 40 pages of threads here, I'm hoping someone can help me out.

Obviously the example works fine when I use it locally, but when I try and change the source data in the get JSON line, I just get an empty page / no chart. I've been banging my head against a wall with this for quite a while now, but not having any luck.

HTML Code:

```<!DOCTYPE HTML&gt;
<html&gt;
<head&gt;
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
<title&gt;Highstock Example</title&gt;
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"&gt;</script&gt;
<script type="text/javascript"&gt;
$(function() {$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&amp;callback=?', function(data) { 
// Create the chart
window.chart = new Highcharts.StockChart({
chart : {
renderTo : 'Container'
},
rangeSelector : {
selected : 1
},
title : {
text : 'This is the header'
},
series : [{
name : 'AAPL',
data : data,
tooltip: {
valueDecimals: 2
}
}]
});
});
});
 </script&gt;
</head&gt;
<body&gt;
<script src="../js/highstock.js"&gt;</script&gt;
<script src="../js/modules/exporting.js"&gt;</script&gt;
<div id="Container" style="height: 500px; min-width: 500px;"&gt;</div&gt;
<p&gt;Testing</p&gt;
</body&gt;
</html&gt;
```

As far as I can see, this is the line that I need to change:

```$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&amp;callback=?', function(data) {
```

On my local server, I can use the following link to extract data from reporting tool (which reads from SQL database).

```//localserver/query=ZZZ
```

and this outputs as:

```[{f1:"[[1338732000000,29119.439],"},
{f1:"[1338818400000,30367.229],"},
{f1:"[1338904800000,29221.893],"},
{f1:"[1339336800000,29640.756]]"}]
```

Or I can pass it out as such:

```[[1338732000000,29119.439],
[1338818400000,30367.229],
[1338904800000,29221.893],
[1338991200000,31075.204],
[1339077600000,29449.717],
[1339336800000,29640.756]]
```

I appreciate the data format(s) above are slighly different to what is expected by HighCharts.

My questions are:

a) Is it possible to populate the highchart via data on demand from local server without using a PHP file? 

Everything is on the same/local server. Reporting software has a web element, that queries a SQL database, and returns the data set.

Basically I want to replace this:

```$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&amp;callback=?', function(data) {
```

With this:

```$.getJSON('http://localserver/query=ZZZ', function(data) {
```

Reason being that reporting software allows users to change dates, variables (e.g. Country) etc, and then I'd want that to update the chart.

b) Can I parse/translate the data in JavaScript inside the html? 

I think half the problem I am having is getting the reporting software and Highcharts Javascript to handshake. I've tried the local csv example from their site, but I can't get that to work at all, and can't find a full html/javascript example anywhere.

Thanks in advance!

Comment: You are using jsonp instead of json.


Here is another answer: 
Yes you can use JSON generated from an SQL query to populate Highcharts. They key here is to initialize the chart inside the .getJSON callback function and loop through the JSON data to add the points to the chart.


Here's some sample code to hopefully get you started:

```<script type="text/javascript"&gt;
    var chart = null;

    function createChart() {
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'line',
            },
            xAxis: {
                type: 'datetime',
                title: {
                    text: 'Time'
                }
            },
            yAxis: {
                title: {
                    text: 'Some data'
                }
            },
            series: [{
                data: [],
                name: 'some data',
                type: 'line'
            }],
        });
    }

    $(document).ready(function() {
        // Fetch JSON...
        $.getJSON('http://localhost/script.php', function(res, textStatus, jqXHR) {
            if (res.success) {
                // Populate the chart...
                var points = [];
                $.each(res.points, function(i, val) {
                    points.push({ x : val.x, y : val.y });
                });
                createChart();
                chart.series[0].setData(points);
            }
        });
    });
</script&gt;
```


{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 1, 'CommentCount': 1, 'ContentLicense': 'CC BY-SA 3.0', 'CreationDate': '2012:00:06/30/12', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<javascript><json><csv><highcharts>', 'Title': 'Highcharts - Cannot load external data with JSON / No PHP', 'ViewCount': 5394, 'id': 11272623, 'user_AboutMe': None, 'user_AccountId': 1614550.0, 'user_DisplayName': 'Rusty', 'user_Reputation': 1.0, 'user_Views': 1.0, 'user_id': 1492608.0}}