morris.js shows a part of curve chart

I want to make a curve chart that displays the number of RCs demands in some dates. X-axis contains dates and Y-axis contains the values, I added also pie chart that displays percentage of accept/refused demands.

When I try the code alone it works but when I added it as a part of code in the author file: the first time it does not display anything but once I modify a height and width:

The pie chart work however it shows a part of the curve chart and with no X-axis, but when I inspect it it shows it completely!

I do not know where is the problem?!

Here is the PHP code which contains data:

<?php  
    $lig = array(
      array(
        "date" => "1/1/2010",
        "value" => "5"
        ),
      array(
        "date" => "5/2/2010",
        "value" => "6"
        ),
      array(
        "date" => "6/3/2010",
        "value" => "7"
        )
      );
    $ar = array(
      array(
        "dec" => "accepté",
        "value" => "49%"
        ),
      array(
        "dec" => "refusé",
        "value" => "51%"
        )        
      );
?>

And here a part of HTML code:

<div class="tab-pane fade" id="sec4" role="TabBord">
    <div style="width:800px;margin-top:5%;">
        <h3 class="text-primary text-center">
            Graphes de taux de demandes RCs
        </h3>
        <div class"row">
            <div class="col-sm-10 text-center">
                <label class="label label-success">Courbe des RCs</label>
                <div id="chart" style=" height:200px;width:600px"></div>
            </div>
            <div class="col-sm-2 text-center">
                <label class="label label-success">Cercle des RCs</label>
                <div id="area"  style=" height:200px;width:200px"></div>
            </div>
        </div>
    </div>
</div>

And here the script:

<script>
    $(document).ready(function () {
        new Morris.Line({
            element: 'chart',
            data: <?php echo json_encode($lig);?>,
            xkey: 'date',
            ykeys: ['value'],
            labels: ['Nembre de RCs'],
            //pointSize: 2,
            fillOpacity: 0.6,
            hideHover: 'auto',
            parseTime: false,
            behaveLikeLine: true,
            resize: true,
            pointFillColors:['#ffffff'],
            pointStrokeColors: ['black'],
            lineColors:['green']
        });

        new Morris.Donut({
            element: 'area',
            data: [
                {label: "Accepté", value: 49},
                {label: "Refusé", value: 51}
            ]
        });
    });
</script>

And here the links I added:

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>

But I got this result: why?

Solution

I changed direction to Multi-library chart package it's so rich and very useful.

That link; it shows how to install it and gives also an example how to use it:

it works for me perfectly

https://github.com/ConsoleTVs/Charts