score:0
your promise is ok (i.e. d3.text("temp.csv").then(makechart);
) but your logic in makechart
has a few issues:
- remove the space between the
,
andy
in the header you add - otherwise it's creating a object key like this" y"
instead of justy
- the
y
values need to be converted to float becausecsvparse
defaults to values as text without a conversion function datos.x
anddatos.y
do not refer to anything asdatos
has no specificx
andy
keys - it is an array of objects, each of which hasx
andy
keys. so, you can usemap
to extract the arrays of those keys
working example below:
var url = "https://gist.githubusercontent.com/robinmackenzie/ff787ddb871cef050d7e6279991a0f07/raw/4ce35de3a9bef27363d83e7da2f3365ffa8d2345/data.csv";
d3.text(url)
.then(csv => makechart(csv))
function makechart(temp) {
// add the header (no space between , and y
var result = "x,y\n" + temp; //now you have the header
// csv parse - need to convert y values to float
var datos = d3.csvparse(result, d => {
return {
x: d.x,
y: parsefloat(d.y)
}
});
// render chart
var chart = new chart('chart', {
type: 'line',
data: {
labels: datos.map(d => d.x), // <-- just get x values
datasets: [{
data: datos.map(d => d.y) // <-- just get y values
}]
}
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/3.8.0/chart.min.js"></script>
<canvas id="chart" width="400" height="100"></canvas>
Source: stackoverflow.com
Related Query
- Chartjs not working with d3 from csv source
- Bootstrap modal not working with chartjs line graph
- Chartjs with Vue, Bar Chart Border Radius not working
- Updating chart.js not working after recieved new data from database with ajax
- Legend color not working with randomly generated background colors in chartjs pie chart
- ChartJs is not working in angular 4 with no errors
- ChartJs not working with this JSON Object
- ChartJS 3.7 data not dynamically updating with data streaming into CSV
- angular directive is not working with chartjs
- ChartJS Scatter plot with JSON list variable not working
- Chartjs random colors for each part of pie chart with data dynamically from database
- react-chartjs-2 with chartJs 3: Error "arc" is not a registered element
- Using CSS variables (color) with chart.js - "var(--primaryColor)" not working
- Bootstrap grid not working with canvas
- Vuejs with ChartJS populate from API
- How to work out Chartjs using TypeScript with Chartjs.definitelyTyped from github
- ChartJS (React) Line Chart - How to show single tooltip with data and labels from 3 (multiple) dataset?
- ChartJS multiple tooltip callbacks not working
- How to create chartjs chart with data from database C#
- chartjs-plugin-zoom not working with my React project
- showing tooltips all the time in chartjs 2.4 not working
- ChartJS - radar chart options not working
- Bubble Chart in Chartjs not working
- Android: WebView with JavaScript for Chart.js not working properly
- How do I add time sourced from an external source as an X axis to a ChartJS graph?
- Chart.js stepSize not working with min
- code works fine on jsfiddle but one function is not working on website
- zeroLineColor and zeroLineWidth not working for the x-axis in Chartjs
- How can I show JSON data in Chart.js with Javascript if static values are working but dynamic from mySQL are not?
- yAxes not working with min max option
More Query from same tag
- Plot points on a line in chart.js
- Using chart.js to output chart as a saved image rather than using canvas
- Mapping data from JSON not parsing well
- ChartJs does not render chart when binding canvas id in Angular
- Vertical stacked bar chart using SharePoint List
- How to make the chart smaller than its container
- chart js label not showing
- Accessing .csv data from views file
- Combining charting with the map
- Chart doesn't display fonts
- Sequence of loading JavaScript <script> files
- Charts.js graph not displaying
- Chart.js Radar Not Displaying Data Values
- Programmatically creating labels for Chart.js in angular?
- UnCaught IndexSizeError: ChartJS
- creating a chart.js scatter graph with variables for data
- How to set ChartJS x-axis title
- How to use php variables in a chart js chart
- Chart.js maxBarThickness is deprecated in angular 8
- Bubble getting cut off in Chart.js
- ChartJS showing wrong dataset following visibility property toggle
- chart js using for loop
- Add an image as background in ChartJS chart area [Not to canvas]
- ChartJS V3 borderRadius only works on top
- how to add data from database to chartjs-plugin-streaming
- How can I automatically wrap tooltip text content to multiple lines?
- Custom tooltip on Chart.js is coming undefined
- Ajax won't retrieve the data from my script
- Stacked Horizontal Bars not in align Chart JS
- how to display chart data as html table chartjs