score:0
Accepted answer
the array values must be separated by commas.
labels: [
data.feed.entry[0]["gsx$charts"]["$t"],
data.feed.entry[1]["gsx$charts"]["$t"],
data.feed.entry[2]["gsx$charts"]["$t"]
]
see this implementation:
(function() {
window.chartcolors = {
red: "rgb(255, 99, 132)",
green: "rgb(75, 192, 192)",
blue: "rgb(54, 162, 235)"
};
$.getjson("https://spreadsheets.google.com/feeds/list/1oayvjjsuqhdcwcdlseaenqml8jwk6iwwbffuku1pgms/1/public/values?alt=json", function(data) {
var ctx = document.getelementbyid("canvas").getcontext("2d");
window.mybar = new chart(ctx, {
type: "pie",
data: {
datasets: [{
data: [2574, 1663, 1670],
backgroundcolor: [window.chartcolors.red, window.chartcolors.green, window.chartcolors.blue],
label: "dataset 1"
}],
labels: [
data.feed.entry[0]["gsx$charts"]["$t"],
data.feed.entry[1]["gsx$charts"]["$t"],
data.feed.entry[2]["gsx$charts"]["$t"]
]
},
options: {
responsive: true
}
});
});
}());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://www.chartjs.org/dist/2.7.2/chart.bundle.js"></script>
<div id="container" style="width: 75%;">
<canvas id="canvas"></canvas>
</div>
Source: stackoverflow.com
Related Query
- Getting charts.js to read from Google Sheet JSON data
- Read google sheet json data into chartjs
- Multiple axis line chart with Chart.js and JSON data from Google Sheet
- getting additional value fields from data source for dx.chartjs doughnut chart
- Created an onclick function to remove data from a line chart in ChartsJs, but getting "Cannot read property 'data' of undefined" error
- Chart.js - Getting data from database using mysql and php
- Multiple lines / data series from JSON file with Chart.js
- Chart.js load new data from saved JSON object
- Chart not displaying from JSON data
- Angular / ng2-charts: Fetching json data in chart object showing: Cannot read property 'length' of undefined
- format JSON data for chart.js from Angular 4 observable
- How can I show JSON data in Chart.js with Javascript if static values are working but dynamic from mySQL are not?
- create Chart.js after getting data from api
- Charts js and laravel: Render chart after passing in json data
- Load data from a JSON object into an array
- Converting JSON data into Chart.js array from strings
- Populating Chart.Js line graph with multiple lines using data from a JSON Object
- Receiving json data from a server to display a chart.js graph not working
- Getting data into script tag from route?
- Update Chart js chart dynamically in angular 2 from data getting from nodejs service
- Passing JSON data from PHP array into ChartJS
- Mapping data from JSON not parsing well
- Visualization of charts using real time data from MSSQL with node.js webserver
- Angular6 and ng2-charts does not display any charts when i fill data from webservice
- get JSON data from function to give value to Chart JS
- How to properly unpack data from PHP array encoded as JSON from a JavaScript file
- Chart.js using json data from MySQL
- ionic display chartjs data from json http request
- Load data from Google Analytics in a Chart.js chart
- Stacked bar charts in Chart.js with JSON data
More Query from same tag
- Display the triangle pointStyle of chartjs upside down
- how to display multiple sum with chart js and laravel?
- How to assign an array to data of charts.js's counts
- Ng2-Charts in Angular: Is 'Auto' supported for display property of Axes
- Using large values for y axis in Chart.js
- Missing colors in my Chart.js, my data looks fine, but no color
- Linear gradient width using percentage (%) instead of pixels (px)
- How to write better code in es6 for formatting an object with array values
- How to use the tooltipTemplate on Chart.JS 2.0
- Chart.JS removing data stuck in loop
- ChartJS separate charts per JSON object, and not when hovered over
- Configure Pie Chart Colors Using Chart.js and PHP
- Realtime data from a service in ionic / angular
- ChartJS ignoring TailwindCSS styling
- ChartJs with try catch
- How to fill the gaps in an array of Dates with fixed length
- ChartJS non overlapping lines
- Trying to load a chart with chart.js, through ajax and php
- Chart.js have the y-axis step from 20 to 1 (instead of 1 to 20)
- How can I build a double doughnut chart that spins when triggered
- Customize legend AngularJS
- Setting axis scales in ChartsJS
- ChartJS: Draw line between two data points on hover
- how to display chart.js legend with different bar color
- Chart.js not working on Angular 1.5?
- Proper way to use a counter variable in HTML/Javascript
- Wrong tootip in chartjs
- chart.js cuts data points to half
- Format x axis to show percent with Primefaces/Chartjs ScatterChart
- Javascript 2D array getting each element