score:66
Accepted answer
You should create a separate array for colors ( just like the ict_unit
and efficiency
), instead of assigning a random color value each time to the coloR
variable.
Here is the revised version of your code :
$(document).ready(function() {
$.ajax({
url: "https://jsonblob.com/api/jsonBlob/a7176bce-84e0-11e7-8b99-016f34757045",
method: "GET",
success: function(data) {
console.log(data);
var ict_unit = [];
var efficiency = [];
var coloR = [];
var dynamicColors = function() {
var r = Math.floor(Math.random() * 255);
var g = Math.floor(Math.random() * 255);
var b = Math.floor(Math.random() * 255);
return "rgb(" + r + "," + g + "," + b + ")";
};
for (var i in data) {
ict_unit.push("ICT Unit " + data[i].ict_unit);
efficiency.push(data[i].efficiency);
coloR.push(dynamicColors());
}
var chartData = {
labels: ict_unit,
datasets: [{
label: 'Efficiency ',
//strokeColor:backGround,
backgroundColor: coloR,
borderColor: 'rgba(200, 200, 200, 0.75)',
//hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
hoverBorderColor: 'rgba(200, 200, 200, 1)',
data: efficiency
}]
};
var ctx = $("#my-canvas");
var barGraph = new Chart(ctx, {
type: 'pie',
data: chartData
})
},
error: function(data) {
console.log(data);
},
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="my-canvas"></canvas>
score:1
An example snippet for rgb color picker between 235 and 52
const randomNum = () => Math.floor(Math.random() * (235 - 52 + 1) + 52);
const randomRGB = () => `rgb(${randomNum()}, ${randomNum()}, ${randomNum()})`;
console.log(randomRGB());
Resource:
Source: stackoverflow.com
Related Query
- Chartjs random colors for each part of pie chart with data dynamically from database
- chart.js Line chart with different background colors for each section
- Chartjs - data format for bar chart with multi-level x-axes
- Show "No Data" message for Pie chart with no data
- ChartJS (React) Line Chart - How to show single tooltip with data and labels from 3 (multiple) dataset?
- How to create chartjs chart with data from database C#
- Issue with chartjs linear gradient for the mixed bar chart in ReactJS is not calculated for each individual Bars
- Legend color not working with randomly generated background colors in chartjs pie chart
- Changing chart data dynamically with C# from SQL database
- getting additional value fields from data source for dx.chartjs doughnut chart
- Chartjs pie chart not showing from dynamic data
- ChartJS - Draw chart with label by month, data by day
- ChartJS bar chart with legend which corresponds to each bar
- Chart.js - Line charts with different colors for each border lines
- How to display data labels outside in pie chart with lines in ionic
- Show data dynamically in line chart - ChartJS
- ChartJs line chart - display permanent icon above some data points with text on hover
- How to use 'time' (data from database, data type: timestamp ) for plotting graph in Chart JS
- Using data from API with Chart JS
- ChartJS bar chart fixed width for dynamic data sets
- Custom data in label on ChartJS pie chart
- Use transparent stroke color with chartjs pie chart
- how to set color for each item in tooltip with ChartJS
- How to get chart from data points (arrays) with inconsistent time intervals and chart.js?
- Chartjs not working with d3 from csv source
- How do I customize y-axis labels and randomly pick the value from the data range for x-axis in Chart js
- How to display chart using Chartjs with JSON data in Laravel
- Hide labels from pie chart in chartjs
- Initialize a Chart.js chart with data from an api
- How to create a custom tooltip for chartJS graph with data in JSON array in JavaScript?
More Query from same tag
- Google Pie Chart php mysql
- Chartjs: How to offset ticks on radarchart?
- drawing line chart with chartjs
- Use fetch to get JSON Data for Chart JS
- Re-running chart.js with different variable
- How to change position of labels in Doughnut chart?
- Frontend and backend for chart using chartjs, mongodb, and controller
- How to set default colour for bars in Chart.js
- angular-chart.js - chart height not working on iOS but works fine on Android and Web
- How do I update the Chart.js automatically every 2 seconds?
- Radar charts for chartjs always stay filled
- Diplay multiple chart js Diagrams on one page
- How to display variables from Laravel controller to view javascript with specific index
- dyamically constructing javascript object
- Always show last tooltip on all datasets, leave the rest to display on hover? ChartJS
- Chart.js compress vertical axis on barchart
- How to sort color segments by value within the 100% stacked bars rather than by value across all the stacked bars in Highcharts or ChartJs
- Chart js nested pie label colors in legend
- Given point in tooltiptext
- Chart.js unable to create chart
- Writing blank on canvas using fillText
- chartjs cutoutPercentage and tooltips does not works in nextjs
- Prevent scroll when calling update()
- Text in center of chartJS lead to infiniteloop
- In bar chartjs report zero values are skipped so bars are invalid
- ChartJs title not showing
- How do I add padding on the right of tooltip, but not the left in Chart.js?
- ChartJS autoskip:False not working on line chart
- Chart.js bar thickness
- how to put "%" in chart pie (chartjs)