user3939059 user3939059 - 1 month ago 14
Javascript Question

Chart.js render two charts on one page.

Quite new to js, but looking for some help rendering two charts (chart.js) on one page. Cant get the second chart to show. I thought by creating to separate scripts with different canvas ids, each chart would be rendered separately. At the moment, only the 'morning' chart is rendered. thanks

<div class="container-profile">
<div class="container-week">
<div class="col s12 m5">
<div class="card-panel teal">
<h1>MORNING</h1>
</div>
</div>

<div style="width:90%;">
<canvas id="morningChart" class="morningChart" width="400" height="400"></canvas>
</div>
</div>

<div class="container-week">
<div class="col s12 m5">
<div class="card-panel teal">
<h1>EVENING</h1>
</div>
</div>

<div style="width:90%;">
<canvas id="eveningChart" class="eveningChart" width="400" height="400"></canvas>
</div>
</div>
</div>

<script type="text/javascript">

Chart.defaults.global.defaultFontColor = '#27AAE1'
Chart.defaults.global.defaultFontFamily = 'Source+Sans+Pro';
Chart.defaults.global.defaultFontSize = 40;
Chart.defaults.global.title.fontStyle = 'lighter';
Chart.defaults.global.title.text = "Weekly brushing morning";
Chart.defaults.global.legend.display = false;

const CHART = document.getElementById("morningChart");

var morningChart = new Chart(CHART, {
type: 'line',
data: {
labels: ["MON", "TUE", "WED", "THU", "FR", "SAT", "SUN"],
datasets: [
{
label: "Weekly brushing",
fill: true,
/* lineTension: 0.2, */
backgroundColor: "rgba(39,170,225,0.2)",
borderColor: "rgba(39,170,225,100)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "rgba(39,170,225,100)",
pointBackgroundColor: "#fff",
pointBorderWidth: 5,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(75,192,192,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: {{morning_weekly}},
spanGaps: false,
}
]
},
options: {
scales: {
xAxes: [{
gridLines: {
show: true,
color: "rgba(39,170,225,0.2)",
zeroLineColor: "rgba(39,170,225,1)"
},
scaleLabel: {
display: true,
fontFamily: "Helvetica",
fontColor: "#27AAE1"
},
}],
yAxes: [{
gridLines: {
show: true,
color: "rgba(39,170,225,0.2)",
zeroLineColor: "rgba(39,170,225,1)"
},
ticks: {
beginAtZero: true,
max: 6,
min: 0,
stepSize: 0.5
},
}]
}
}
});
</script>

<script type="text/javascript">

Chart.defaults.global.defaultFontColor = '#27AAE1'
Chart.defaults.global.defaultFontFamily = 'Source+Sans+Pro';
Chart.defaults.global.defaultFontSize = 40;
Chart.defaults.global.title.fontStyle = 'lighter';
Chart.defaults.global.title.text = "Weekly brushing morning";
Chart.defaults.global.legend.display = false;

const CHART = document.getElementById("eveningChart");

var eveningChart = new Chart(CHART, {
type: 'line',
data: {
labels: ["MON", "TUE", "WED", "THU", "FR", "SAT", "SUN"],
datasets: [
{
label: "Weekly brushing",
fill: true,
/* lineTension: 0.2, */
backgroundColor: "rgba(39,170,225,0.2)",
borderColor: "rgba(39,170,225,100)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "rgba(39,170,225,100)",
pointBackgroundColor: "#fff",
pointBorderWidth: 5,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(75,192,192,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: {{morning_weekly}},
spanGaps: false,
}
]
},
options: {
scales: {
xAxes: [{
gridLines: {
show: true,
color: "rgba(39,170,225,0.2)",
zeroLineColor: "rgba(39,170,225,1)"
},
scaleLabel: {
display: true,
fontFamily: "Helvetica",
fontColor: "#27AAE1"
},
}],
yAxes: [{
gridLines: {
show: true,
color: "rgba(39,170,225,0.2)",
zeroLineColor: "rgba(39,170,225,1)"
},
ticks: {
beginAtZero: true,
max: 6,
min: 0,
stepSize: 0.5
},
}]
}
}
});
</script>

Answer

You dont have to do Chart.defaults.global twice. You should not name two variables the same like you did const CHART and const Chart. Here is your code. http://codepen.io/anon/pen/QKoOJK which seem to work fine after few changes.