Morris.js with codeigniter not displaying data

Question

Trying to get morris.js to work with codeigniter but for some reason not displaying on chart I generate the data on my controller function balance()

My json out put is encoded ["[{y: '2018-03-08' , a: 82.36}],"]

Question How to make sure the chart data is displayed correct

public function balance() {
    $json = array();

    $results = $this->getPlaceWins();

    foreach ($results as $value) {
        $json[] = "[{y: " . "'" . $value['date'] . "'" . " , a: " . $this->getSumTotalPlace($value['date']) . "}],";
    }

    echo json_encode($json);
}

public function getPlaceWins() {
    $this->db->select('*');
    $this->db->from('betting');
    $this->db->group_by('date');
    $this->db->where('uid', $this->session->userdata('uid'));
    $balance_query = $this->db->get();

    return $balance_query->result_array();
}

public function getSumTotalPlace($date) {
    $this->db->select_sum('place');
    $this->db->from('betting');
    $this->db->where('uid', $this->session->userdata('uid'));
    $this->db->where('date', $date);
    $balance_query = $this->db->get();

    return $balance_query->row('place');
}

View

<div class="container">
    <div class="row">
        <div class="col-xl-7 col-lg-7 col-md-7 col-sm-12 col-xs-12 mb-3 mt-3">
            <div id="bar-chart"></div>
        </div>
    </div>
</div>

<script type="text/javascript">

$.ajax({
    type: 'get',
    url: "<?php echo base_url('welcome/balance');?>",
    dataType: 'json',
    success: function(json) {

        alert(json);

        Morris.Bar({
            element: 'bar-chart',
            data: json,
            xkey: 'y',
            ykeys: ['a'],
            labels: ['Place Wins'],
            gridTextSize: 12,
            resize: true,
            barColors: ["#0b62a4"],
        });
    },
});
</script>   

UPDATE

I have also tried this way but still nothing showing on chart. I am getting the data fine

<script type="text/javascript">
$( document ).ready(function() {

    $(function() {

        var jsonData = $.getJSON("<?php echo base_url('welcome/balance');?>", function (jsonData) {
            console.log(jsonData); 

            Morris.Bar({
                element: 'bar-chart',
                data: jsonData,
                xkey: 'Y',
                ykeys: ['a'],
                labels: ['Wins'],
                hideHover: 'auto',
                resize: true
            });

        });
    });
});

Answer 1

I got it working I have changed a couple of things in the controller and view

First in view I use like

$( document ).ready(function() {

    $(function() {

        var jsonData = $.getJSON("<?php echo base_url('welcome/balance');?>", function (jsonData) {
            console.log(jsonData); 

            Morris.Bar({
                element: 'bar-chart',
                data: jsonData,
                xkey: 'y',
                ykeys: ['a'],
                labels: ['Wins'],
                hideHover: 'auto',
                resize: true
            });

        });
    });
});

Then on the controller I use array(content) etc now

public function balance() {
    $json = array();

    $results = $this->getPlaceWins();

    foreach ($results as $value) {
        $json[] = array('y' => date('Y-m-d', strtotime($value['date'])), 'a' => $this->getSumTotalPlace($value['date']));

        //$json[] = "y: " . "'" . date('Y-m-d', strtotime($value['date'])) . "'" . " , a: " . $this->getSumTotalPlace($value['date']);
    }

    echo json_encode($json);
}

Works fine now