My charts doesn't work after inserting X-axis - django

Question

Please if you have successfully worked on months or other time like years days in Django chartjs, please kindly share a link where I can see how it is utilized. As I can't figure why mine isn't working, the moment I put the x-axis it doesn't show any data.
But if I remove the x-axis part, it works perfectly. my main aim is to make the months display so I can get some data into it. Any help would be really appreciated.
Below is the updated script snippet
<script>
$(document).ready(function(){
var ctx2 = document.getElementById("myChart2");
var myChart2 = new Chart(ctx2, {
type: "bar",
data: {
datasets: [
{
label: "US Dates",
data: [
{
x: "04/01/2014",
y: 175,
},
{
x: "10/01/2014",
y: 175,
},
{
x: "04/01/2015",
y: 178,
},
{
x: "10/01/2015",
y: 178,
},
],
backgroundColor: "rgba(255, 99, 132, 0.2)",
borderColor: "rgba(255, 99, 132, 1)",
borderWidth: 2,
},
{
label: "UK Dates",
data: [
{
x: "04/01/2014",
y: 143,
},
{
x: "10/1/2014",
y: 175,
},
{
x: "04/01/2015",
y: 165,
},
{
x: "10/1/2015",
y: 178,
},
],
backgroundColor: "rgba(99, 255, 132, 0.2)",
borderColor: "rgba(99, 255, 132, 1)",
borderWidth: 2,
},
],
},
options: {
responsive: true,
title: {
display: true,
text: "Chart.js Time Scale",
},
scales: {
xAxes: [
{
type: "time",
position: "bottom",
time: {
displayFormats: { day: "MM/YY" },
tooltipFormat: "DD/MM/YY",
unit: "month",
},
},
],
yAxes: [
{
scaleLabel: {
display: true,
labelString: "value",
},
},
],
},
},
});
})
</script>

Answer 1

There is not problem with option for x-axis.
I bet there is a problem with dataset.
Dataset of x and y should be specified.
Following snippet will help you.
var ctx2 = document.getElementById("myChart2");
var myChart = new Chart(ctx2, {
type: "bar",
data: {
datasets: [
{
label: "US Dates",
data: [
{
x: "04/01/2014",
y: 175,
},
{
x: "10/01/2014",
y: 175,
},
{
x: "04/01/2015",
y: 178,
},
{
x: "10/01/2015",
y: 178,
},
],
backgroundColor: "rgba(255, 99, 132, 0.2)",
borderColor: "rgba(255, 99, 132, 1)",
borderWidth: 2,
},
{
label: "UK Dates",
data: [
{
x: "04/01/2014",
y: 143,
},
{
x: "10/1/2014",
y: 175,
},
{
x: "04/01/2015",
y: 165,
},
{
x: "10/1/2015",
y: 178,
},
],
backgroundColor: "rgba(99, 255, 132, 0.2)",
borderColor: "rgba(99, 255, 132, 1)",
borderWidth: 2,
},
],
},
options: {
responsive: true,
title: {
display: true,
text: "Chart.js Time Scale",
},
scales: {
xAxes: [
{
type: "time",
position: "bottom",
time: {
displayFormats: { day: "MM/YY" },
tooltipFormat: "DD/MM/YY",
unit: "month",
},
},
],
yAxes: [
{
scaleLabel: {
display: true,
labelString: "value",
},
},
],
},
},
});