Menu
I'm trying to place time scale on the X axis. I have tried to write a simpler and reproducible code below. I can get it to run fine by removing the options block but it will display the time as just superficially-meaningless numbers to the viewer. How do I display time on the X axis? Am I missing some external source?
Note1: javascript file is a separate file, with the canvas/element "myChart" residing in the html file.
HTML:
<script src="https://www.chartjs.org/dist/2.8.0/Chart.min.js"></script>
<canvas id="myChart" style="position: relative; width: 100%; max-height: 500px; max-width: 1000px;" ></canvas>
ERROR: (myScript.js is the file in question)
Chart.min.js:7 Uncaught Error: This method is not implemented: either no adapter can be found or an incomplete integration was provided.
at ri.oi (Chart.min.js:7)
at i.update (Chart.min.js:7)
at Chart.min.js:7
at Object.each (Chart.min.js:7)
at Object.update (Chart.min.js:7)
at ni.updateLayout (Chart.min.js:7)
at ni.update (Chart.min.js:7)
at ni.construct (Chart.min.js:7)
at new ni (Chart.min.js:7)
at myScript.js:191
oi @ Chart.min.js:7
update @ Chart.min.js:7
(anonymous) @ Chart.min.js:7
each @ Chart.min.js:7
update @ Chart.min.js:7
updateLayout @ Chart.min.js:7
update @ Chart.min.js:7
construct @ Chart.min.js:7
ni @ Chart.min.js:7
(anonymous) @ myScript.js:191
Javascript:
pt1 = new Date("2019-03-15T23:36:35.316Z");
pt2 = new Date("2019-03-17T23:32:11.114Z");
var ctx = document.getElementById('myChart').getContext('2d');
var myBubbleChart =new Chart(ctx, {
type: 'bubble',
data: {
datasets: [
{
label: ["pt1"],
data: [{
x: pt1,
y: 1,
r: 10
}]
}, {
label: ["pt2"],
data: [{
x: pt2,
y: 1,
r: 10
}]
}
]
},
options: {
scales: {
xAxes: [{
type: 'time',
distribution: 'series'
}]
}
}
});
341
The Utils file contains multiple helper functions that the chart. js sample pages use to generate charts.
The last thing we need to prepare before we can start visualizing our data is to define an area in our HTML where we want to draw the graph. For Chart. js you do this by adding a canvas element, and setting width and height to define the proportions of your graph.
To remove legend on charts with Chart. js v2 and JavaScript, we can set the options. legend to false . const chart1 = new Chart(canvas, { type: "pie", data: data, options: { legend: { display: false, }, tooltips: { enabled: false, }, }, });
I had this same issue and attempted Kevin's solution, but it did not work. I found that it was necessary to place the moment script before the chartjs script and regardless of the versions I used, that solved the problem for me.
150
You have to use the bundle version of Chartjs that already include Moment.js
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Chart.bundle.js"></script>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
