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
- ChartJs multiaxis chart show different label bottom and top
- How i can refresh chart without refresh page?
- Legends for line charts in Chart.js
- Charts.js - Bar chart different colors for value intervals not working
- Incorrect time chart Chart.js
- Something similar to grace available in the latest chartJs for ChartJs 2.9.3
- How could i change my JSON structure into chartJS barchart JSON structure?
- How do I implement the 'autoskip' feature in chartjs?
- How to use segment property to color line / border color based on value in chart js?
- ChartJs canvas showing previous graph when changing Graph types
- how to add a title to my ng2-charts bar chart
- How to update chart.js using Javascript
- Chart.js Subtitle won't display
- chartjs-plugin-zoom: get currently visible values when the page first loads
- Chartjs - line chart display with addData() is bugged?
- How to access specific data values from tooltip - Chart.js
- Unexpected error when attempting to update chart data in Chart.js, in a Vue app
- OffsetWidth / offsetHeight is zero when template loaded by ngRoute
- chart.js cuts data points to half
- what are the differences between 'NgChartModule' and 'chartModues'?
- How do I prevent Chartjs tooltip callback returning multiple instances of the same value?
- Chartjs / Javascript - My function not returning array properly, but console logs okay
- ChartJS Polar Area Chart Scale Removing
- ng2-charts - Tolltip color dont match line color
- What is the correct way to send 2 parameters in socket.io using lambdas? (I get undefined when printing in client and server)
- ChartJS Line chart cut off at the top and bottom
- Chart.js multiple columns of data for the same label
- annotation line not visible in scatter chart in chartjs
- How to fetch data from Json file on charts(bar-chart/pie chart etc) in angular?
- findOne returns undefined in onRendered