CODEWITHSUNDEEP
javascriptphpajaxcanvas
スペースタイム
スペースタイム

Reputation: 159

Ajax canvas chart doesn't display changest?

Hi guys i have a problem on how should i properly display this chart dynamic.

this code is when i selecting category and date , the chart will change according to value of each select then enter image description here Dropdown Category and Date Filter:

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

rendered chart will go to this code here !

CHART:

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

i use the previous answer code of @Krishnadas PC then this is now my JavaScript and right now the title is changing

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>

then in my ajax page, the category and date values will be on POST on the page then GET[] the variable using get method and perform query base on get value, the result of query will be fetch as json or echo as a whole json code,

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"
//}
//]

what i want is the result of print_r from chart_ajax.php must be pass on js var instead of var json_data = //pass the ajax_chart.php result then 

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? 
}
]

then i want in print button is , when i click that it must go to new tab like target="_BLANK" not SELF windows location ?

    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;

  }

Upvotes: 0

Views: 312

Answers (1)

Krishnadas PC
Krishnadas PC

Reputation: 6539

I don't understand what you are trying to achieve by using the ajax. There is only one title that is taken from $_GET. You can return only that from the ajax file. The remaining code can be inside ajax response section. The changes will work then. I have tested it here.

In chart_ajax.php

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

In a real application you can fetch the values for the graph from a database or some other third party apis and return only the data as json. No need to render html and loop those data and build the updated graph at the client(browser) side.

In your main file update the ajax response section like this.

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();
                    }
                    );
                }
            };

These changes will update the graph but this won't make a real application.

Upvotes: 1

Related Questions