点击一个按钮,在谷歌图表中调用绘制图表有些困惑

时间:2014-03-19 16:46:58

标签: javascript ajax json google-visualization

我试图点击按钮生成柱形图。当我点击按钮时,会调用drawchart(),但屏幕上没有创建图表。我通过使用警报检查了该函数,发现data.addRow(array1) [i],array2 [j])没有执行。两个数组都包含从json

中提取的值

此外,当我删除此按钮并在页面加载时调用函数drawChart()时,我可以看到只创建了图表,但没有绘制任何列,因为两个数组中都没有值。任何类型的帮助都是真的赞赏。

我的代码

<script type="application/javascript">
  function loadJSON()
  {

      alert("hello");
      alert(category);
      alert(subcat);
      alert(subdem);
     var data_file = "https://tc.api.tibco.com:43/TopOne/v1/"+category+"/"+subcat+"/"+subdem;
     alert("abc")
     var http_request = new XMLHttpRequest();
     try{
        // Opera 8.0+, Firefox, Chrome, Safari
        alert("in try");
        http_request = new XMLHttpRequest();
     }catch (e){
        // Internet Explorer Browsers
        try{ alert("in try1");
           http_request = new ActiveXObject("Msxml2.XMLHTTP");
        }catch (e) {
           try{ alert("in try2");
              http_request = new ActiveXObject("Microsoft.XMLHTTP");
           }catch (e){
              // Something went wrong
              alert("Your browser broke!");
              return false;
           }
        }
     }
     http_request.onreadystatechange  = function(){
         if(http_request.readyState ==1){ alert("1");}
         if(http_request.readyState ==2){ alert("2");}
         if(http_request.readyState ==3){ alert("3");}
         if(http_request.readyState ==4){ alert("4");}
        if (http_request.readyState == 4  )
        {
          // Javascript function JSON.parse to parse JSON data
          var jsonObj = JSON.parse(http_request.responseText);
            alert(http_request.responseText);
            alert(jsonObj);
          // jsonObj variable now contains the data structure and can
          // be accessed as jsonObj.name and jsonObj.country.

         //alert( jsonObj.Category.CategoryName);
         //alert(jsonObj.Category.CategoryName.Demographies.DemographyName);

          //document.getElementById("Country").innerHTML = jsonObj.country;
          alert(jsonObj.Category[0].SubCategory[0].Demographies[0].Items[0].Name);
          alert(jsonObj.Category[0].SubCategory[0].Demographies[0].Items[1].Name);
          for(i = 0;i<10;i++)
              {
              array1[i] = jsonObj.Category[0].SubCategory[0].Demographies[0].Items[i].Name;
              array2[i] = jsonObj.Category[0].SubCategory[0].Demographies[0].Items[i].SalesCount;

              }
          for(i=0;i<10;i++)
              {
              alert(array1[i]+" "+array2[i]);
              }
        }
     }
     http_request.open("GET", data_file, true);
    http_request.setRequestHeader("accept","application/json");

     http_request.send();
     }




  function drawChart(){

    alert("hello");

     var data = new google.visualization.DataTable();
     data.addColumn('string', 'name');
     data.addColumn('number', 'salescount');
     alert("ggg");
     for(i = 0; i < array1.length; i++)
            data.addRow([array1[i], array2[i]]);






        var options = {
          title: "Movies",
          width: 600,height:400
          //hAxis: {title: 'Year', titleTextStyle: {color: 'red'}}

        };

        var chart = new google.visualization.ColumnChart(document.getElementById('lowerRightDiv'));
        chart.draw(data, options);
  } 
  function initialize(){

            $("button.charts").click(function() {

                    drawChart();
            });
        }
       google.setOnLoadCallback(initialize);
       google.load("visualization", "1", {packages:["corechart"]});

      </script>

我创建按钮的代码是

<button class="charts" onclick="initialize();"style="left:400px;">Generate charts</button>

0 个答案:

没有答案