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); 

 }

potatopeelings · Accepted Answer · 2015-12-31 02:51:04Z

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
        }
    ]
}

answered Dec 31, 2015 at 2:51

potatopeelings

41.2k8 gold badges97 silver badges121 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

user5466590 Over a year ago

i tried ur code but no response. i have edited my code entirely can u pls check

potatopeelings Over a year ago

is your data in the format that is shown above in my answer?

user5466590 Over a year ago

i have added my controller. On that controller im trying to add commas into the chart label and data

potatopeelings Over a year ago

Adding commas and quotes will not convert a string to an array. You will need to "parse" a string or construct the object. I see from your controller and code that you haven't yet made the changes. Is that the NEW code or the original code? (assuming data.chart_name is an array, you need to do labels : data.chart_name and not labels : [ data.chart_name ]. if data.chart_name is not an array, you need to construct an array. Similarly for the 2 data arrays)

user5466590 Over a year ago

i got the chart. but bars and labels are appeared vigorously

|

Collectives™ on Stack Overflow

how can plot graph using json data

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related