填充morris.js與PHP

Question

多維數組圖表我使用笨，我需要填充圖形與PHP多維數組。

我用兩個函數來獲取數據。這些是返回陣列，其中 「get_num_instalaciones_mes」和「get_num_bajas」返回一個數（INT）

function ajax_instalaciones_3meses() { 
    $fecha['mes'] = date('m'); 
    $fecha['anio'] = date('Y'); 
    $output['num_instalaciones_actual'] = get_num_instalaciones_mes($fecha['mes'], $fecha['anio']); 
    $fecha = $this->v3_operaciones_model->mes_anterior($mes, $anio); 
    $output['num_instalaciones_1menos'] = get_num_instalaciones_mes($fecha['mes'], $fecha['anio']); 
    $fecha = $this->v3_operaciones_model->mes_anterior($mes, $anio); 
    $output['num_instalaciones_2menos'] = get_num_instalaciones_mes($fecha['mes'], $fecha['anio']); 
    echo json_encode($output); 
} 

function ajax_bajas_3meses() { 
    $fecha['mes'] = date('m'); 
    $fecha['anio'] = date('Y'); 
    $output['num_bajas_actual'] = get_num_bajas_mes($fecha['mes'], $fecha['anio']); 
    $fecha = $this->v3_operaciones_model->mes_anterior($mes, $anio); 
    $output['num_bajas_1menos'] = get_num_bajas_mes($fecha['mes'], $fecha['anio']); 
    $fecha = $this->v3_operaciones_model->mes_anterior($mes, $anio); 
    $output['num_bajas_2menos'] = get_num_bajas_mes($fecha['mes'], $fecha['anio']); 
    echo json_encode($output); 
} 

的功能，這是用於填充圖中的視圖，其中「數據」是代碼陣列我有兩種功能來填充（Y：INSTALACIONES，Z：BAJAS）

new Morris.Bar({ 
     element: 'graf_instalaciones_bajas', 
     data: [ 
      {x: 'AGO-2013', y: 20, z: 5}, 
      {x: 'SEP-2013', y: 40, z: 5}, 
      {x: 'OCT-2013', y: 33, z: 10}, 
      {x: 'NOV-2013', y: 24, z: 1}, 
      {x: 'DIC-2013', y: 44, z: 10}, 
      {x: 'ENE-2014', y: 31, z: 5} 
     ], 
     barColors: ['#00FF00', '#FF0000'], 
     xkey: 'x', 
     ykeys: ['y', 'z'], 
     labels: ['Instalaciones', 'Bajas'] 
    }).on('click', function(i, row){ 
    console.log(i, row); 
    }); 

Answer 1

我使用JSON來獲得從PHP輸出數據（一些其他頁），然後用JSON對象填充在莫里斯數據。

粗糙例如：

var array = []; 

function myData() { 
    $.getJSON('data_source_link', function(data) { 
     array = data; 
     console.log(JSON.stringify(array)); // to ensure the data is actually captured 
    } 
    return array; 
} 

var myChart = Morris.Line({ 
    element: 'graph', 
    xkey: 'your_x_key', 
    ykeys: 'your_y_keys', 
    labels: ['Your Labels'], 
    ... 
}); 

setInterval(function() { 
    myChart.setData(myData()); 
}, 1000); 

希望這有助於。 :)