تحديث جوجل الرسم البياني بشكل حيوي مع PHP و جافا سكريبت

Question

لدي جوجل الرسم البياني (باستخدام التصور جوجل API, لا الرسوم البيانية جوجل API) بملء على تحميل الصفحة.وبعد ذلك يمكن للمستخدم تحديد خيارات متعددة من القائمة المنسدلة هو.أود المستخدم أن يكون قادرا على تحديث المخطط جوجل استنادا إلى التحديدات.

لقد قمت بالفعل بإنشاء رمز PHP للاستيلاء على بيانات جديدة عن طريق MySQL - بعد أن يقوم المستخدم بتحديد الخيارات المختلفة.

السؤال:يجب أن تحتاج إلى استبدال الحالي البيانية ؟ أو علي إنشاء وظيفة جافا سكريبت تحديث الرسم البياني?

هنا هو بلدي جوجل الرسم البياني شفرة جافا سكريبت:

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

function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Cluster');
  data.addColumn('number', 'Loans');
  data.addColumn('number', 'Lines');

/* create for loops to add as many columns as necessary */

var len = (encoded_cluster_name.length)-27; // encoded_line_volume.length;

  data.addRows(len);

for(i=0; i<len; i++) {

        var lines = (encoded_line_volume[i])/100000;
    var loans = (encoded_loan_volume[i])/100000;

data.setValue(i, 0, ' '+encoded_cluster_name[i]+' ');       /* x-axis */
data.setValue(i, 1, loans);             /* Y-axis category #1*/
data.setValue(i, 2, lines);             /* Y-axis category #2*/
}

/*********************************end of loops*****/

  var chart = new google.visualization.ColumnChart(
                document.getElementById('chart_div'));
  chart.draw(data, {
                    width: 600,
                    height: 300,
                    is3D: true,
                    title: 'Prospect Population',
                    legend: 'right'
                   });
}

Answer 1

وأود أن مجرد تحديث البيانات بدلا من استبدال الرسم البياني.و طلب الرسم على رسم.

يمكنك تعديل ملعب سبيل المثال لاختبار هذا.
يبدو مثل هذا:

function drawVisualization() {
  // Create and populate the data table.
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Name');
  data.addColumn('number', 'Height');
  data.addRows(3);
  data.setCell(0, 0, 'Tong Ning mu');
  data.setCell(1, 0, 'Huang Ang fa');
  data.setCell(2, 0, 'Teng nu');
  data.setCell(0, 1, 174);
  data.setCell(1, 1, 523);
  data.setCell(2, 1, 86);

  // Create and draw the visualization.
  var v=new google.visualization.ColumnChart(
          document.getElementById('visualization')
        );
  v.draw(data, null);
  // Pretend update data triggered and processed
  data.setCell(2, 1, 860);
  v.draw(data, null);
}
​