https://www.alphenaandenrijn.nl/wro/chartbuilder.js

1
2var ChartBuilder=Class.create({initialize:function initialize(){$$('table.grafiek').each(function(table){let json=this.getJSON(table);if(json!=='undefined'&&json!==''){this.createCanvas(table,json);}}.bind(this));},getJSON:function getJSON(table){if(table.rows[0].cells.length!=2){return;}
3var json=[];for(var i=0;i<table.tBodies.length;i++){for(var j=0;j<table.tBodies[i].rows.length;j++){var rowData={};rowData['labels']=table.tBodies[i].rows[j].cells[0].innerHTML.trim();rowData['data']=table.tBodies[i].rows[j].cells[1].innerHTML.trim();json.push(rowData);}}
4return json;},getUuid:function getUUid(){return'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g,function(c){var r=Math.random()*16|0,v=c=='x'?r:(r&0x3|0x8);return v.toString(16);});},createCanvas:function createCanvas(table,json){var labels=json.map(function(e){return e.labels;});var values=json.map(function(e){return e.data;});values.push('');let id=this.getUuid();let placeholder=new Element('div',{class:"chart-container"}).insert(new Element('canvas',{id:id,width:640}));table.parentNode.insertBefore(placeholder,table);var ctx=$(id);var chart=this.createChart(labels,values,ctx,table.dataset.type);if(chart){let toggle_container=new Element('div').addClassName('toggle_container');toggle_container.insert(new Element('div').addClassName('toggle_heading').insert(new Element('div').addClassName('toggle_hidden_information').addClassName('blocktitle').update(table.caption!=='undefined'&&table.caption!==null?table.caption.innerText:"Gegevens")));toggle_container.insert(new Element('div').addClassName('hidden_information').insert(new Element('div').update(table.cloneNode(true))));if(table.hasClassName("dsedit")){Element.hide(table);}else{table.parentNode.replaceChild(toggle_container,table);}}},createChart:function createChart(labels,values,ctx,type){type=type||values.length>9?'horizontalBar':'pie';let defaultColors=['rgb(51,102,204)','rgb(220,57,18)','rgb(255,153,0)','rgb(16,150,24)','rgb(153,0,153)','rgb(0,153,198)','rgb(221,68,119)','rgb(102,170,0)'];let defaultsingleColor='rgb(43,87,154, 0.5)';if(type=='horizontalBar'){ctx.height=values.length*(ctx.height/5);}
5if(type=='pie'){ctx.height=200;}
6var myChart=new Chart(ctx.getContext('2d'),{type:type,data:{labels:labels,datasets:[{data:values,backgroundColor:type=='pie'?defaultColors:defaultsingleColor,}]},options:{title:{display:false},legend:{display:type=='pie'?true:false,position:'left',},tooltips:{enabled:false,},responsive:false,maintainAspectRatio:true,scales:{xAxes:[{display:type=='pie'?false:true,ticks:{stepSize:1}}],yAxes:[{display:type=='pie'?false:true,ticks:{stepSize:1}}]}}});return myChart;}});function loadChartJs(callback){if(window.Chart){callback();return;}
7var script=document.createElement('script');script.src=contextpath+'/js/lib/Chart.min.js';script.onload=callback;script.onerror=function(){console.error('Chart.js kon niet geladen worden');};document.getElementsByTagName('head')[0].appendChild(script);}
8document.observe('dom:loaded',function domloaded(){if($$('table.grafiek').length===0){return;}
9loadChartJs(function chartJsLoaded(){try{Chart.platform.disableCSSInjection=true;new ChartBuilder();}catch(e){console.error(e);}});});