Dynamically create a multidimensional javascript object

Please I have been struggling to create a javascript multidimensional object dynamically from several sources including a PHP array of 3 months and other variables as follows:

I have written the read some tutorials and written the following code and still getting errors:

 <script type='text/javascript'>
 var chart_data={};
 </script>



 @foreach($chart_data as $mth => $data)
        <script type="text/javascript">
            chart_data={'months':{"":"data":{!!json_encode($data['data'])!!}}};
            chart_data={'months':{"":'ykeys':{!!json_encode($data['ykeys'])!!}}};
            chart_data={'months':{"":'labels':{!!json_encode($data['labels'])!!}}};
            var chart_bar_colors={!!json_encode($chart_bar_colors)!!};
        </script>
        @endforeach

I keep getting the following error in the console:

Uncaught SyntaxError: Unexpected token :

I also see the following error on examining the source from developer tools:

Please I would appreciate any guide to resolve this Thank you all

via Chebli Mohamed