CODEWITHSUNDEEP
javascriptphpjqueryarraysjson
Josete Manu
Josete Manu

Reputation: 187

How to use getJSON on my html

I'm a totally noob on html, php, javascrpt... but I have enough programming skills, the fact is that I have the following code caught in google charts and slightly modified by me:

<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization.1", {packages:["bar"]});
google.setOnLoadCallback(drawChart);
function drawChart() {

    var datos = [
     ['DATOS', 'dato1', 'dato2', 'dato3', 'dato4'],
     ['22/03/2015', 1000, 400, 300, 1000],
     ['23/03/2015', 1170, 460, 250, 750],
     ['24/03/2015', 660, 220, 200, 730],
     ['25/03/2015', 200, 140, 100, 699]
    ];

    var datos_end = google.visualization.arrayToDataTable(datos);

    var options = {
    chart: {
    title: 'Datos de los sensores',
    }
};

var chart = new google.charts.Bar(document.getElementById('columncrt_material'));

chart.draw(datos_end, options);
}
</script>
</head>
    <body>
    <div id="columnchart_material" style="width: 900px; height: 500px;"></div>
</body>
</html>

The question is: how can i get the data out from a .json file instead of writing manually. Data is already a string on the json file.

I've been seeing that there are functions to read a json with JQuery but i have not idea how to insert on my code:

var studentId = null;
j.getJSON(url, data, function(result)
{
    studentId = result.Something;
});

link: https://stackoverflow.com/questions/3...tjson-function

EDIT

My json is:

{
    "data":[
          ['DATA', 'd1', 'd2', 'd3', 'd4'],
          ['22/03/2015', 1000, 400, 300, 1000],
          ['23/03/2015', 1170, 460, 250, 750],
          ['24/03/2015', 660, 220, 200, 730],
          ['25/03/2015', 200, 140, 100, 2000]
        ]
}

Upvotes: 2

Views: 248

Answers (2)

Mahendran Sakkarai
Mahendran Sakkarai

Reputation: 8539

I'm using $.getJSON to parse the json file and assign the array to the datos_end.

First add the json in a file. I added as graph.json and store it in a place. Json must be in correct format. Don't copy and paste the above json content. Use the following json(formatted).

{"data":[["Year","Sales","Expenses","Profit"],["2014",1000,400,200],["2015",1170,460,250],["2016",660,1120,300],["2017",1030,540,350]]}

Then you need to add the jQuery library to your page as like the google graph api file and then made some modification. Check the below code.

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <!-- Included Jquery Library -->
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript">
        google.load("visualization", "1", {packages:["bar"]});
        google.setOnLoadCallback(drawChart);
        function drawChart() {
            $.getJSON("graph.json", function(response){
                var datos_end = google.visualization.arrayToDataTable(response.data);

                var options = {
                    chart: {
                        title: 'Datos de los sensores',
                    }
                };

                var chart = new google.charts.Bar(document.getElementById('columncrt_material'));

                chart.draw(datos_end, options);
            })
            .success(function() { 
                console.log("success");
            })
            .error(function(jqXHR, textStatus, errorThrown) {  
                console.log("error " + textStatus);
                console.log("incoming Text " + jqXHR.responseText);})
            .complete(function() {
                console.log("completed");
            });
        }
    </script>
  </head>
  <body>
    <div id="columncrt_material" style="width: 900px; height: 500px;"></div>
  </body>
</html>

For more details about $.getJson check the official documentation.

Upvotes: 1

DanielM
DanielM

Reputation: 6666

If your file is a real file, and you're using PHP and only need this to happen on the server side, you can just include it.

<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization.1", {packages:["bar"]});
google.setOnLoadCallback(drawChart);
function drawChart() {

    var datos = <?php include 'myJson.json'; ?>;

    var datos_end = google.visualization.arrayToDataTable(datos);

    var options = {
    chart: {
    title: 'Datos de los sensores',
    }
};

var chart = new google.charts.Bar(document.getElementById('columncrt_material'));

chart.draw(datos_end, options);
}
</script>
</head>
    <body>
    <div id="columnchart_material" style="width: 900px; height: 500px;"></div>
</body>
</html>

Updated: Put the code in the code of the original question

Upvotes: 0

Related Questions