score:0
Accepted answer
ok... i've tried this and it seems to work. so the basic idea is you get the array of keys and values and provide them to labels as well as data. here's a basic example based on the data you provided.
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>document</title>
</head>
<body>
<canvas id="mychart" width="400" height="400"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="./script.js"></script>
</body>
</html>
and the script file
script.js
const tocharts = () => {
const exampledata = {
"2021-6-12": 2,
"2021-6-13": 3,
"2021-6-14": 1
}
const ctx = document.getelementbyid('mychart').getcontext('2d');
const mychart = new chart(ctx, {
type: "bar",
data: {
labels: object.keys(exampledata),
datasets: [{
label: "demo years",
data: object.values(exampledata),
backgroundcolor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
],
bordercolor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
],
borderwidth: 0.5,
}]
},
options: {
scales: {
y: {
beginatzero: true
}
}
}
})
}
tocharts();
score:1
you can use object.keys() and object.values() to map your object into labels and datasets, as follows :
const chartdata = {
"2021-6-12": 2,
"2021-6-13": 3,
"2021-6-14" : 1,
}
const labels = object.keys(chartdata) // labels
const data = {
labels: labels,
datasets: [{
label: 'my first dataset',
data: object.values(chartdata), // datasets
...
object.keys(chartdata) will map your object 'key' : 2021-6-12, ...
and, object.values(chartdata) will map your object data : 2,3,...
see reference here :
Source: stackoverflow.com
Related Query
- Parse a JSON object to ChartJS
- JSON cyclic object value when posting data in ChartJS
- ChartJs not working with this JSON Object
- How to parse a Chart using data from a nested object in ChartJS
- Using ChartJS and JSON to render charts; Appending JSON Data to javascript yields an empty object in console.log
- Displaying JSON data in Chartjs
- what is the correct way to destructure a nested json object with fetch?
- Grouping the object by key for Chartjs bar chart
- Loading an external JSON into ChartJs
- Chartjs Data via json request not populating
- How to add ChartJS code in Html2Pdf to view image
- ng2-charts access chartjs object to apply chartjs functions
- Chart.js load new data from saved JSON object
- ChartJS 3+ x-axis only showing full moment object instead of just month
- ChartJs chart in typescript: Object is possibly undefined in useEffect
- Loading json file to chartjs
- Javascript function to check for missing dates on JSON object
- How do I add time sourced from an external source as an X axis to a ChartJS graph?
- Parse an object to chart.js instead of arrays?
- Angular / ng2-charts: Fetching json data in chart object showing: Cannot read property 'length' of undefined
- Chartjs not working with d3 from csv source
- how can i reset chartjs object all instances and recreate it from scratch?
- How to display chart using Chartjs with JSON data in Laravel
- Load data from a JSON object into an array
- How to create a custom tooltip for chartJS graph with data in JSON array in JavaScript?
- Populating Chart.Js line graph with multiple lines using data from a JSON Object
- Map JSON for Chartjs with Angular 7
- Charts in Angular js with JSON Object
- ChartJS and JSON result: Cannot set property 'fillColor' of undefined
- Passing JSON data from PHP array into ChartJS
More Query from same tag
- Why is my Chart.JS canvas not destroying?
- Vue.js - this.<value>.<value> is undefined
- Chartjs background color multiple Dataset
- How to add multiple background color in line charts
- My Chartjs is not updating after setstate full code attached Reactjs Update
- react-chartjs-2 time scale dates not formatting
- How can I shade a portion of a ChartJS line grph=
- Add DataSet Bar Chart - Chart.JS
- How to use Chart.js to draw solid points
- How to unregister a chart plugin?
- Chart.js fix minimum axes?
- How to change position from absolute to relative in charts in ChartJS
- Yii2 Chart is not defined
- ChartJS doughnut data toggle on custom button click
- chart.js barchart without set fill color
- Chart Js reduce text size for label on X axis
- Time scale with single object - bar isn't centered (chart.js)
- Chart.js add icon at the top of bar
- Chart.js showing nothing on canvas
- How to use Chart.js to draw mixed Financial / Candlestick and Bar Chart?
- getting additional value fields from data source for dx.chartjs doughnut chart
- error : "Uncaught TypeError: Cannot read property 'length' of null" Chart.js
- How to use vanilla js in reactjs to create a chart?
- Visualizing intervals with range bar charts in chart.js
- How to save Chart JS charts as image without black background using blobs and filesaver?
- How to add a dataset toggle to Chart.js?
- Charts.js candlestick (Financial Charts) Timeformat Question
- Chart.js plugins overlapping tooltips
- Chart.js chart appears and disappears on form submit
- ChartJS re-rendering bug