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
- The chart list is not showing
- Reference external JS method in Chart.js callback using Chartjs.ror
- Chart.js Text color
- How to sort XY line chart tooltip items based on value and add thousands separators?
- How do I implement the 'autoskip' feature in chartjs?
- How to use chartjs-plugin-datalabels for specific charts using vue-chart.js
- How can I remove extra whitespace from the bottom of a line chart in chart.js?
- chart js double tooltip on hover
- Adding text inside 2 different Doughuts chartjs
- Why is borderColor function in chartjs running multiple times, and how to reduce it?
- How to integrate charts with js and jQuery?
- Chart.js canvas y axis
- ChartJS Y Axis scale odd
- Can't resize react-chartjs-2 doughnut chart
- Can we remove bar chart line on click on pie chart legend label?
- Configuring a Radar Chart w/Chart.js
- chat,js stacked bar chart (make one dataset into stacked)
- How to get dataset from MySQL using Flask?
- Tooltip does not appear
- Chart JS: Old chart data not clearing
- chart.js line for only part of the labels
- Jquery Bargraph not Loading properly
- make chartJS labels clickable and get label details
- How do I make a pie chart showing number of people in an age group with JSON and ChartJS?
- How can I change the position of legends in chart.js?
- Chart.js same Y axis on left and right
- Unable to pass on data from json file to labels and datasets in chart.js
- Calling chart JS with PHP Data (file structure)
- Create Chart using Reactjs Chartjs and axios
- Convert date label on Y-axis Line Chart to specific date format