通过ajax刷新页面

for example i have an element in html file

<div id="dateRange">1d</div>

Which control by a javascript function

    $("#30Days").click(function(){
     $(".dateRange").html("30d");
     });

    $("#12Weeks").click(function(){
     $(".dateRange").html("12w");
     });

    $("#12Months").click(function(){
     $(".dateRange").html("12m");
     });

And i got an chart built by c3.js

var chart = c3.generate({
            bindto:"#date",
        data: {
                //some config
            });

And now i want the chart reload by ajax when a user onclick <div id="dateRange">1d</div> how my i do that? Is there any example?

From a quick glance at the documentation it looks like you should be using the load method.

$.ajax({
  // the ajax request for data
  success: function(data) {
    // format the data
    chart.load(data)
  }
})

Take a look at the documentation http://c3js.org/samples/simple_multiple.html

</div>

Is ajax call necessary? You can do like these.

HTML:

<div id="dateRange" onclick="return RefreshChart(event)">1d</div>

jQuery:

function RefreshChart(elem){
   chart.load({
    url: 'PathToFetchData'
   });
}

comment it, if you have any query.