Menu
Dear All
I try to insert 2 chart on my website but it always show only one. I don’t sure why it show like that
“`
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″ />
<title></title>
<script data-require=”jquery” data-semver=”2.1.4″ src=”https://code.jquery.com/jquery-2.1.4.js”></script>
<script src=”./chart2.0.js”></script>
<style>
.container {
width: 50%;
overflow: hidden;
padding: 10px;
}
</style>
</head>
<body>
<div class=”container”>
<canvas id=”chart_Number_IN_QF” width=”500″ height=”500″></canvas>
<br>
<br>
<canvas id=”chart_Number_IN_QF2″ width=”500″ height=”500″></canvas>
</div>
<script>
var barChartData = {
labels: [“2020/05”, “2020/06”, “2020/07”, “2020/08”, “2020/09”, “2020/10”],
datasets: [{
label: “Summary 1”,
type: ‘line’,
data: [3102, 8693, 16116, 22630, 27893, 34403],
fill: false,
borderColor: ‘#EC932F’,
backgroundColor: ‘#EC932F’,
pointBorderColor: ‘#EC932F’,
pointBackgroundColor: ‘#EC932F’,
pointHoverBackgroundColor: ‘#EC932F’,
pointHoverBorderColor: ‘#EC932F’,
yAxisID: ‘y-axis-2’
}, {
type: ‘bar’,
label: “People in QF”,
data: [3102, 5591, 7423, 6514, 5263, 6510],
fill: false,
backgroundColor: ‘#71B37C’,
borderColor: ‘#71B37C’,
hoverBackgroundColor: ‘#71B37C’,
hoverBorderColor: ‘#71B37C’,
yAxisID: ‘y-axis-1’
}]
};
window.onload = function () {
var ctx = document.getElementById(“chart_Number_IN_QF”).getContext(“2d”);
window.myBar = new Chart(ctx, {
type: ‘bar’,
data: barChartData,
options: {
responsive: true,
tooltips: {
mode: ‘label’
},
elements: {
line: {
fill: false
}
},
scales: {
xAxes: [{
display: true,
gridLines: {
display: false
},
labels: {
show: true,
}
}],
yAxes: [{
type: “linear”,
display: true,
position: “left”,
id: “y-axis-1”,
gridLines: {
display: false
},
labels: {
show: true,
}
}, {
type: “linear”,
display: true,
position: “right”,
id: “y-axis-2”,
gridLines: {
display: true
},
labels: {
show: true,
}
}]
}
}
});
};
var barChartData2 = {
labels: [“2020/05”, “2020/06”, “2020/07”, “2020/08”, “2020/09”, “2020/10”],
datasets: [{
label: “Summary2”,
type: ‘line’,
data: [3102, 8693, 16116, 22630, 27893, 34403],
fill: false,
borderColor: ‘#EC932F’,
backgroundColor: ‘#EC932F’,
pointBorderColor: ‘#EC932F’,
pointBackgroundColor: ‘#EC932F’,
pointHoverBackgroundColor: ‘#EC932F’,
pointHoverBorderColor: ‘#EC932F’,
yAxisID: ‘y-axis-2’
}, {
type: ‘bar’,
label: “People in QF”,
data: [3102, 5591, 7423, 6514, 5263, 6510],
fill: false,
backgroundColor: ‘#71B37C’,
borderColor: ‘#71B37C’,
hoverBackgroundColor: ‘#71B37C’,
hoverBorderColor: ‘#71B37C’,
yAxisID: ‘y-axis-1’
}]
};
window.onload = function () {
var ctx2 = document.getElementById(“chart_Number_IN_QF2”).getContext(“2d”);
window.myBar = new Chart(ctx2, {
type: ‘bar’,
data: barChartData2,
options: {
responsive: true,
tooltips: {
mode: ‘label’
},
elements: {
line: {
fill: false
}
},
scales: {
xAxes: [{
display: true,
gridLines: {
display: false
},
labels: {
show: true,
}
}],
yAxes: [{
type: “linear”,
display: true,
position: “left”,
id: “y-axis-1”,
gridLines: {
display: false
},
labels: {
show: true,
}
}, {
type: “linear”,
display: true,
position: “right”,
id: “y-axis-2”,
gridLines: {
display: true
},
labels: {
show: true,
}
}]
}
}
});
};
</script>
</body>
</html>