选择按钮更新C3js图形而不刷新页面

时间:2016-02-04 18:37:53

标签: javascript php jquery ajax

我有多个选择选项,一旦选择了所有选项,我希望我的C3js图表更新。这是我的jQuery:

$(document).ready(function () {
    $('#op,#op2').on('change', function () {
        if ($('#op').val() && $('#op2').val()) {   
            alert("its working?");
            var url = "/php/test.php"; 
            $.ajax({
                   type: "POST",
                   url: url,
                   data: $("#form").serialize(), 
                   success: function(data)
                   {
                       alert(data); 
                   }
                 });
            e.preventDefault(); 
        }
    });
});

我也知道c3js参考站点上有多个加载/卸载数据的例子。我的test.php文件获取了我想要放在图表上的所有新值。我只是不知道如何在这些价值观和我的图表之间架起一座桥梁。

另外,我不确定每次选择新选项时是否应该重新制作新图表,或者我是否应该尝试加载/卸载c3js方法。我不知道如何将我的php文件值连接到

<div id="chart"></div>             
<script>
    var Completed = <?php echo json_encode($var1) ?>;
    var Missed = <?php echo json_encode($var2) ?>;
    var json_data_a = {"x_label":IDs,"Completed":Completed,"Missed":Missed};

   var chart = c3.generate({
        bindto: "#chart",
        data: {
            x: 'x_label',
            json: json_data_a
        },
        axis: {
          x: {
            type: 'category',

            label: {
              text: 'ID',
              position: 'outer-center'
            }
          }
        }
    });
</script>

我的test.php文件获取了新的var1和var2值,但我不知道如何在它们和图形之间建立连接而无需刷新页面。是否可以使用AJAX加载/卸载?我觉得我无法连接这两者。

出于测试目的,我尝试添加:

success: function(data)
  {
       alert(data); // show response from the php script.
       chart.load({
          columns: [
              ['data1', 300, 100, 250, 150, 300, 150, 500],
              ['data2', 100, 200, 150, 50, 100, 250]
            ]
        });

}

到我的成功功能,并得到了加载的东西。我想要坚持图表的所有php变量都在php中。如何将它们传递给JS以便我可以将它们加载到我的图形中?当我尝试这个时:

var Completed = <?php echo json_encode($completed) ?>;

进入我的成功函数,我最终得到了这个错误:

Expected an identifier and instead saw '<'. var Completed = <?php echo json_encode($completed) ?>;

我想做类似的事情:

<?php
    ....
    json_encode($VarA);
?>

然后,我想将它放入JS var ...

var A = <?php echo json_encode($VarA)?>;
....

然后我可以把它粘在一个物体上......

var json_obj = {"x_axis": VarA, "Some Data": VarB, ....}

我只是不知道如何从我的url文件中获取php代码,以便我可以将其保存为js变量并继续前进..

0 个答案:

没有答案