Initializing...
Liveweave
expand_more
home
Home
data_object
CSS Explorer
arrow_outward
Palette
Color Explorer
arrow_outward
Polyline
Graphics Editor
arrow_outward
outbox_alt
Generative AI
arrow_outward
build
Tools
expand_more
restart_alt
Load base template
post_add
Generate Lorem ipsum...
code
Format HTML
code_blocks
Format CSS
data_object
Format JavaScript
library_add
Library
expand_more
A
Algolia JS
Animate CSS
Apex Charts JS
B
Bulma CSS
Bootstrap
C
Chart JS
Chartist
Create JS
D
D3
Dojo
F
Foundation
Fullpage JS
G
Granim JS
Google Charts
H
Halfmoon
J
jQuery
M
Materialize
Moment JS
Masonry JS
Milligram CSS
P
Pure CSS
Primer CSS
Popper JS
Pattern CSS
Picnic CSS
R
React JS
Raphael JS
Raisin CSS
S
Semantic UI
Skeleton CSS
Spectre CSS
Tachyons CSS
T
Tailwind
Three JS
U
UI Kit
Vis JS
W
Water CSS
download
Download
expand_more
developer_mode
Download as HTML
folder_zip
Download as .ZIP
cloud_upload
Save
account_circle
Login
settings
Settings
expand_more
14
px
Live mode
Night mode
Line number
Mini map
Word wrap
sync_alt
Reset Settings
smart_display
Run
<!DOCTYPE html> <html> <head> <title>HTML5, CSS3 and JavaScript demo</title> <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.0/Chart.bundle.min.js"></script> <script src="https://cdn.rawgit.com/caffeinatedMike/ChartNew.js/master/ChartNew.js"></script> <script src="https://cdn.rawgit.com/caffeinatedMike/ChartNew.js/master/Add-ins/shapesInChart.js"></script> <script> window.onload = function() { Chart.pluginService.register({ afterUpdate: function (chart) { if (chart.config.options.elements.center) { var helpers = Chart.helpers; var centerConfig = chart.config.options.elements.center; var globalConfig = Chart.defaults.global; var ctx = chart.chart.ctx; var fontStyle = helpers.getValueOrDefault(centerConfig.fontStyle, globalConfig.defaultFontStyle); var fontFamily = helpers.getValueOrDefault(centerConfig.fontFamily, globalConfig.defaultFontFamily); if (centerConfig.fontSize) var fontSize = centerConfig.fontSize; // figure out the best font size, if one is not specified else { ctx.save(); var fontSize = helpers.getValueOrDefault(centerConfig.minFontSize, 1); var maxFontSize = helpers.getValueOrDefault(centerConfig.maxFontSize, 256); var maxText = helpers.getValueOrDefault(centerConfig.maxText, centerConfig.text); do { ctx.font = helpers.fontString(fontSize, fontStyle, fontFamily); var textWidth = ctx.measureText(maxText).width; // check if it fits, is within configured limits and that we are not simply toggling back and forth if (textWidth < chart.innerRadius * 2 && fontSize < maxFontSize) fontSize += 1; else { // reverse last step fontSize -= 1; break; } } while (true) ctx.restore(); } // save properties chart.center = { font: helpers.fontString(fontSize, fontStyle, fontFamily), fillStyle: helpers.getValueOrDefault(centerConfig.fontColor, globalConfig.defaultFontColor) }; } }, afterDraw: function (chart) { if (chart.center) { var centerConfig = chart.config.options.elements.center; var ctx = chart.chart.ctx; ctx.save(); ctx.font = chart.center.font; ctx.fillStyle = chart.center.fillStyle; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; var centerX = (chart.chartArea.left + chart.chartArea.right) / 2; var centerY = (chart.chartArea.top + chart.chartArea.bottom) / 2; ctx.fillText(centerConfig.text, centerX, centerY); ctx.restore(); } }, }) //Checking & Savings Accounts var config = { type: 'doughnut', data: { labels: [ "Savings", "Checking" ], datasets: [{ data: [35000, 5000], backgroundColor: [ "#FF6384", "#36A2EB" ], hoverBackgroundColor: [ "#FF6384", "#36A2EB" ] }] }, options: { //responsive:false, //maintainAspectRatio:false, //chartArea: {width: '100%', height: '80%', left: 0}, title: { fullWidth: false, display: true, text: 'Current Balance' }, legend: { position:'bottom', labels: { boxWidth:15 } }, elements: { center: { // the longest text that could appear in the center maxText: '$000000', text: '$40,000', fontColor: 'black', fontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif", fontStyle: 'normal', minFontSize: 1, maxFontSize: 256, } } } }; //This month's income & expenses var config2 = { type: 'doughnut', data: { labels: [ "Income", "Expenses" ], datasets: [{ data: [1100, 750], backgroundColor: [ "#FF6384", "#36A2EB" ], hoverBackgroundColor: [ "#FF6384", "#36A2EB" ] }] }, options: { //responsive:false, //maintainAspectRatio:false, //chartArea: {width: '100%', height: '80%', left: 0}, title: { fullWidth: false, display: true, text: 'Current Month' }, legend: { position:'bottom', labels: { boxWidth:15 } }, elements: { center: { // the longest text that could appear in the center maxText: '$0000', text: '$350', fontColor: 'green', fontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif", fontStyle: 'normal', minFontSize: 1, maxFontSize: 256, } } } }; var charJSPersonnalDefaultOptions = { decimalSeparator : "," , thousandSeparator : ".", roundNumber : "none", graphTitleFontSize: 2 }; defCanvasWidth=1200; defCanvasHeight=600; var mydata1 = { labels : ["2015","2016"], datasets : [ { data : [0,10], fillColor : "rgba(220,0,220,0.2)", title : "data1", }, { data : [10,0], fillColor : "rgba(220,0,220,0.2)", title : "data2", }, { data : [90,0], fillColor : "rgba(0,0,220,0.2)", title : "label for data3", }, { data : [0,50], fillColor : "rgba(220,0,220,0.2)", title : "data4", }, { data : [10,10], fillColor : "rgba(220,0,220,0.2)", title : "data5", }, { data : [24,80], fillColor : "rgba(220,0,0,0.2)", title : "data6", }, { data : [58,20], fillColor : "rgba(0,220,220,0.2)", title : "data7", }, { data : [18,0], fillColor : "rgba(0,220,0,0.2)", title : "data8", }, { data : [8,25], fillColor : "rgba(50,100,150,0.2)", title : "data9", } ] }; var opt1 = { endDrawDataFunction: drawShapes }; // add text around; function setXPos(typVal,i,j,k,txt,startAngle,endAngle,fontSize,position,truncLabel,inradius,outradius) { var nbcharRound=(inradius+position*(outradius-inradius))*2*Math.PI/(fontSize/2); var degPerChar=Math.ceil(10*360/nbcharRound)/10; var availableAngle=(180/Math.PI)*(endAngle-startAngle); var newText=txt; if(availableAngle<degPerChar*txt.length){ if(truncLabel==false) { if (typVal=="TEXT")return(""); else return(i); } else { newText=txt.substring(0,Math.floor(availableAngle/degPerChar)); if(k>=newText.length) { if (typVal=="TEXT")return(""); else return(i); } } } if(typVal=="TEXT")return(txt.substring(k,k+1)); var addAngle=(availableAngle-degPerChar*newText.length)/2+k*degPerChar+degPerChar/2; if(typVal=="X1") return(i-0.5+addAngle/availableAngle); if(typVal=="ROTATE")return ((180/Math.PI)*(startAngle)+addAngle+90); } ; function addRoundText(data,fontSize,position,truncLabel) { if(typeof data.shapesInChart!=="object")data.shapesInChart=[]; for(i=0;i<data.datasets.length;i++) { for(j=0;j<data.labels.length;j++) { tt=typeof (1*data.datasets[i].data[j]) ; if(tt!="number")continue; for(k=0;k<data.datasets[i].title.length;k++){ data.shapesInChart[data.shapesInChart.length]={ shape: "TEXT", iter : "last", text: "%eval(setXPos('TEXT',"+i+","+j+","+k+",'"+data.datasets[i].title+"',statData["+i+"]["+j+"].startAngle,statData["+i+"]["+j+"].endAngle,"+fontSize+","+position+","+truncLabel+",statData["+i+"]["+j+"].inRadius,statData["+i+"]["+j+"].outRadius);", fontSize : fontSize, textAlign : "center", textBaseline : "bottom", fontColor : "black", animate : false, x1: "%eval(setXPos('X1',"+i+","+j+","+k+",'"+data.datasets[i].title+"',statData["+i+"]["+j+"].startAngle,statData["+i+"]["+j+"].endAngle,"+fontSize+","+position+","+truncLabel+",statData["+i+"]["+j+"].inRadius,statData["+i+"]["+j+"].outRadius);", y1: position, posj: j, rotate: "%eval(setXPos('ROTATE',"+i+","+j+","+k+",'"+data.datasets[i].title+"',statData["+i+"]["+j+"].startAngle,statData["+i+"]["+j+"].endAngle,"+fontSize+","+position+","+truncLabel+",statData["+i+"]["+j+"].inRadius,statData["+i+"]["+j+"].outRadius);", paddingX1 : 0, paddingY1 : 0 } } } } }; var truncLabel=false; // -> true or false; position=0.70; // -> value between 0 and 1; addRoundText(mydata1,30,position,truncLabel); var myLine = new Chart(document.getElementById("gigEarnings").getContext("2d")).Pie(mydata1,opt1); var ctx = document.getElementById("myDoughnutChart").getContext("2d"); var myDoughnutChart = new Chart(ctx, config); var ctx2 = document.getElementById("myDoughnutChart2").getContext("2d"); var myDoughnutChart2 = new Chart(ctx2, config2); }; </script> <div class="section side-lg"> Fiverr - Current Balance+Pending Clearance in donut chart -Amount earned this month -Active Orders <div style="width:100%;height:100%;"> <canvas id="gigEarnings" width="100%" height="100%"></canvas> </div> </div> </head> <body> </body> </html>
// Write JavaScript here