How do i put dynamic values inside Highchart.js data?

Question

I am using codeigniter, I use below code to query dynamic values based on the selection in the dropdown box.

$("#month").change(function(){
    $.ajax({
        type : 'post',
        data : 'month='+ $(this).val() + '&year='+$('#year').val(),
        url : '<?php echo base_url()."index.php/suggestion/processReportBreakdown";?>',
        success : function(data){
            $('#section').html(data); //<---- i need to print html data
        }
    });
});

$("#year").change(function(){
    $.ajax({
        type : 'post',
        data : 'month='+ $(this).val() + '&year='+$('#year').val(),
        url : '<?php echo base_url()."index.php/suggestion/processReportBreakdown";?>',
        success : function(data){
            $('#section').html(data);
        }
    });
});

the processReportBreakdown() goes like this:

public function processReportBreakdown()
{
    $month              = $this->input->post('month');
    $year               = $this->input->post('year');
    $data['query']  =   $this->suggestion->breakDownReport($month, $year);

    $data['totalBreakdown'] = $this->suggestion->getAllRowsBreakDownReport($month, $year);
    $total = $data['totalBreakdown']-1;

    $i = 0;

    foreach($data['query'] as $row)
    {

        if($i != $total)
        {
            echo "'".$row->countReport."',";
        }
        else
        {
            echo "'".$row->countReport."'";
        }

        $i++;

    }

}

Now I want to get the response of ajax POST and print it inside highchart data... so that everytime that the dropdown changes, the chart also changes in accordance with the values being passed by ajax POST. What could be the proper way of doing this?

Answer 1

There are lots of example available on the highcharts.com

just look at this link Live Server

It will be use full for you else for java script you can consider this answer as well Live Multiple Series

Answer 2

This is an example straight from creating highchart with ajax json data I see you can't figure out how to use highchart with ajax

function visitorData (data) {
   $('#chart1').highcharts({
    chart: {
        type: 'column'
    },
    title: {
        text: 'Average Visitors'
    },
    xAxis: {
        categories: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']
    },
    yAxis: {
        title: {
            text: 'Number of visitors'
        }
    },
    series: data,
  });
}
$(document).ready(function() {
 $.ajax({
    url: '/visitdata',
    type: 'GET',
    async: true,
    dataType: "json",
    success: function (data) {
        visitorData(data);
    }
  });
 });

Sample php codeigniter code to return json output more at http://ellislab.com/codeigniter%20/user-guide/libraries/output.html

$this->output
    ->set_content_type('application/json')
    ->set_output(json_encode(array('foo' => 'bar')));

I don't know what is the purpose of this code

foreach($data['query'] as $row)
{

    if($i != $total)
    {
        echo "'".$row->countReport."',";
    }
    else
    {
        echo "'".$row->countReport."'";
    }

    $i++;

}

you are echoing here the output is html so collect all the data and output it as json