So I am trying to load data from a PHP file that prints out JSON data, I am using the code I found on an example (with some modifications, but it still displays the static data fine)
<html> <head> <title>jChartFX using JQueryUI</title> <style type="text/css"> #targetchart { width: 608px; height: 408px; padding: 4px; border: 1px solid #dddddd; background: #eeeeee } #targetchart h3 { text-align: center; margin: 0; } </style> <link type="text/css" href="http://www.jchartfx.com/resources/Include/cupertino/jquery-ui-1.8.21.custom.css" rel="Stylesheet" /> <script type="text/javascript" src="http://www.jchartfx.com/scripts/jquery-1.7.1.js"></script> <script type="text/javascript" src="http://www.jchartfx.com/scripts/jquery-ui-1.8.18.custom.min.js"></script> <script type="text/javascript" src="http://www.jchartfx.com/jChartFX/7.0.4728.16930/jchartfx.full.js"></script>
</head> <body> <div class="ChartDiv1" id="targetchart" style="display:inline-block"> <div id="myDiv" style="width:100%;height:100%;display:inline-block"> </div> </div>
<script language="javascript" type="text/javascript"> var chart1; $(document).ready(function ($) {
var items = [ { "Open": 24.2, "Date": "2003-03-01T23:45:10.280Z" }, { "Open": 21.3, "Date": "2003-03-02T23:45:10.280Z" }, { "Open": 22.4, "Date": "2003-03-03T23:45:10.280Z" }, { "Open": 24.3, "Date": "2003-03-04T23:45:10.280Z" }, { "Open": 22.6, "Date": "2003-03-05T23:45:10.280Z" } ]; $("div", ".ChartDiv1").chart({ gallery: cfx.Gallery.Bar, dataValues: items, dataSourceSettings: { fields: [{ name: "Open", usage: cfx.FieldUsage.Value },
{ name: "Date", usage: cfx.FieldUsage.XValue}] }, titles: [{ text: "Mapping Fields to chart elements"}], axisY:{ min:0, max:30 } }); }); </script>
</body>
</html>
Now instead of var items being static data, I would want it to be the data generated from my php file, the php file outputs this when run:
[{"Open":626,"Date":"2013-09-27 14:30:06"},{"Open":615,"Date":"2013-09-27 15:45:05"},{"Open":604,"Date":"2013-09-27 17:45:05"},{"Open":593,"Date":"2013-09-27 20:00:05"},{"Open":588,"Date":"2013-09-27 22:00:06"},{"Open":583,"Date":"2013-09-28 00:00:02"},{"Open":573,"Date":"2013-09-28 02:00:07"},{"Open":568,"Date":"2013-09-28 04:00:05"},{"Open":558,"Date":"2013-09-28 06:00:05"},{"Open":548,"Date":"2013-09-28 08:00:05"},{"Open":544,"Date":"2013-09-28 08:45:07"},{"Open":534,"Date":"2013-09-28 11:00:27"},{"Open":525,"Date":"2013-09-28 13:00:03"},{"Open":517,"Date":"2013-09-28 15:00:02"},{"Open":508,"Date":"2013-09-28 17:00:02"},{"Open":504,"Date":"2013-09-28 19:00:02"},{"Open":500,"Date":"2013-09-28 21:00:02"},{"Open":496,"Date":"2013-09-28 23:00:02"}]
(and may contain more or less data, but all in correct format)
If I copy this data into the items variable it displays fine, but if I try something like this (replacing the current item variable code):
var items;
$.get('data.php', function (response) {
items = response;
});
It does not display anything, it seems like it fails to render entierly.
How would I go about making the items variable the same as whatever data.php is outputting?