CODEWITHSUNDEEP
javascripthtml
Anubhav Mishra
Anubhav Mishra

Reputation: 106

How to send a request to the server and get the data

I have written the below code which is allowing me to draw a chart.

<html>
  <head>

  </head>
  <body>
    <select id="ChartType" name="ChartType" onchange="drawChart()">
 <option value = "PieChart">Select Chart Type
 <option value="PieChart">PieChart
 <option value="Histogram">Histogram
 <option value="LineChart">LineChart
 <option value="BarChart">BarChart
  </select>
  <div id="chart_div" style="border: solid 2px #000000;" ></div>
  <p id="demo"></p>
  <p id="demo1"></p>

          <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">

    // Load the Visualization API and the piechart package.
      google.load('visualization', '1.0', {'packages':['corechart']});

      // Set a callback to run when the Google Visualization API is loaded.
      google.setOnLoadCallback(drawChart);

      // Callback that creates and populates a data table,
      // instantiates the pie chart, passes in the data and
      // draws it.

         function drawChart() {

        // Create the data table.
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Topping');    
        data.addColumn('number', 'Slices');
        data.addRows([
          ['Mushrooms', 3],
          ['Onions', 4],
          ['Olives', 1],
          ['Zucchini', 5],
          ['Pepperoni', 2]
        ]);

        var a = document.getElementById("ChartType").value;
          document.getElementById("demo1").innerHTML = "You selected: " + a;

        // Set chart options
        var options = {'title':'How Much Pizza I Ate Last Night',
                       'width':400,
                       'height':300
                       };

         // Instantiate and draw our chart, passing in some options.
        var chart = new google.visualization[document.getElementById("ChartType").value](document.getElementById('chart_div'));
        chart.draw(data, options);



        }
    </script>
  </body>
</html>

However here my values are fixed. I want to read these values from the server by sending a request to the server and get the desired value then pass these values to my code. Can anyone please help me in doing the same ?

Upvotes: 0

Views: 182

Answers (3)

RupamDotInfo
RupamDotInfo

Reputation: 57

The HTML (index.html) Code would be like-

<html>

<head>
</head>

<body>
 <select id="ChartType" name="ChartType" onchange="drawChart()">
 <option value = "PieChart">Select Chart Type
 <option value="PieChart">PieChart
 <option value="Histogram">Histogram
 <option value="LineChart">LineChart
 <option value="BarChart">BarChart
  </select>
<div id="chart_div" style="border: solid 2px #000000;"></div>
<p id="demo"></p>
<p id="demo1"></p>

<script type="text/javascript" src="https://www.google.com/jsapi"></script>

<script type="text/javascript">
var row = [];
var temp;
var stri;
google.load('visualization', '1.0', {'packages':['corechart']});
google.setOnLoadCallback(getValues);
     function getValues() {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        stri = xmlhttp.responseText;
            drawChart();
        }
    };
    xmlhttp.open("GET", "values.php?q=val", true);
    xmlhttp.send();
    }

    function drawChart() {
    var data = new google.visualization.DataTable();
    str = stri.split(",");

    for(i = 0; i<str.length-1; i++)
    {
        if(str[i].split("_")[0] == "Column")
        {
            data.addColumn(str[i].split("_")[1], str[i].split("_")[2]);
        }
        else
        {    
            temp = [str[i].split("_")[1], parseInt(str[i].split("_")[2])];
            row.push(temp);
        }

    }
    data.addRows(row);
    var a = document.getElementById("ChartType").value;
    document.getElementById("demo1").innerHTML = "You selected: " + a;
    var options = {'title':'How Much Pizza I Ate Last Night',
                   'width':400,
                   'height':300
                   };
    var chart = new google.visualization[document.getElementById("ChartType").value](document.getElementById('chart_div'));
    chart.draw(data, options);
    }
</script>

The PHP (values.php) Code would be like-

<?php
if($_REQUEST["q"]=="val")

// You can get these data from database also.

$a[] = "Column_string_Topping";
$a[] = "Column_number_Slices";
$a[] = "Rows_Mushrooms_3";
$a[] = "Rows_Onions_4";
$a[] = "Rows_Olives_1";
$a[] = "Rows_Zucchini_5";
$a[] = "Rows_Pepperoni_2";

foreach($a as $name)
{
    echo $name.",";
}
?>

Keep both HTML and PHP file in the same directory.

Upvotes: 1

Jay
Jay

Reputation: 75

You need to do an ajax call to retrieve your data from the server then load the returned json into the DataTable function.

var jsonData = $.ajax({
    url: "getData.php",
    dataType: "json",
    async: false
    }).responseText;

var data = new google.visualization.DataTable(jsonData);

JSON data must be returned from the server in the format outlined in the Google Charts Reference Docs here.

Upvotes: 0

charsi
charsi

Reputation: 3847

Fetch the data from the server using an ajax call (get/post) use the response to populate the data.

With jquery a get request looks like this -

$.get('http://you-domain.com/get-data/', function(res){
    // res will contain the data from the server
    // you can use it to update the local data before refrehing the graph.
});

Upvotes: 0

Related Questions