chart.js

Cannot read property 'labels' of undefined

生来就可爱ヽ(ⅴ<●) 提交于 2021-02-07 12:55:24
问题 I am just learning how chart.js works so I have used the example code directly off of chart.js API page and it doesn't seem to work. I places the following code in the script tag and I get a " Cannot read property 'labels' of undefined" error. Not sure what this error means $(function () { var ctx = $('#myCanv').get(0).getContext("2d"); var myRadarChart = new Chart(ctx).Radar(data, options); var data = { labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],

Chartjs - How to get last 7 days on x-axis labels?

旧街凉风 提交于 2021-02-07 10:31:01
问题 I am trying to get the last seven days on the x-axis of my line-chart (using chartjs). What is the best way to do this? Thanks 回答1: You can instantiate a chart for the last seven days with the following code: let start = new Date(), end = new Date(); start.setDate(start.getDate() - 7); // set to 'now' minus 7 days. start.setHours(0, 0, 0, 0); // set to midnight. new Chart(document.getElementById("chart"), { type: "line", options: { scales: { xAxes: [{ type: "time", time: { min: start, max:

Chartjs - How to get last 7 days on x-axis labels?

我的未来我决定 提交于 2021-02-07 10:30:15
问题 I am trying to get the last seven days on the x-axis of my line-chart (using chartjs). What is the best way to do this? Thanks 回答1: You can instantiate a chart for the last seven days with the following code: let start = new Date(), end = new Date(); start.setDate(start.getDate() - 7); // set to 'now' minus 7 days. start.setHours(0, 0, 0, 0); // set to midnight. new Chart(document.getElementById("chart"), { type: "line", options: { scales: { xAxes: [{ type: "time", time: { min: start, max:

get yLabel value onclick chart js

被刻印的时光 ゝ 提交于 2021-02-07 08:31:31
问题 I want to have the y label value, when I click on the bar. Like the above example, when I click on feb blue bar I want to have label value, which is 40 I looked for examples on stackOverFlow and other sites but they only have example of label for the legend show up. some of the code I tried onClick: function(evt, element) { var activePoints = bar_chart.getElementAtEvent(evt); console.log(activePoints[0]._model.datasetLabel); } 回答1: This demo gives the value in the bar chart when you click on

get yLabel value onclick chart js

和自甴很熟 提交于 2021-02-07 08:31:20
问题 I want to have the y label value, when I click on the bar. Like the above example, when I click on feb blue bar I want to have label value, which is 40 I looked for examples on stackOverFlow and other sites but they only have example of label for the legend show up. some of the code I tried onClick: function(evt, element) { var activePoints = bar_chart.getElementAtEvent(evt); console.log(activePoints[0]._model.datasetLabel); } 回答1: This demo gives the value in the bar chart when you click on

get yLabel value onclick chart js

元气小坏坏 提交于 2021-02-07 08:30:07
问题 I want to have the y label value, when I click on the bar. Like the above example, when I click on feb blue bar I want to have label value, which is 40 I looked for examples on stackOverFlow and other sites but they only have example of label for the legend show up. some of the code I tried onClick: function(evt, element) { var activePoints = bar_chart.getElementAtEvent(evt); console.log(activePoints[0]._model.datasetLabel); } 回答1: This demo gives the value in the bar chart when you click on

Laravel - Bootstrap Javascript's conflict with Chart.js

*爱你&永不变心* 提交于 2021-02-07 07:39:29
问题 Has anyone experienced this? Bootstrap's Javascript (For modals , accordion , and other animations) has conflict for my Chart.js . Here's the cdn link, I used the minified version. (Chart.min.js) If this helps, I'll show my script for the chart: <script src="{{ asset('js/Chart.min.js') }}"></script> <script> let myChart = document.getElementById('myChart').getContext('2d'); let massPopChart = new Chart(myChart, { responsive: true, type:'line', data:{ labels:['Monday', 'Tuesday', 'Wednesday',

Chart.js show x-axis data from right to left

拈花ヽ惹草 提交于 2021-02-05 11:27:06
问题 I am working on the chart.js vertical chart and I want to make a slight change in the way it displays. Basically the first data will be displayed from the left but I want to display first data from right. Is that possible? Here is the working version of what I have so far: https://jsfiddle.net/wxaL6en0/4/ options: { responsive: true, maintainAspectRatio: false, legend: { display: false, } } This is what i have done for the option. The result I am expecting is, April to be on the right and

refresh chart data every second javascript

北慕城南 提交于 2021-02-05 10:41:49
问题 I am creating an html web page with a chart on that shows voltage levels continuously changing. I want to refresh the page every second so that the bars in the bar chart go to the new values. I am not sure how to update the chart data like this. I have the following so far: Chart.plugins.unregister(ChartDataLabels); function myFunction() { var cells = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16]; var voltages = []; for (i = 0; i < 16; i++) { voltages[i] = Math.floor(28 + Math.floor

cartesian coordinate system with chart.js

泄露秘密 提交于 2021-02-05 09:31:47
问题 I'm trying to create a cartesian coordinate system (i.e. for coordinate geometry) using chart.js. The documentation actually states "cartesian axes" but I'm not seeing any evidence that such a name is warranted. My chart is as follows: <canvas id="myChart" width="400" height="400"></canvas> <script> var ctx = document.getElementById('myChart').getContext('2d'); var scatterChart = new Chart(ctx, { type: 'scatter', data: { datasets: [{ label: 'Scatter Dataset', data: [{x:-3,y:5},{x:-2,y:0},{x: