how can plot graph using json data

Question

in my json i have three column data for ploting a graph. Actually data is there on json . but i couldn't plot the graph. std_name, student_count, ab_count are three columns to be ploted. Now i want to plot it on a graph. i tried it but i couldn't make it. can u pls help me?

 function yes_chart()
{              

    $.ajax({
        url:"<? echo base_url();?>Attendance/pre_chart", 
        dataType: 'json',      
        success:function(data) {

           // alert(data.chart_name);   will give 'X1','X2','X3',..'
            var Day = {
                labels : [data.chart_name],
                datasets : [
                {
                    fillColor : "rgba(172,194,132,0.4)",
                    strokeColor : "#ACC26D",
                    pointColor : "#fff",
                    pointStrokeColor : "#9DB86D",
                    data : [data.chart_abcount]
                },
                {
                    fillColor : "rgba(151,187,205,0.5)",
                    strokeColor : "rgba(151,187,205,0.8)",
                    highlightFill : "rgba(151,187,205,0.75)",
                    highlightStroke : "rgba(151,187,205,1)",
                    data : [data.chart_count]
                }
                ]
            }                             
            var buyers = document.getElementById('lineChart').getContext('2d');
            new Chart(buyers).Bar(Day, {responsive : true});   

        }      
    });


}

 <div class="chart tab-pane active" id="barChartDiv"> 
                                            <canvas id="lineChart" height="200"></canvas>
                                        </div>

controller

 function pre_chart()
  {
    $chart_prev= $this->AM->chart_Disp_prev(); 
    $name='';
    $count=''; 
    $ab_count=''; 
    foreach ($chart_prev as $row)  
    { 
        $name=$name."'".$row['std_name']."'," ;
        $count=$count."'".$row['student_count']."'," ;
        $ab_count=$ab_count."'".$row['student_count']."'," ;

    }
    $name = substr($name,0,strlen($name)-1);
    $count = substr($count,0,strlen($count)-1);
    $ab_count = substr($ab_count,0,strlen($ab_count)-1);
    $out = array(
    'chart_name'=>$name,
    'chart_count'=>$count,
    'chart_abcount'=>$ab_count
    );  
    echo json_encode($out); 

 }

Answer 1

Assuming your JSON is in the following format

{
    chart_data: [
        {
            std_name: ...,
            student_count: ...,
            ab_count: ...
        },
        {
            std_name: ...,
            student_count: ...,
            ab_count: ...
        }
    ] 
}

you need to construct your chart data object like so

var labelX = [];
var bar1 = [];
var bar2 = [];           
$.ajax({
    url:"<? echo base_url();?>Attendance/pre_chart", 
    dataType: 'json',      
    success:function(data) {

        for (var i = 0; i < data.chart_data.length; i++) {
            labelX.push(data.chart_data[i]["std_name"]);
            bar2.push(data.chart_data[i]["student_count"]);
            bar1.push(data.chart_data[i]["ab_count"]);  
        }

    } 
});

and finally (notice that I removed the parentheses around the objects we just constructed)

var Day = {
    labels: labelX,
    datasets: [
        {
            fillColor: "rgba(172,194,132,0.4)",
            strokeColor: "#ACC26D",
            pointColor: "#fff",
            pointStrokeColor: "#9DB86D",
            data: bar1
        },
        {
            fillColor: "rgba(151,187,205,0.5)",
            strokeColor: "rgba(151,187,205,0.8)",
            highlightFill: "rgba(151,187,205,0.75)",
            highlightStroke: "rgba(151,187,205,1)",
            data: bar2
        }
    ]
}