I am creating a chart.js graph in mixed mode, where I am trying to display a bar graph and line graph. The issue is bar chart appears only when I comment or delete the line section, otherwise with both sections(bar and line), I get only line chart. I tried clubbing both section under single dataset, but then nothing gets displayed. Need direction in figuring out issue. My js is follows:
<canvas id="chart"></canvas>
<script>
var file = 'TempData.csv';
d3.csv(file).then(makeChart);
function makeChart(days) {
var dayLabel = days.map(function(d){return d.Time});
var dayTemp = days.map(function(d) {return d.Value});
var dayHeap = days.map(function(d){return d.heap});
//Set Min for better visiable range
var minX = d3.min(dayTemp);
minX -= 10;
var chart = new Chart('chart', {
type: 'bar',
data: {
labels: dayLabel,
datasets: [
{
data: dayTemp,
backgroundColor: "rgba(217,83,79,0.75)"
}
]
},
type: 'line',
data: {
labels: dayLabel,
datasets: [
{
data: dayHeap,
backgroundColor: "rgba(51,51,51,0.5)"
}
]
},
options: {
title: {
display: true,
text: file
},
legend: {
display: true
},
scales: {
xAxes: [
{
ticks: {
suggestedMin: minX,
}
}
]
}
}
});
}
</script>
and my Tempdata.csv is as follows:
Time,Value,heap
Sun,80,190
Mon,90,180
Tue,70,150
Wed,80,120
Thu,95,170
Fri,89,199
Sat,75,160
Have been able to resolve stacking line and bar in same dataset. Following is the working code.
<script>
var file = 'TempData.csv';
d3.csv(file).then(makeChart);
function makeChart(days) {
var dayLabel = days.map(function(d){return d.Time});
var dayTemp = days.map(function(d) {return d.Value});
var dayHeap = days.map(function(d){return d.heap});
//Set Min for better visiable range
var minX = d3.min(dayTemp);
minX -= 10;
var chart = new Chart('chart', {
type: 'bar',
data: {
labels: dayLabel,
datasets: [
{
type:'bar',
data: dayTemp,
backgroundColor: "rgba(217,83,79,0.75)"
},
{
type:'line',
data:dayHeap,
backgroundColor: "rgba(51,51,51,0.5)"
},
]
// },
},
options: {
title: {
display: true,
text: file
},
legend: {
display: true
},
scales: {
xAxes: [
{
ticks: {
suggestedMin: minX,
}
}
]
}
}
}
)};
</script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.