score:5
Accepted answer
follows a small plugin that will populate all the data for you using an array :
make sure to register the plugin before creating the chart (before calling
i also suggest to have an empty data in your chart (before the plugin occurs) to make sure you won't have data you don't want.
there is no built-in way to create your chart using an array straight into the data.
but you can create a small work around using chart.js plugins. they let you handle events triggered during the whole creation of the chart, such as before it is initialized, after a resize, etc.
follows a small plugin that will populate all the data for you using an array :
var myplugin = {
// we edit what is happening before the chart is initialized.
beforeinit: function(chart) {
var data = chart.config.data;
// `apiarray` is what you get from your api.
// for every data in this array ...
for (var i = 0; i < apiarray.length; i++) {
// populate the labels array with the first value ..
data.labels.push(apiarray[i][0]);
// .. and the data with the second value
data.datasets[0].data.push(apiarray[i][1]);
}
}
};
then you need to add this newly created plugin to your chart plugin services :
chart.pluginservice.register(myplugin);
make sure to register the plugin before creating the chart (before calling
new chart()
), or else it won't work.i also suggest to have an empty data in your chart (before the plugin occurs) to make sure you won't have data you don't want.
you can see a fully working example on this jsfiddle.
Source: stackoverflow.com
Related Query
- Data with pair X and Y values
- Draw a Chart.js with ajax data and responsive. A few problems and questions
- line chart with {x, y} point data displays only 2 values
- using array values in chart.js data and label field
- Chart.js Timeseries chart - formatting and missing data values
- Chart JS: Ignoring x values and putting point data on first available labels
- How to show data values in top of bar chart and line chart in chart.js 3
- ChartJS (React) Line Chart - How to show single tooltip with data and labels from 3 (multiple) dataset?
- How to achieve the best possible performance with mutable data and real-time charts in React?
- Graph streaming real-time data with react and chartjs
- How to display timestamped data with PrimeFaces and ChartJs?
- How to get chart from data points (arrays) with inconsistent time intervals and chart.js?
- Angular 2: How to pass my API data to graph and Display the Graph with data
- How can I show JSON data in Chart.js with Javascript if static values are working but dynamic from mySQL are not?
- Doughnut Chart not displaying data with Chart Js and Backbone js
- Create New Array from Existing Array Values With Unique and Sum
- chartjs xaxis ticks with round values from shifted input data
- Bar chart with min height and zero values - ChartJs
- How to reuse a Chartjs Chart component in with different Data and get past the **Canvas is already in use** error?
- How to fetch all data from API files and assign their values to chart?
- How to write better code in es6 for formatting an object with array values
- How to properly feed data to ChartJS with different number of x(labels) and y(data) points
- chart.js with json data and jquery - error :-(
- How to set min max for x axis depend on data with Chartjs and Spring Boot?
- Chartjs working with large and small values
- How to plot a line graph with x and y data
- Chart.js combined line and bar chart with differing data points
- How can I get my Chart.JS bar chart to stack two data values together on each bar, and print a calculated value on each bar?
- Chart Piechart in only show percentage on hover but it shows data and label with percentage both i just want to show percentage only percentage
- Charting Commodity Data - Issue getting the dates and values in JSON
More Query from same tag
- How to change line color based on data - chartist or chart.js
- How to show tooltip value of all data falling on the same axis in chart js?
- chart.data.datasets.push() also adds datasets to other charts in array
- Chart.js:9352 Failed to create chart. Unable to dynamically create charts
- How to trigger ChartJS legend onClick with out interrupting its normal working
- How do you create a Radar chart using chart.js with a y-axis of 0 to 100?
- AngularJS hide and show a char
- How to get the image from graph created using chartjs
- Resize pie chart from chart.js
- Django - object is not subscriptable django charts.js" or nothing displays at all?
- Dynamic js chart display problems
- how to filter year from datefield in django
- Create Chart.js pie chart data from PHP
- Can't update chart
- canvas fill text vanishes when hovering over chartjs pie chart
- Angular Chart.js not displaying Chart (Legend is Displaying)
- Chart.js - show tooltip when hovering on legend
- Template variable injection in JS script
- How to hide the legend in chart.js in a react project?
- How to remove strikethrough from label once click on legend
- How do I display a different chartjs tooltip title?
- How to reformat tooltip in Chart.js?
- Why is my line chart using multiple lines to connect random points? (Chart.js)
- How to set dynamic value for horizontal line in annotation plugin for Chart.js
- Chart Value of the bar
- How to import Chart.js with Webpack
- different colors for bar chart with chart.js
- Chart.js: compare two periods like Google Analytics with a line chart
- Chart JS prepend labels to x-axis with addData
- How to visualize data with chart.js properly?