We help IT Professionals succeed at work.

php to jQuery

designaire
designaire asked
on
139 Views
Last Modified: 2014-12-10
How do I get this data from php to a jquery file so I can use it in a chart? The php has to be on another page because I have something else on there that I eventually need to use for the query. I have everything working separately but now have to integrate them. I'm very new to all coding languages.
data.php
	$query = "SELECT * FROM tracking where userid=1";		
	$result = mysqli_query($connection, $query);

	while($row = mysqli_fetch_array($result)) {
			$mind[] = $row['mind'];
			$body[] = $row['body'];
			$soul[] = $row['soul'];
			}

$mindData = implode(",", $mind);
$bodyData = implode(",", $body);
$soulData = implode(",", $soul);



  <script id="source" language="javascript" type="text/javascript">
$.ajax({                                      
  url: 'data.php', data: "", dataType: 'json',  success: function(rows)        
  {
???
    for (var i in rows)
    {
      var row = rows[i];          

      var mind = ??
      var body = ??
      var soul = ??

  </script>
  <script id="source" language="javascript" type="text/javascript">

so I can use it in a chart...

                name: 'Mind',
                type: 'spline',
                data: [mind],
                tooltip: {
                    valueSuffix: '0'
                },
				
				        }, {
                name: 'Body',
                type: 'spline',
                data: [body],
                tooltip: {
                    valueSuffix: '0'
                },
							
							        }, {
                name: 'Soul',
                type: 'spline',
                data: [soul],
                tooltip: {
                    valueSuffix: '0'
                },
  </script>

Open in new window

Comment
Watch Question

Most Valuable Expert 2011
Author of the Year 2014

Commented:
This is a fairly complicated application and it might be better for you to start with a simpler learning example.  Here is where I might start, just to get the concepts nailed down.
https://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Jquery/A_10712-The-Hello-World-Exercise-with-jQuery-and-PHP.html
CERTIFIED EXPERT
Expert of the Year 2014
Top Expert 2014

Commented:
The easiest solution would be to return an array of the json_encoded arrays

$ajax = array();
$ajax[0]=json_encode($mind);
$ajax[1]=json_encode($body);
$ajax[2]=json_encode($soul);

echo json_encode($ajax)

Open in new window

Then in the jQuery

$.ajax({                                      
  url: 'data.php', data: "", dataType: 'json',  success: function(rows)        
  {
    mind_json=rows[0];
    body_json=rows[1];
    soul_json=rows[2];
}
...

Open in new window

Author

Commented:
It looks good but even if it works I can't get it into the chart. This is the code they give you for json. How would I integrate it with the below code:  It is a Highchart.


  $.getJSON('data.json', function(data) {
        options.series[0].data = data;
        var chart = new Highcharts.Chart(options);
    });
CERTIFIED EXPERT
Expert of the Year 2014
Top Expert 2014

Commented:
What is the chart expecting?
Is this...
options.series[0].data = data;

...for all the data or supposed to be one block of the data like mind in which case you would just do
options.series[0].data = data[0];

Using the method I talk about earlier you have a json string containing three elements, each of those elements contain the json data for your mind, body etc

Author

Commented:
I can use this from javascript:

var plainData=[6,5,4,16]    

name: 'Mind',
                type: 'spline',
                data:plainData,
                tooltip: {
                    valueSuffix: '0'


or if I used data

name: 'Mind',
                type: 'spline',
                data:[2,3,5,2],
                tooltip: {
                    valueSuffix: '0'
                },

This works for php
                name: 'Mind',
                type: 'spline',
                data: [<?php echo join($soul, ',') ?>],
                tooltip: {
                    valueSuffix: '0'
                },




It's Highcharts and have this is what have for json. I know the chart I'm using starts out with chart:{

$(document).ready(function() {

    var options = {
        chart: {
            renderTo: 'container',
            type: 'spline'
        },
        series: [{}]
    };

    $.getJSON('data.json', function(data) {
        options.series[0].data = data;
        var chart = new Highcharts.Chart(options);
    });

});

Author

Commented:
I'm trying to use it with php data that's on another page, otherwise I would just keep the php. I can understand if it's too involved.

Author

Commented:
It won't take any data inside the ajax unless there's something I'm doing wrong.
Even if I put the javascript inside the ajax it won't work.
CERTIFIED EXPERT
Expert of the Year 2014
Top Expert 2014

Commented:
Back up a bit

$.getJSON('data.json', function(data) {

What is data.json? I thought you were making a call to a php page for the json data?

Author

Commented:
I want to bring the php data from another php page to the javascript  page so I can use it in the JQuery chart.


var plainData=[6,5,4,16]    

 name: 'Mind',
                 type: 'spline',
                 data:plainData,
                 tooltip: {
                     valueSuffix: '0'
CERTIFIED EXPERT
Expert of the Year 2014
Top Expert 2014

Commented:
data.json needs to be the name of the php page that is returning the json data

Author

Commented:
I haven't had time to work on this but it's pretty complex.

Author

Commented:
I'll have to shut this down for now

Author

Commented:
I've requested that this question be closed as follows:

Accepted answer: 0 points for designaire's comment #a40311211

for the following reason:

I got somebody to help me
CERTIFIED EXPERT
Expert of the Year 2014
Top Expert 2014

Commented:
Delete the question, there is no answer here
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION
CERTIFIED EXPERT
Expert of the Year 2014
Top Expert 2014

Commented:
Seriously! A 4 month old question that you abandoned and now you are coming back with something completely different ???

Author

Commented:
I found the answer somewhere else. It's just a prototype and works for what I need it for.

Gain unlimited access to on-demand training courses with an Experts Exchange subscription.

Get Access
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Empower Your Career
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE

Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.