TFC TFC - 6 months ago 25
PHP Question

How can refresh only a div which contains google chart and php?

I have an admin page that contains several divs. And some divs contain google charts.
My charts are feeding from php+MySQL data.

Some divs(or chart) update 60 sec. Some divs(or chart) will be updated 1 hour.
So that different divs should update different period. (That's why I don't refresh whole page.

Anyway,When I refresh page there is no problem, but when I try to update my div, div updates, but there is nothing inside about graph.
Can you help me?

Here is my php code:

// QUERY AND PHP ARRAY FOR JSON
$query = "SELECT CONCAT(cdate,' ',chour,':00:00') AS ctime ,sum(bytesin*0.000002222) as totalKbpsin, sum(bytesout*0.000002222) as totalKbpsout FROM traffic_user_daily group by cdate,chour HAVING ctime >= now() - INTERVAL 1 DAY ";

$result = $conn->query($query);
$rows= array();
$table = array();
$table['cols'] = array(
array('label' => 'Tarih' , 'type' => 'string'),
array('label' => 'Inbound' , 'type' => 'number'),
array('label' => 'Outbound' , 'type' => 'number'),

);
foreach($result as $r) {
$temp = array();
$temp[] = array('v' => (string) substr($r['ctime'],11,5));
$temp[] = array('v' => (int) $r['totalKbpsin']);
$temp[] = array('v' => (int) $r['totalKbpsout']);
$rows[] = array('c' => $temp);
}
$table['rows'] = $rows;
$jsonTable = json_encode($table);
?>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript">
// CHART JAVA CODE
google.charts.load('visualization','current', {'packages':['corechart','bar'], 'language': 'en'});

// Draw the line chart is loaded.
google.setOnLoadCallback(drawBigChart);


// Callback that draws the line chart

function drawBigChart() {
var data = new google.visualization.DataTable(<?=$jsonTable?>);

var options = {

chartArea: {
'height': '80%',
left: "5%"
},

legend: {
position: 'right',
textStyle: {
color: '#bdbdbd',
fontSize: 12
}
},

hAxis: {
showTextEvery:2,
textStyle: {color: '#bdbdbd',
fontSize: 12,
},
baselineColor: '#bdbdbd',
gridlines: {color:'bdbdbd'},
},


vAxis: {
baselineColor: '#bdbdbd',
textStyle: {color:'#bdbdbd'},
gridlines: {color:'#bdbdbd' },
minValue: 0,
},

intervals: { 'style':'area' },
curveType: 'function',
crosshair: {orientation: 'vertical'},

animation: {
startup: true,
duration: 1000
},
};

var chart = new google.visualization.LineChart(document.getElementById('chart_div'));

chart.draw(data, options);

}

</script>
<!-- OUTER DIV -->
<div class="col s12 m12">
<!-- CHART DIV -->
<div id="dash_big_chart" class="card">
<div class="card-content">
<div>
<span class="card-title grey-text lighten-1">
<?php echo $_SESSION['companyname'] ?></span></div>
<div id="chart_div">
</div></div></div></div>
<script type="text/javascript">

/// refresh script ////

setInterval(function(){
$("#dash_big_chart").load('big_chart.php')
},60000);
});

</script>


And then I have another php page named big_chart.php. That contains Query and array for JSON part , Graph java except google.charts.load and CHAR DIV.

Can you hep me?

TFC TFC
Answer

I think I solve it:

google.charts.load('visualization','current', {'packages':['corechart','bar'], 'language': 'en'});
google.setOnLoadCallback(drawBigChart);
function drawBigChart() {
        var jsonData = $.ajax({
            url: "get_new_data.php",
            dataType: "json",
            async: false
            }).responseText;

        var data = new google.visualization.DataTable(jsonData);
        var options = {something  for visualisation}
        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));

        chart.draw(data, options);
        }

AND

    $(document).ready(function(){
            $("#dash_kullanicisayisi").load('kullanicisayisi.php')
            $.ajax({
                'url': 'get_new_data.php', // url should return only JSON data
                'dataType': 'json',
                'async': true
            }).success(function(result) {
                //Draw the chart again with the updated data
                drawBigChart(result);
            });
        },60000);
    });

solves my problem. Now chart refresh and populate new datas. Thank for your assistances.