2016-08-14 28 views
0

私はグラフを描くことができる以下のコードを書いています。サーバーにリクエストを送信してデータを取得する方法

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

ただし、ここで私の値は固定されています。私はサーバーに要求を送信し、希望の値を取得し、これらの値を自分のコードに渡すことによって、サーバーからこれらの値を読み取るしたい。誰でも同じことをするのを助けてくれますか?

+3

JSの部分については、Ajaxでチュートリアルを検索してください。サーバーの部分については、サーバー側の言語の詳細を提供していないので、お手伝いできませんが、JSONが返されます。それは言われている、あなたはあまりにも多くのピザを昨夜食べた – blex

答えて

1

HTML(index.htmlの)コードは

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

PHP(values.php)コードは次のようになりlike-だろう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.","; 
} 
?> 

HTMLとPHPの両方のファイルを同じディレクトリに保管してください。

+0

私は、あなたが言及した方法で進歩するのを助ける例やリンクを提供してください。 –

+0

私は答えを更新し、合計コードを追加しました。新しい回答を確認してください。 – RupamDotInfo

+0

こんにちは、もう一度あなたを困らせて申し訳ありませんが、上記のコードも私のために働いていません。今でも私はグラフを描くことができません。 –

0

ajax呼び出し(get/post)を使用してサーバーからデータを取得し、応答を使用してデータを入力します。 jQueryを使って

get要求は次のようになります - あなたは、DataTableの関数に返されるJSONをロードした後、サーバーからデータを取得するために、AJAX呼び出しを行う必要があり

$.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. 
}); 
0

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

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

JSONデータは、Googleのチャートリファレンスドキュメントhereに概説された形式でサーバーから返されなければなりません。

関連する問題