Jump to content
JChartFX Community
  • 0

Loading data from PHP file (JSON)



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)

    <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; }
     <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>

     <div class="ChartDiv1" id="targetchart" style="display:inline-block">
        <div id="myDiv" style="width:100%;height:100%;display:inline-block">

     <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"}],




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:


(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? 


Link to comment
Share on other sites

6 answers to this question

Recommended Posts

  • 0

When you do $.get('data.php', ...

afaik the browser will asynchronously download the URL and then run your code, which means the items variable will be invalid when the chart is created, I would recommend you try the following

1) Initialize the items variable to dummy data, later you can try to set this to an empty array to avoid showing dummy data

2) Inside your function make sure you parse response as it is a string and the set the dataValues property of the chart as follows

$.get('data.php', function (response) {

            var data = $.parseJSON(response);

            $("div", ".chartDiv1").chart("option", {dataValues:data});


I also noticed that the dates for the php generated output are slightly different than what we expect, they do not have the T separating the date and time and the Z at the end, we pass this dates to a javascript function that expects a very particular format, if you still have problems with the proposed changes I would recommend you try first without using dates, e.g.

- Do no set dataSourceSettings in the chart initialization

- Use dummy data as follows

var items = [{"Month":"Jan", "Value":15},{"Month":"Feb", "Value":23},{"Month":"Mar", "Value":18}];

- Create a new php that returns something like this

[{"Month":"Jan", "Value":150},{"Month":"Feb", "Value":87},{"Month":"Mar", "Value":120}, {"Month":"Apr", "Value":120}]

If the data changes then you know you have fixed the "dynamic" part of the data and then can focus on why your dates don't work as expected




Link to comment
Share on other sites

  • 0

You got me thinking and I solved the issue with a single line of php

var items = <?php include 'graph_data.php';?>;

It basically just included the php file content right there and its working!

Now I have another question, using the same code as above, how would I go about disabling the Title?

If I remove the "titles: [{ text: "Mapping Fields to chart elements"}]," it just displays a generic "Chart Title" I would just like it to be gone, I have been looking around and I can not seem to find anything that works.

Link to comment
Share on other sites

  • 0

ok, you got me thinking and I got it working by adding some php code into there, here is what I did

 For the variable it was really just one line of php code

 var items = <?php include 'graph_data.php' ?>;


If I want to pass any variables to the data I can just add them like so 

 var items = <?php

$var = 'something'; 

include 'graph_data.php'


Then in graph_data.php just have a call for $var and it shows up!


On another note on the same code as above, how would I go about removing the title, or more specificly turn it "visible: false" like I can with the legend?

Removing the line

titles: [{ text: "Mapping Fields to chart elements"}],

Just make as generic "Chart Title" appear there, but I would want the entire box gone so that its just the charts with the X values and Y values shown.


Also how would I go about setting the Y value minimum to what is the lowest data value on the chart, it does the maximum fine, but the minimum is always 0, this is an issue if the values are between 4950 and 5000, you can barely see a change on the graph.


Other then that, it displays beutifully and data updates fine, I have tried 8 other different chart software but they all seem to break when being loaded through an AJAX call, but this one actually works and has a very good load time and seems to not slow down systems like some of the others. 


(Sorry if this double posts, I tried to use the quick reply, but I dont think anything happened) 

Link to comment
Share on other sites

  • 0

>> On another note on the same code as above, how would I go about removing the title, or more specificly turn it "visible: false" like I can with the legend?

 That yellow box is actually created by our jQuery UI plugin so that it looks similar to other jQuery UI plugins, unfortunately there is currently no way to remove it, we should fix this in our next build, for now you can remove the text by setting the title text to ""

titles : [{text: ""}],

>> Also how would I go about setting the Y value minimum to what is the lowest data value on the chart, it does the maximum fine 

You do not have to set min or max, if you do not want 0 to be the min (we do this because in most cases it is what users want) you want to turn off the forceZero property

axisY : { forceZero: false }




Link to comment
Share on other sites

  • 0


 Would it be much work to move away from the jQuery UI stuff?

Do I need different inclueds or wull the jChartFX Full cover it, it seems like going without jQuery UI would be my best option since I want to have more control over the looks of the charts and I also want to add that amazing Zoom ScrollBar and it seems there is only a No JS Framework, is that something I need to get or it that something built in? The example HTML code only shows a little part, and not what files would need to be included to make it work.

 Thanks again for your help, the chart is working wonderfully, it took me a long time to find a plugin that would work for my need, I was almost giving up hope on using JavaScript and was about to start work and a freaking PHP image generator :D

Link to comment
Share on other sites

  • 0

It would be really simple switching to our "plain" javascript scripts.

- You are already including jchartfx.system and jchartfx.coreVector, remove the reference to jchartfx.ui.js 

- Add a div in your page that will be the holder of the chart

- create a new cfx.chart object and call the create method passing the div object (or div id).

You can read more details at http://support.softwarefx.com/jChartFX/article/2501235#2d0978a4-8c87-e211-84a5-0019b9e6b500


Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...