Диаграмма холста Ajax не отображает изменения? - PullRequest
Новая
       1

Диаграмма холста Ajax не отображает изменения?

0 голосов
/ 04 мая 2018

Привет, ребята. У меня проблема с тем, как правильно отображать этот график.

этот код, когда я выбираю категорию и дату, график будет меняться в зависимости от значения каждого выбора enter image description here Фильтр выпадающих категорий и даты: 

<form class="form-inline" method='get'>
  <div class="form-group">

        <select name="category" id="category" onchange="showCategory(this.value)">
        <option value="ACCOUNT REGISTER" >ACCOUNT REGISTER</option>
        <option value="ACCOUNT UNREGISTER" >ACCOUNT UNREGISTER</option>
        <option value="CATEGORY 1">CATEGORY 1</option>
        <option value="CATEGORY 2">CATEGORY 2</option>
        <option value="CATEGORY 3">CATEGORY 3</option>
        </select>
    </div>
    <div class="form-group">
        <input class="form-control" id="monthx" type="month" name="monthx" onchange="filter_datex(this.value)">
    </div>

  <select class="form-control input-sm" id="chartType" name="Chart Type">
    <option value="line">Line</option>
    <option value="column">Column</option>
    <option value="bar">Bar</option>
    <option value="pie">Pie</option>
    <option value="doughnut">Doughnut</option>
  </select>  
    <div class="form-group">
        <a class="btn btn-primary pull-right" onclick="printDoc()"  target="_blank" >PRINT</a>
    </div>

</form>

отрендеренный график перейдет к этому коду здесь!

ДИАГРАММА: 

  <div  id="printDiv" >
    <div id="displayChart">
    <script>
    window.onload = function() {

    var chart = new CanvasJS.Chart("chartContainer", {
      animationEnabled: true,
      title: {
        text: "First Default Chart Before Onchange"
      },
      data: [{
        type: "pie",
        startAngle: 240,
        yValueFormatString: "##0.00'%'",
        indexLabel: "{label} {y}",
        dataPoints: [
          {y: 79.45, label: "Student"},
          {y: 7.31, label: "Admin"},
          {y: 7.06, label: "Teacher"}
        ]
      }]
    });
    chart.render();
    var chartType = document.getElementById('chartType');
    chartType.addEventListener( "change",  function(){
      chart.options.data[0].type = chartType.options[chartType.selectedIndex].value;
      chart.render();
    });

    }
    </script>

  </div>
</div>

Я использую предыдущий код ответа @Krishnadas PC, теперь это мой JavaScript, и сейчас заголовок меняется

JSCRIPT: 

<script type="text/javascript">
  function getDate(){
    var monthx =document.getElementById('monthx').value;

  }
  function getCategory(){
    var category =document.getElementById('category').value;

  }
  function printDoc(){
    var getCategory = getCategory();
    var getDate = getDate();
    window.location='assets/lib/FPDF/print?category='+getCategory+'&date='+getDate;

  }
  $('#monthx').hide();
  function showCategory(str) {
  var xhttp; 
  if (str == "") {
    document.getElementById("displayChart").innerHTML = "";
    return;
  }
  if (str == "ACCOUNT REGISTER" || str == "ACCOUNT UNREGISTER" || str == "default") {
    $('#monthx').hide();
  }
  else{
    $('#monthx').show();
  }
  xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {


                    var json_datax = this.responseText;
                    var monthx =document.getElementById('monthx').value;
                    var category =document.getElementById('category').value;

                    console.log(this.responseText)
                    var chart=new CanvasJS.Chart("chartContainer", {
                        animationEnabled: true, title: {
                            text: ''+category+" "+monthx+''
                        }
                        , data: [ {
                            type: "pie", startAngle: 240, yValueFormatString: "##0.00'%'", indexLabel: "{label} {y}", dataPoints: 
                            [ {
                                y: 79.45, label: 3123
                            }
                            , {
                                y: 7.31, label: "x"
                            }
                            , {
                                y: 7.06, label: "Baidu"
                            }
                            , {
                                y: 4.91, label: "Yahoo"
                            }
                            , {
                                y: 11.26, label: "Others"
                            }
                            ]
                        }
                        ]
                    }
                    );
                    chart.render();
                    var chartType=document.getElementById('chartType');

                    chartType.addEventListener( "change", function() {
                        chart.options.data[0].type=chartType.options[chartType.selectedIndex].value;
                        chart.render();
                    }
                    );
                }
            };
  xhttp.open("GET", "chart_ajax.php?category="+str+"&date="+monthx, true);
  xhttp.send();
}

  function filter_datex(str) {
  var xhttp; 
  if (str == "") {
    document.getElementById("displayChart").innerHTML = "";
    return;
  }
  xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {
                    var json_datax = this.responseText;
                    var monthx =document.getElementById('monthx').value;
                    var category =document.getElementById('category').value;
                    console.log(this.responseText)
                    var chart=new CanvasJS.Chart("chartContainer", {
                        animationEnabled: true, title: {
                            text: ''+category+" "+monthx+''
                        }
                        , data: [ {
                            type: "pie", startAngle: 240, yValueFormatString: "##0.00'%'", indexLabel: "{label} {y}", dataPoints: 
                            [ {
                                y: 79.45, label: 3123
                            }
                            , {
                                y: 7.31, label: "x"
                            }
                            , {
                                y: 7.06, label: "Baidu"
                            }
                            , {
                                y: 4.91, label: "Yahoo"
                            }
                            , {
                                y: 11.26, label: "Others"
                            }
                            ]
                        }
                        ]
                    }
                    );
                    chart.render();
                    var chartType=document.getElementById('chartType');

                    chartType.addEventListener( "change", function() {
                        chart.options.data[0].type=chartType.options[chartType.selectedIndex].value;
                        chart.render();
                    }
                    );
                }
            };
  xhttp.open("GET", "chart_ajax.php?category="+monthx+"&date="+str, true);
  xhttp.send();
  }

</script>

тогда на моей странице ajax значения категории и даты будут в POST на странице, затем GET[] переменная с использованием метода get и выполнение запроса на основе значения get, результат запроса будет извлечен как json или echo как целый код JSON,

CHART_AJAX.php 

include('db.php');
$category = $_GET['category'];
//$category_ID =  $_GET['category_ID'];
$date = $_GET['date'];
$sql = "MY QUERY $date and $category";
$result = $con->query();
$row = $result->fetch_assoc();

$data  = json_encode($row['json']);

print_r ($data);
//result or print_r ($data)
//[ {
//    y: 79.45, label: 3123
//}
//, {
//    y: 7.31, label: "x"
//}
//, {
//    y: 7.06, label: "Baidu"
//}
//, {
//    y: 4.91, label: "Yahoo"
//}
//, {
//    y: 11.26, label: "Others"
//}
//]

то, что я хочу, это результат print_r из chart_ajax.php должен быть передан в JS Var вместо var json_data = // передать результат ajax_chart.php тогда 

data: [ {
    type: "pie", startAngle: 240, yValueFormatString: "##0.00'%'", indexLabel: "{label} {y}", dataPoints: 
    //this var json_data will be go here or else 
    //the result of ajax_chart.php must be go here !!! directly? 
}
]

тогда я хочу в кнопке печати, когда я нажимаю, она должна перейти на новую вкладку, как target="_BLANK", а не расположение окон SELF? 

    function getDate(){
        var monthx =document.getElementById('monthx').value;

      }

  function getCategory(){
    var category =document.getElementById('category').value;

  }
  function printDoc(){
    var getCategory = getCategory();
    var getDate = getDate();
    window.location='assets/lib/FPDF/print?category='+getCategory+'&date='+getDate;

  }

1 Ответ

0 голосов
/ 05 мая 2018

Я не понимаю, чего вы пытаетесь достичь с помощью ajax. Существует только один заголовок, взятый из $ _ GET . Вы можете вернуть только это из файла AJAX. Оставшийся код может быть внутри секции ответа ajax. Изменения будут работать тогда. Я проверил это здесь.

В chart_ajax.php 

   <?php echo $title=$_GET['q'];

В реальном приложении вы можете получить значения для графика из базы данных или какого-либо другого стороннего API-интерфейса и вернуть только данные в виде json. Нет необходимости выводить html и циклично эти данные и строить обновленный график на стороне клиента (браузера).

В вашем главном файле обновите секцию ответа ajax следующим образом. 

xhttp.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {
                    document.getElementById("displayChart").innerHTML = this.responseText;
                    console.log(this.responseText)
                    var chart=new CanvasJS.Chart("chartContainer", {
                        animationEnabled: true, title: {
                            text: '"'+this.responseText+'"'
                        }
                        , data: [ {
                            type: "pie", startAngle: 240, yValueFormatString: "##0.00'%'", indexLabel: "{label} {y}", dataPoints: [ {
                                y: 79.45, label: 3123
                            }
                            , {
                                y: 7.31, label: "Bing"
                            }
                            , {
                                y: 7.06, label: "Baidu"
                            }
                            , {
                                y: 4.91, label: "Yahoo"
                            }
                            , {
                                y: 11.26, label: "Others"
                            }
                            ]
                        }
                        ]
                    }
                    );
                    chart.render();
                    var chartType=document.getElementById('chartType');
                    chartType.addEventListener( "change", function() {
                        chart.options.data[0].type=chartType.options[chartType.selectedIndex].value;
                        chart.render();
                    }
                    );
                }
            };

Эти изменения обновят график, но это не сделает реальное приложение.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...