score:1
Accepted answer
since your csv
data has no header, you should use d3.text
to load the data, followed by d3.csvparserows
to parse it to a json
array (see https://stackoverflow.com/a/13870360/2358409). to extract the data values from the json
array, you can use array.map
.
data: d3.csvparserows(types).map(v => v[1])
please take a look at your amended code and see how it works.
d3.text("https://raw.githubusercontent.com/uminder/testdata/main/so/csv/donut.csv").then(makechart);
function makechart(types) {
new chart('doughnut-chart', {
type: 'doughnut',
data: {
labels: ['cancelled', 'success', 'failed'],
datasets: [{
label: 'population (millions)',
backgroundcolor: ['#3e95cd', '#3cba9f', '#8e5ea2'],
data: d3.csvparserows(types).map(v => v[1])
}]
},
options: {
title: {
display: true,
text: 'weekly status'
}
}
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/6.2.0/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.9.4/chart.min.js"></script>
<canvas id="doughnut-chart" height="90"></canvas>
Source: stackoverflow.com
Related Query
- donut chart not rendering with csv data chart.js
- Chart.js not rendering chart with data from mySQL database
- Chart JS not showing On hover with small data
- Chartjs not working with d3 from csv source
- Doughnut Chart not displaying data with Chart Js and Backbone js
- Chart not rendering with pug/jade and nodejs
- Dynamic data in bar chart not rendering React js
- Chart JS not working with Dynamic Data
- Chartjs chart not rendering with pug template
- Firefox is not responding when loading 800+ data sets in Bar Chart with Charts.Js
- ChartJS 3.7 data not dynamically updating with data streaming into CSV
- Background color does not work when trying to create my data before using scatter chart with chart.js
- Line chart not rendering data
- Position of the x-axis labels is not in sync with the line chart data points
- Unable to get chartjs to draw a chart with dynamic data (variable not hardcoded)
- Plot a Line chart using Chart.js with CSV Data
- Chart JS: Donut/Doughnut Chart: Tooltip to be shown always for all the data. All tooltip is not shown when multiple data are with 0 data
- Chartjs random colors for each part of pie chart with data dynamically from database
- ChartJS - Draw chart with label by month, data by day
- line chart with {x, y} point data displays only 2 values
- How to display data labels outside in pie chart with lines in ionic
- Chartjs - data format for bar chart with multi-level x-axes
- ChartJs line chart - display permanent icon above some data points with text on hover
- Series Details Not Showing in Angular Chart with Charts.js
- Chartjs not rendering chart and no error thrown
- Show "No Data" message for Pie chart with no data
- Populating javascript chart with Razor model data
- Using data from API with Chart JS
- chart js with angular2 loading dynamic data only after zoomin
- Chart JS not rendering on iOS devices
More Query from same tag
- What is the order in which the hooks (plugins) of Chart.js are executed?
- Reactjs- Bar Graph-chartjs- Data not coming in individual blocks
- Chart.js Vertically Aligned points on single x axis
- Feeding PHP MySQL Call into Charts.js
- Range at the end of the line chart
- Force ChartJS to show Doughnut chart with null values
- Is it possible to make chartjs charts scrollable?
- Set backgroundColor of bar-char (chart.js)
- Chart.js change legend toggle behaviour
- How can I build a vertical line without going through my dots on my line graph? (charts.js)
- How to add a second set of labels to a Chart.js doughnut chart?
- Ajax asynchronicity calls end function before inner loop function
- Connecting Two Datasets in Chart.js Into a Single Line
- Ionic: Doughnut Chart's legend occupies complete card in mobile, while on big screen chart and legend looks fine
- Legend option destroys pie chart in Chart.js
- How to Draw a line on chart without a plot point using chart.js
- Chartjs not picking up twig variable for label
- Chart.js building dynamic charts, JSON data parsing issue
- Change color of X axis values to multi color values - Chart.js
- How can i launch a modal after clicking each bar in Bar chart in Chartjs and also how can i get its data?
- chart.js how to show tick marks but hide gridlines
- Charts js. How to pass datasets use a select dropdown by angular instead jquery
- How to set a minimum width on the values in a doughnut chart?
- findOne returns undefined in onRendered
- How to assign a logarithmic scale to y axis in chart.js?
- How to remove quotations from a dictionary in python
- Python list does not work in django with ChartJS
- Charts.js line chart: Show the most recent date on x-axis when setting ticks.maxTicksLimit
- charts disappear if rendered in hidden divs
- Chartjs: Multiple data values for the same label