Question posted in
You can find the official documentation here.

Morris Chart refresh issue with php data – Jquery ajax

I’m struggling with Morris charts for some time now, I would like to update my Morris chart onclick button event with php data.
I start by loading data like below, I include first my php page, but nothing happen when I try to load new data on click 🙁

<?php include ('loadchart.php');?>
var graph =  new Morris.Area({
  element: 'morris_area',
                  xkey: 'x',
                ykeys: ['y', 'z'],
                 lineColors: ['#5969ff', '#ff407b'],
                   resize: true,
                   gridTextSize: '14px'
});
graph.setData([<?php echo $data; ?>]);
graph.redraw();

Until then all is well 😀 but when I try to load the below php data nothing happen :

"{x:’2018-03-20′,y:1,z:7}, {x:’2018-03-22′,y:31,z:5}, {x:’2018-03-25′,y:7,z:21}"

generated like below

<?php
$uname = $_POST["type1"];

if ($uname=='search1')
{   
$var1= '2018-03-20';
$var2= 1;
$var3= 7;
$chart_data1 = '';
$chart_data1 .= "{x:'".$var1."',y:".$var2.",z:".$var3."}, ";
$var11= '2018-03-22';
$var22= 31;
$var33= 5;
$chart_data1 .= "{x:'".$var11."',y:".$var22.",z:".$var33."}, ";
$var111= '2018-03-25';
$var222= 7;
$var333= 21;
$chart_data1 .= "{x:'".$var111."',y:".$var222.",z:".$var333."}, ";
$chart_data1 = substr($chart_data1, 0, -2); 
echo json_encode($chart_data1);
}
?>

my AJAX code :

function Onclickbutton()
{
$.ajax({
    type: "POST",
    url: 'admin/Mynewdata.php',
    data: {type1: 'search1'},
    success: function(data){
 alert(data);
 graph.setData(data);
graph.redraw();
        }
});

}

Any help would be appreciative 🙂

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I found a workaround :D, I create an new array in my js code , thank you for you help

    function LoadResultMorris()
{
$.ajax({
    type: "POST",
    url: 'admin/data.php',
    data: {type1: 'search1'},
    success: function(data){
var array1 = [];
var i=0;
$.each(JSON.parse(data), function(key,obj) {
    array1[i] = {};
    array1[i]['x']=obj.x;
     array1[i]['y']=obj.y;
     array1[i]['z']=obj.z; 
     i++;
});
graph.setData(JSON.stringify(array1));
graph.redraw();
        }
});

}


  2. 0

    I think the crux of your issue is that the JSON you are manually creating is not valid.

    Try creating an array of your values before passing that array to json_encode:

    $arr= array();
$arr[] = array('x'=>'2018-03-20', 'y'=>1, 'z'=>7);
$arr[] = array('x'=>'2018-03-22', 'y'=>31, 'z'=>5);
$arr[] = array('x'=>'2018-03-25', 'y'=>7, 'z'=>21);

echo json_encode($arr);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search