How to show php dynamic array data in c3js chart?

Question

I have multidimensional array($array) like this,

{
"2015-11-17": {
                "department1":"0.5700",
                "department3":"0.0000"
              },
"2015-11-18": { 
                "department1":"0.5700"
              },
"2015-11-20": {
                "department1":"0.0000"
              },
"2015-11-23": {
                "department1":"1.7100",
                "department2":"1.7100",
                "department3":"2.8500",
              }
  .
  .
  .
}

This is a dynamic array and that data are get from database. All data are exists in $array variable. The above data are more than that. I just show a little, because the data are get from database.

I want to show that data on c3js chart like this format,

json:[{
            "date": "2015-11-17",
            "department1": ""0.5700"",
            "department2": "0.0000",
            "department3": "0.0000",
            "department4": "0.0000",
        }],

And I need to show four department data for each date.

In the array, you can see some day have one or two department. I want to add all four department for each day when I change above json format to show in chart.

For example, in 2015-11-17, it has department1 and 3. I want to add next department2 and 4 with '0' in this day.

I want to add another department for each day just like that.

When I try to change $array to above format, I don't get the correct result. Here is what I try,

<div id='chart'></div>
    <script>
            var chart = c3.generate({
                bindto: '#chart',
                data: {
                    x: 'date',
                    xFormat: '%Y-%m-%d',
                    json:[
                    <?php 
                        for ($i = 0; $i <  count($array); $i++) {
                            $key=key($array);
                            $val=$array[$key];
                            if ($val<> ' ') {
                                foreach ($val as $k=>$v) {
                    ?>                  
                    {   
                        'date':<?php echo $key?>,
                        <?php echo $k?> : <?php echo $v?>,
                    },                  

                    <?php
                                   }
                               }
                             next($array);
                        }
                    ?>],

                },
                legend: {
                    position: 'right',
                },
                line: {
                    width:0.5
                },
                axis: {
                    x: {
                        type: 'timeseries',
                        tick:{
                            format: '%Y-%m-%d',
                            rotate: 75,
                        },
                        label: {
                            text: 'Date',
                            position: 'outer-center'
                        }
                    }
                },          
                grid: {
                    y: {
                        show:true,
                    }
                },
            });
    </script>

So, now I have problem to show array data in chart. I'm very appreciate for any answer and suggestion.

Here is the sample of dynamic chart image of what I want,

Answer 1

Well if you get the array and is stored in a variable, then you can use this pure JS function to convert it to the format you need:

var convertArr = function(x){
  var y = [];
  for (var k1 in x) {
    if (x.hasOwnProperty(k1)) {
      var obj = {};
      obj['date'] = k1;
      var tmp = [];
      for (var k2 in x[k1]){
        if (x[k1].hasOwnProperty(k2)){
          tmp.push(k2[k2.length-1]);
          obj[k2] = x[k1][k2];
        }
      }
      var no = ["1","2","3","4"];
      var tmpSet = new Set(tmp);
      var noSet = new Set(no);
      var diff = no.filter(function(z) { return !tmpSet.has(z); })
                   .concat(tmp.filter(function(z){ return !noSet.has(z); }));
      for (var i = 0; i < diff.length; i++){
        obj['department'+diff[i]] = '0.0000';
      }
      y.push(obj);
    }
  }
  return y;
}

From there you can proceed.

Hope it helps.

Answer 2

Kindly check the below code. Points to note: - $deptNames = array of department names as shown in example output. - $dataArray = is the array which comes from database directly - instead of echoing output you can save it to any variable and access accordingly.

$deptNames = array('department1','department2','department3','department4');
$resultArray = array();
$index = 0;
foreach($dataArray as $date => $data) {
    $resultArray[$index] = array();
    if(is_array($data)) {
        $dataDeptNames = array_keys($data);
        $diff = array_diff($deptNames,$dataDeptNames);
        if($diff && count($diff) > 0) {
            foreach($diff as $notExistDept) {
                $data[$notExistDept] = "0.0000";
            }
        }
        $resultArray[$index] = $data;
        $resultArray[$index]['date'] = $date;
        ksort($resultArray[$index]);
    }
    $index++;
}
echo json_encode($resultArray);

It will give you output as:

[  
   {  
      "date":"2015-11-17",
      "department1":"0.5700",
      "department2":"0.0000",
      "department3":"0.0000",
      "department4":"0.0000"
   },
   {  
      "date":"2015-11-18",
      "department1":"0.5700",
      "department2":"0.0000",
      "department3":"0.0000",
      "department4":"0.0000"
   },
   {  
      "date":"2015-11-20",
      "department1":"0.0000",
      "department2":"0.0000",
      "department3":"0.0000",
      "department4":"0.0000"
   },
   {  
      "date":"2015-11-23",
      "department1":"1.7100",
      "department2":"1.7100",
      "department3":"2.8500",
      "department4":"0.0000"
   }
]