score:1
Accepted answer
please remind that jquery.getjson()
is executed asynchronously. therefore you should create the chart only once the data is available and processed to a format suitable for your chart. this can be done if you place code responsible for chart creation inside the jquery.getjson()
success handler (callback function) as follows.
$.getjson("https://spreadsheets.google.com/feeds/list/1gnakunnqvfxjuzmspnbpu9eufb4sooqlgl2ofc3lfas/od6/public/values?alt=json", data => {
var labels = [];
var numbers = [];
data.feed.entry.foreach(e => {
labels.push(e['gsx$names']['$t']);
numbers.push(number(e['gsx$numbers']['$t']));
});
new chart(document.getelementbyid('mychart'), {
type: 'radar',
data: {
labels: labels,
datasets: [{
label: 'current level',
data: numbers,
backgroundcolor: 'rgba(253, 48, 76, 0.2)',
bordercolor: 'rgb(253, 48, 76)',
pointbackgroundcolor: 'rgb(253, 48, 76)'
}]
},
options: {
tooltips: {
callbacks: {
title: (tooltipitem, data) => data.labels[tooltipitem[0].index]
}
}
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.9.3/chart.min.js"></script>
<canvas id="mychart"></canvas>
Source: stackoverflow.com
Related Query
- Read google sheet json data into chartjs
- Getting charts.js to read from Google Sheet JSON data
- Passing JSON data from PHP array into ChartJS
- Multiple axis line chart with Chart.js and JSON data from Google Sheet
- How do I add JSON Data into ChartJS
- Displaying JSON data in Chartjs
- React ChartJS prevent new data from being added into state after it's redrawn?
- How to feed hour and minute data into chartJS
- Loading an external JSON into ChartJs
- Chartjs Data via json request not populating
- Parsing JSON data into Chart.js bar chart
- Chartjs - Insert additional data into chart tooltip
- Angular / ng2-charts: Fetching json data in chart object showing: Cannot read property 'length' of undefined
- 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?
- Converting JSON data into Chart.js array from strings
- How to get the database data into ChartJS using codeigniter
- Dynamically pass the JSON data in chartjs
- Referencing locally declared variable into an array for data for chartjs
- passing json data to chartjs
- load external json data file in to chartjs in the angular component
- Rendering Rails json data in chartjs
- Chartjs in Vue integrate parsed Json Data
- ChartJS have xAxes labels match data source
- JSON cyclic object value when posting data in ChartJS
- How to use JSON data as chartjs data?
- To display data from mock server into chartjs using ember
- Transform JSON data for ChartJS
- ionic display chartjs data from json http request
More Query from same tag
- Chart.js - Fill Text only appearing when hovering over one part of the doughnut
- Create a chart on a dynamically created canvas in Angular-chart.js
- how to resize specific gridline(s) in chart.js
- Make non-zero value as mid-point for horizontal bar chart?
- Chart.JS: How to add Data to a specific dataset
- Is there anyway to remove the dots for points from angularjs charts
- How to force animation on chartjs?
- Trying to get multiple chart.js charts to load on the same page
- ChartJS plotting x/y in a line chart
- AJAX request not working unless alert() is used
- Reactjs- Bar Graph-chartjs- Data not coming in individual blocks
- Chart.js - Bar chart with linear cartesian (numerical) X axis?
- Reusable react component with Canvas doesn't render canvas with its props
- Which jquery plugin can create a stacked column chart?
- Draw two plots using chartjs over one another with transparency
- ChartJS align axis label to the top
- old yAxis ticks do not get removed (chartjs, react-chartjs-2 wrapper)
- chartjs chart spilling out of container
- How can I arrange according to month using chart Js?
- Chart.js render problem when routing Angular
- Unix Timestamp Chart.js with PHP echo
- Chart.js Legend not showing
- Best way to connect Django Query results to Chart.js charts?
- How to add prefix to legend in ng charts using angular
- Failing to render chart – "can't acquire context from the given item"
- Adding additional data to chart
- Chartjs equidistance between X values
- Chart.js - x-axis and tooltip label shows "undefined" in Chrome when browser language is NOT English
- Chart.js stacked and grouped horizontalBar chart
- Vue ChartJS is not updating