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?
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