使用Highcharts库使用php,js,Jquery和ajax创建动态图表

时间:2014-04-18 12:36:40

标签: php jquery ajax json highcharts

我尝试使用过去5天的HighChart堆积柱形图。我无法在图表中显示我的MySQL数据。我试图达到一个动态图表。我正在使用示例代码按照highcharts的指南。我正在创建3页.index.php,graph4.php和data4.php。在index.php中有基于选择的图表,当我从下拉列表中选择我获得所有选择的值时,我传递给graph4.php然后在graph4之后然后它传递给data4.php.Below是我的代码..

在index.php中使用ajax进行jquery

 <script type="text/javascript">
 $(document).ready(function(){
 //alert(projectID);
 $('#Result').click(function(){
  var clickBtnValue = $(this).val();
   $.ajax({type:'GET',
   url:"graph4.php?projectID="+projectID+"&clickBtnValue="+clickBtnValue,
   success:function(results){
  res3=results;
  //alert(res);
  alert(res3);
  $('#chart_container').html(res3);
  return res3;
  }
  });
 });
});

这是graph4.php

<?php session_start();
 echo $projectID=$_REQUEST['projectID']; 
 $_SESSION['projectID'] = $projectID;

  $clickBtnValue = $_REQUEST['clickBtnValue'];
 ?>
  $(document).ready(function() {

        var options = {
            chart: {
                renderTo: 'chart_container',
                type: 'column',
                marginRight: 130,
                marginBottom: 40
            },
            title: {
                text: 'Project Ratings',
                x: -20 //center
            },
            subtitle: {
                text: '',
                x: -20
            },
            xAxis: {
                categories: []
            },
            yAxis: {
                title: {
                    text: 'Ratings'
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            tooltip: {
                formatter: function() {
                        return '<b>'+ this.series.name +'</b><br/>'+
                        this.x +': '+ this.y;
                }
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'top',
                x: -10,
                y: 100,
                borderWidth: 0
            },
             plotOptions: {
                column: {
                    stacking: 'normal',
                    dataLabels: {
                        enabled: true,
                        //color: (Highcharts.theme &&     Highcharts.theme.dataLabelsColor) || 'white'
                    }
                }
            },
            series: []
        }

        $.getJSON("getprojects.php", function(json) {

            options.xAxis.categories = json[0]['data'];
            options.series[0] = json[1];
            options.series[1] = json[2];
            options.series[2] = json[3];

            chart = new Highcharts.Chart(options);

        });
    });

此data4.php

     $query = mysql_query("SELECT projects_detail.Project_name ,    gurgaon_overal_rating.facilities_total,gurgaon_overal_rating.total_ext_rating,gurgaon_overa     l_rating.specs_total,gurgaon_overal_rating.tot_overal_rating
 FROM projects_detail 
  LEFT OUTER JOIN gurgaon_overal_rating ON projects_detail.project_id=        gurgaon_overal_rating.project_id
  Where  FIND_IN_SET(projects_detail.project_id, '".$projectID."')
   ORDER BY gurgaon_overal_rating.tot_overal_rating ");

  //include "graph4.php";
  $category = array();
  $category['name'] = 'Project';

   $series1 = array();
   $series1['name'] = 'Facilities Rating';

   $series2 = array();
  $series2['name'] = 'External Rating';

  $series3 = array();
  $series3['name'] = 'Specification Rating';

  $series4 = array();
  $series4['name']='Total Ovearl Rating';


  while($r = mysql_fetch_array($query)) {
$category['data'][] = $r['Project_name'];
$series1['data'][] = $r['facilities_total'];
$series2['data'][] = $r['total_ext_rating'];
$series3['data'][] = $r['specs_total']; 
 }
  $result = array();
 array_push($result,$category);
 array_push($result,$series1);
 array_push($result,$series2);
 array_push($result,$series3); 
 print json_encode($result, JSON_NUMERIC_CHECK);

这里我的图表将不会显示在眉毛上

0 个答案:

没有答案