JSFiddle - React, Tailwind, and code Playground
JavaScript
// MAIN GRAPH PART
function graph(chartContainer, dataPoints1, dataPoints2)
{
var chart = new CanvasJS.Chart(chartContainer,
{
title:{
text: "PERFORMANCES CUMULÉES - NET B EN EUR *",
verticalAlign: "top",
horizontalAlign: "left",
fontColor: "#2f4f4f",
fontSize: 30,
padding: 10,
margin: 15,
backgroundColor: "#FFFFE0",
borderThickness: 1,
cornerRadius: 5,
fontWeight: "bold"
},
legend:{
fontSize: 12,
verticalAlign: "top",
horizontalAlign: "center"
},
axisX:{
lineThickness: 0,
tickThickness: 0,
valueFormatString: "MM/YY",
minimum: new Date(2006, 00, 05)
},
axisY: {
tickThickness: 0,
stripLines:[
{
startValue:150,
endValue:151,
color:"black"
}
],
labelFormatter: function(e) {
return(e.value / 100 + "%");
}
labelFontSize: 14,
interval: 150,
gridThickness: 0
},
data: [
{
type: "spline",
color: "rgb(85, 118, 180)",
showInLegend: true,
markerSize: 0,
legendMarkerType: "spline",
legendText: "FONDS",
lineThickness: 2,
dataPoints: dataPoints1,
},
{
type: "spline",
color: "rgb(185, 11, 18)",
showInLegend: true,
markerSize: 0,
legendMarkerType: "spline",
legendText: "BENCHMARK",
lineThickness: 2,
dataPoints: dataPoints2,
}],
});
chart.render();
}
// DATA POINTS IN THE PHP PAGE
<script src='JS/graph1.js'></script>
<script>
var dataPoints1 = [
<?php
$id = 9;
$values = graphQuery($id, $conn);
graphDisplay($values);
?>
];
var dataPoints2 = [
<?php
$id =...