jquery - Populate colors on a Chart.js chart dynamically -


i have vue application using chart.js. trying dynamically populate chart data in table row click event. have data displaying in chart, trying figure out how random colors it. suggestions?

this function looks like:

var ctx = document.getelementbyid("mydoughnut"); var mydoughnut = new chart(ctx, {     type: 'doughnut',     data: {         labels: this.getanalyticrow[0].rownames,         datasets: [{             data: this.getanalyticrow[0].rowdata,             backgroundcolor: [                 'rgba(255, 99, 132, 0.6)',                 'rgba(54, 162, 235, 0.6)',                 'rgba(255, 206, 86, 0.6)',                 'rgba(75, 192, 192, 0.6)',                 'rgba(153, 102, 255, 0.6)'             ],             bordercolor: [                 'rgba(255,99,132,1)',                 'rgba(54, 162, 235, 1)',                 'rgba(255, 206, 86, 1)',                 'rgba(75, 192, 192, 1)',                 'rgba(153, 102, 255, 1)',                 'rgba(255, 159, 64, 1)'             ],             borderwidth: 2,         }]     },     options: {         responsive: true,         defaultfontcolor: '#ffffff',     }

this chart:

chart


Comments

Post a Comment

Popular posts from this blog

javascript - Create a stacked percentage column -

i have collection of data : var data = [ {"p301a":"10","p301b":"7","p301c":"7","p301d":"3","p301e":"8","p301f":"8","p301g":"8","p301h":"8","p301i":"8","p301j":"8","p301k":"8","p301l":"8","p301m":"8","p301n":"8","p301o":"8","age":"31-40 years","profesion":"2","position":"2"}, {"p301a":"5","p301b":"4","p301c":"4","p301d":"4","p301e":"4","p301f":"4","p301g":"4","p301h":"4","p301i":"4","p301j":"4","p301k":"4...
Read more

Optimising Firebase database by automatically overwriting data -

in firebase app have following structure: posts latest all users can write posts > latest . want limit entries 20 posts save space in database. , posts beyond 20 unnecessary never shown on homepage. how can limit posts 20, when user writes posts > latest posts @ end drop off (be deleted) automatically? this sample should you. you need : const max_log_count = 20; exports.removeold = functions.database.ref('/posts/latest/{postid}').oncreate(event => { const parentref = event.data.ref.parent; return parentref.once('value').then(snapshot => { if (snapshot.numchildren() >= max_log_count) { let childcount = 0; const updates = {}; snapshot.foreach(function(child) { if (++childcount <= snapshot.numchildren() - max_log_count) { updates[child.key] = null; } }); // update parent. removes children. ...
Read more

vue.js - Create hooks for automated testing -

Image
qa guys complained can't automate frontend testing. because our html looks same outside. lazy hack did this <template> <div :role="$options.name"> ... </div> </template> <script> export default { name: 'vmcomponentname' } </script> which takes name script , applies html. in browser get: <div role="vmcomponentname"> ... </div> line :role="$options.name" goes in every component. is there dry er solutions? please share. additional details i'll explain in details looking for. imagine have vmusercreate form creates user. test case can create user . to automatically test without role, have use following selector: .wrapper > .wrapper > .wrapper > .submit-button the test extremely brittle (will break lot). if use roles can use [role="vmusercreateform"] .submit-button selector. many folds less brittle. so basically, i'm ...
Read more