KPI Dashboard
This example showcases a key performance indicator (KPI) dashboard built with a JavaScript spreadsheet UI. It includes embedded charts and progress bars for budget tracking and revenue insights, demonstrating how spreadsheet components can drive executive reporting tools.
<html>
<link rel="stylesheet" href="https://jspreadsheet.com/v12/jspreadsheet.css" type="text/css" />
<link rel="stylesheet" href="https://jsuites.net/v6/jsuites.css" type="text/css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jspreadsheet/charts/dist/style.min.css" type="text/css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lemonadejs/studio/dist/style.min.css" type="text/css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons" />
<script src="https://jspreadsheet.com/v12/jspreadsheet.js"></script>
<script src="https://jsuites.net/v6/jsuites.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@lemonadejs/studio/dist/index.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@jspreadsheet/formula-pro/dist/index.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@jspreadsheet/charts/dist/index.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@jspreadsheet/formula-charts@4.0.0/dist/index.min.js"></script>
<div id="spreadsheet"></div>
<script>
// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('OTQwZDc1Zjg3ODlkZjJhMDM1YzFmY2RjYmFlNGRhNGM0YmIwOTUwNzcyNWM3OWE4ZGU0OTM5NTg2NmY5MjJjOTA4NjUxODA1OTVkZTcwYzA3MGVjOGMwNWYwZjNkZGRhZjZmYTVlMDhiNmUwYWVjNmFmOGI2M2RjZTA2MjZmNzUsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94Tnpjd09EQTBNakkzTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElpd2ljR2wyYjNRaVhTd2laR1Z0YnlJNmRISjFaWDA9');
jspreadsheet.setExtensions({ formula, charts });
// Create the spreadsheet
jspreadsheet(document.getElementById('spreadsheet'), {
style: [
"font-size: 29px;font-weight: bold;font-family: Century Gothic;color: #595959;vertical-align: middle;",
"font-size: 16px;font-family: Arial;color: #000000;",
"font-size: 29px;font-family: Century Gothic;color: #595959;vertical-align: middle;",
"background-color: #595959;font-size: 19px;font-family: Century Gothic;color: #FFFFFF;text-align: center;vertical-align: middle;white-space: break-spaces;border-left: 1px solid #BFBFBF;border-right: 1px solid #BFBFBF;border-top: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #595959;font-size: 19px;font-family: Century Gothic;color: #FFFFFF;text-align: center;vertical-align: middle;white-space: break-spaces;border-right: 1px solid #BFBFBF;border-top: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #70AD47;font-size: 19px;font-family: Century Gothic;color: #FFFFFF;text-align: center;vertical-align: middle;white-space: break-spaces;border-right: 1px solid #BFBFBF;border-top: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #009844;font-size: 19px;font-family: Century Gothic;color: #FFFFFF;text-align: center;vertical-align: middle;white-space: break-spaces;border-right: 1px solid #BFBFBF;border-top: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #2E75B6;font-size: 19px;font-family: Century Gothic;color: #FFFFFF;text-align: center;vertical-align: middle;white-space: break-spaces;border-right: 1px solid #BFBFBF;border-top: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #806000;font-size: 19px;font-family: Century Gothic;color: #FFFFFF;text-align: center;vertical-align: middle;white-space: break-spaces;border-right: 1px solid #BFBFBF;border-top: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #595959;font-size: 16px;font-weight: bold;font-family: Century Gothic;color: #FFFFFF;text-align: center;vertical-align: middle;border-left: 1px solid #BFBFBF;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #595959;font-size: 13px;font-weight: bold;font-family: Century Gothic;color: #FFFFFF;text-align: center;vertical-align: middle;white-space: break-spaces;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #92D050;font-size: 13px;font-weight: bold;font-family: Century Gothic;color: #FFFFFF;text-align: center;vertical-align: middle;white-space: break-spaces;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #79AE40;font-size: 13px;font-weight: bold;font-family: Century Gothic;color: #FFFFFF;text-align: center;vertical-align: middle;white-space: break-spaces;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #5B9BD5;font-size: 13px;font-weight: bold;font-family: Century Gothic;color: #FFFFFF;text-align: center;vertical-align: middle;white-space: break-spaces;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #D6A000;font-size: 13px;font-weight: bold;font-family: Century Gothic;color: #FFFFFF;text-align: center;vertical-align: middle;white-space: break-spaces;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #F2F2F2;font-size: 13px;font-family: Century Gothic;color: #000000;text-align: center;vertical-align: middle;border-left: 1px solid #BFBFBF;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #F2F2F2;font-size: 13px;font-family: Century Gothic;color: #000000;text-align: center;vertical-align: middle;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"font-size: 13px;font-family: Century Gothic;color: #000000;text-align: center;vertical-align: middle;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #E2F0D9;font-size: 13px;font-family: Century Gothic;color: #000000;text-align: center;vertical-align: middle;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #D0E08D;font-size: 13px;font-family: Century Gothic;color: #000000;text-align: center;vertical-align: middle;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #DEEBF7;font-size: 13px;font-family: Century Gothic;color: #000000;text-align: center;vertical-align: middle;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #FFF2CC;font-size: 13px;font-family: Century Gothic;color: #000000;text-align: center;vertical-align: middle;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #F2F2F2;font-size: 16px;font-family: Century Gothic;color: #000000;text-align: center;vertical-align: middle;border-left: 1px solid #BFBFBF;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #F2F2F2;font-size: 16px;font-family: Century Gothic;color: #000000;text-align: center;vertical-align: middle;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"font-size: 13px;font-weight: bold;font-family: Century Gothic;color: #00B050;text-align: center;vertical-align: middle;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"font-size: 13px;font-weight: bold;font-family: Century Gothic;color: #009844;text-align: center;vertical-align: middle;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"font-size: 13px;font-weight: bold;font-family: Century Gothic;color: #385724;text-align: center;vertical-align: middle;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"font-size: 13px;font-weight: bold;font-family: Century Gothic;color: #806000;text-align: center;vertical-align: middle;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #C55A11;font-size: 13px;font-weight: bold;font-family: Century Gothic;color: #FFFFFF;text-align: center;vertical-align: middle;white-space: break-spaces;border-left: 1px solid #BFBFBF;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #C55A11;font-size: 13px;font-weight: bold;font-family: Century Gothic;color: #FFFFFF;text-align: center;vertical-align: middle;white-space: break-spaces;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"font-size: 13px;font-family: Century Gothic;color: #000000;text-align: center;vertical-align: middle;border-left: 1px solid #BFBFBF;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #FBE5D6;font-size: 13px;font-family: Century Gothic;color: #000000;text-align: center;vertical-align: middle;border-left: 1px solid #BFBFBF;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #FBE5D6;font-size: 13px;font-family: Century Gothic;color: #000000;text-align: center;vertical-align: middle;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"font-size: 16px;font-family: Arial;color: #000000;text-align: center;",
"font-size: 16px;font-weight: bold;font-family: Calibri;color: #000000;",
"font-size: 16px;font-family: Calibri;color: #000000;",
"font-size: 16px;font-family: Calibri;color: #000000;text-align: center;",
"",
"font-size:16px;font-family:Arial;color:#000000;background-color:#fb8c00",
"background-color:#70AD47;font-size:19px;font-family:Century Gothic;color:#FFFFFF;text-align:center;vertical-align:middle;white-space:break-spaces;border-top:1px solid #eeeeee;border-left:1px solid #eeeeee",
"background-color:#2E75B6;font-size:19px;font-family:Century Gothic;color:#FFFFFF;text-align:center;vertical-align:middle;white-space:break-spaces;border-top:1px solid #eeeeee;border-left:1px solid #eeeeee",
"background-color:#2E75B6;font-size:19px;font-family:Century Gothic;color:#FFFFFF;text-align:center;vertical-align:middle;white-space:break-spaces;border-right:1px solid #eeeeee;border-top:1px solid #eeeeee;border-left:1px solid #eeeeee",
"background-color:#92D050;font-size:13px;font-weight:bold;font-family:Century Gothic;color:#FFFFFF;text-align:center;vertical-align:middle;white-space:break-spaces;border-top:1px solid #eeeeee;border-left:1px solid #eeeeee",
"background-color:#5B9BD5;font-size:13px;font-weight:bold;font-family:Century Gothic;color:#FFFFFF;text-align:center;vertical-align:middle;white-space:break-spaces;border-top:1px solid #eeeeee;border-left:1px solid #eeeeee",
"background-color:#5B9BD5;font-size:13px;font-weight:bold;font-family:Century Gothic;color:#FFFFFF;text-align:center;vertical-align:middle;white-space:break-spaces;border-right:1px solid #eeeeee;border-top:1px solid #eeeeee;border-left:1px solid #eeeeee",
"font-size:13px;font-weight:bold;font-family:Century Gothic;color:#00B050;text-align:center;vertical-align:middle;border-bottom:1px solid #eeeeee;border-top:1px solid #eeeeee;border-left:1px solid #eeeeee",
"font-size:13px;font-weight:bold;font-family:Century Gothic;color:#385724;text-align:center;vertical-align:middle;border-bottom:1px solid #eeeeee;border-top:1px solid #eeeeee;border-left:1px solid #eeeeee",
"font-size:13px;font-weight:bold;font-family:Century Gothic;color:#385724;text-align:center;vertical-align:middle;border-right:1px solid #eeeeee;border-bottom:1px solid #eeeeee;border-top:1px solid #eeeeee;border-left:1px solid #eeeeee"
],
tableOverflow: true,
tableWidth: '1360',
tableHeight: '620',
resizable: true,
worksheets: [
{
data: [
["KPI DASHBOARD DATA", "", "", "", "", "", "", "", "", "", "", ""],
["Products","","Budget","","","Net Expenses","","Revenue","","","Profit Margins",""],
["N.º","NAME","TARGET","ACTUAL","REMAINING","EXTRA","TOTAL","TARGET","ACTUAL","REMAINING","GROSS","NET"],
[1,"PRODUCT 1",160344,259757.28000000003,"=(D4-C4)",16007,"=F4+E4",500916,1073357,"=H4-I4","=(J4-E4)/J4","=(J4-H4)/J4"],
[2,"PRODUCT 2",200816,311264.8,"=(D5-C5)",14816,"=F5+E5",215534,878162,"=H5-I5","=(J5-E5)/J5","=(J5-H5)/J5"],
[3,"PRODUCT 3",170989,237674.71,"=(D6-C6)",17057,"=F6+E6",820719,1193784,"=H6-I6","=(J6-E6)/J6","=(J6-H6)/J6"],
[4,"PRODUCT 4",281053,61831.66,"=(D7-C7)",17459,"=F7+E7",620242,420345,"=H7-I7","=(J7-E7)/J7","=(J7-H7)/J7"],
[5,"PRODUCT 5",262319,459058.25,"=(D8-C8)",13985,"=F8+E8",821177,1175811,"=H8-I8","=(J8-E8)/J8","=(J8-H8)/J8"],
[6,"PRODUCT 6",206881,157229.56,"=(D9-C9)",11183,"=F9+E9",901263,1015766,"=H9-I9","=(J9-E9)/J9","=(J9-H9)/J9"],
[7,"PRODUCT 7",130194,213518.15999999997,"=(D10-C10)",17111,"=F10+E10",878528,733751,"=H10-I10","=(J10-E10)/J10","=(J10-H10)/J10"],
[8,"PRODUCT 8",208451,214704.53,"=(D11-C11)",16494,"=F11+E11",838380,955983,"=H11-I11","=(J11-E11)/J11","=(J11-H11)/J11"],
[9,"PRODUCT 9",206422,177522.91999999998,"=(D12-C12)",17311,"=F12+E12",1073157,924095,"=H12-I12","=(J12-E12)/J12","=(J12-H12)/J12"],
[10,"PRODUCT 10",251504,2515.04,"=(D13-C13)",17315,"=F13+E13",941047,1061074,"=H13-I13","=(J13-E13)/J13","=(J13-H13)/J13"],
["","","=SUM(C4:C13)","=SUM(D4:D13)","=SUM(E4:E13)","=SUM(F4:F13)","=SUM(G4:G13)","=SUM(H4:H13)","=SUM(I4:I13)","=SUM(J4:JK13)","=SUM(K4:K13)/10","=SUM(L4:L13)/10"],
["", "", "", "", "", "", "", "", "", "", "", ""],
["","","","LIABILITIES / EQUITY RATIO","","","","Budget","","Revenue","",""],
["","","","CALENDAR","LIABILITIES","EQUITY","","TARGET","ACTUAL","TARGET","ACTUAL",""],
["","","",2027,3613439,3293202,"","=SUM(C4:C13)","=SUM(D4:D13)","=SUM(H4:H13)","=SUM(I4:I13)",""],
["", "", "", 2028, 3508776, 3441854, "", "", "", "", "", ""],
["", "", "", 2029, 3719457, 3531844, "", "", "", "", "", ""],
["", "", "", 2030, 3310212, 3354051, "", "", "", "", "", ""],
["", "", "", 2031, 3945202, 3476155, "", "", "", "", "", ""],
["", "", "", 2032, 3938152, 3538468, "", "", "", "", "", ""],
["", "", "", 2033, 3733706, 3727037, "", "", "", "", "", ""],
["", "", "", 2034, 3526698, 3425405, "", "", "", "", "", ""],
["", "", "", 2035, 3632971, 3734041, "", "", "", "", "", ""],
["", "", "", 2036, 3206487, 3677074, "", "", "", "", "", ""]
],
columns: [
{ "width": 44, "type": "text", "align": "left" },
{ "width": 190, "type": "text", "align": "left" },
{ "width": 97, "type": "numeric", "align": "left", "mask": "$#,##0" },
{ "width": 86, "type": "numeric", "align": "left", "mask": "$#,##0" },
{ "width": 103, "type": "numeric", "align": "left", "mask": "$#,##0" },
{ "width": 101, "type": "numeric", "align": "left", "mask": "$#,##0" },
{ "width": 86, "type": "numeric", "align": "left", "mask": "$#,##0" },
{ "width": 86, "type": "numeric", "align": "left", "mask": "$#,##0" },
{ "width": 97, "type": "numeric", "align": "left", "mask": "$#,##0" },
{ "width": 107, "type": "numeric", "align": "left", "mask": "$#,##0" },
{ "width": 86, "type": "numeric", "align": "left", "mask": "0%" },
{ "width": 86, "type": "numeric", "align": "left", "mask": "0%" }
],
cells: {
"D18": { "format": "0" },
"E18": { "format": "0" },
"H18": { "format": "$#,##0" },
"K18": { "format": "$#,##0" },
"D19": { "format": "0" },
"E19": { "format": "0" },
"D20": { "format": "0" },
"E20": { "format": "0" },
"D21": { "format": "0" },
"E21": { "format": "0" },
"D22": { "format": "0" },
"E22": { "format": "0" },
"D23": { "format": "0" },
"E23": { "format": "0" },
"D24": { "format": "0" },
"E24": { "format": "0" },
"D25": { "format": "0" },
"E25": { "format": "0" },
"D26": { "format": "0" },
"E26": { "format": "0" },
"D27": { "format": "0" },
"E27": { "format": "0" }
},
style: {
"A1:J1": 2,
"K1:L1": 1,
"A2": 3,
"B2": 4,
"C2:E2": 5,
"F2:G2": 6,
"H2:J2": 7,
"K2:L2": 8,
"A3": 9,
"B3": 10,
"C3:E3": 11,
"F3:G3": 12,
"H3:J3": 13,
"K3:L3": 14,
"A4": 15,
"B4": 16,
"C4:L4": 17,
"A5": 15,
"B5": 16,
"C5:E5": 18,
"F5:G5": 19,
"H5:J5": 20,
"K5:L5": 21,
"A6": 15,
"B6": 16,
"C6:L6": 17,
"A7": 15,
"B7": 16,
"C7:E7": 18,
"F7:G7": 19,
"H7:J7": 20,
"K7:L7": 21,
"A8": 15,
"B8": 16,
"C8:L8": 17,
"A9": 15,
"B9": 16,
"C9:E9": 18,
"F9:G9": 19,
"H9:J9": 20,
"K9:L9": 21,
"A10": 15,
"B10": 16,
"C10:L10": 17,
"A11": 15,
"B11": 16,
"C11:E11": 18,
"F11:G11": 19,
"H11:J11": 20,
"K11:L11": 21,
"A12": 15,
"B12": 16,
"C12:L12": 17,
"A13": 15,
"B13": 16,
"C13:E13": 18,
"F13:G13": 19,
"H13:J13": 20,
"K13:L13": 21,
"A14": 22,
"B14": 23,
"C14:E14": 24,
"F14:G14": 25,
"H14:J14": 26,
"K14:L14": 27,
"C15:L15": 1,
"C16": 1,
"D16:F16": 38,
"G16": 1,
"H16:I16": 39,
"J16": 40,
"K16": 41,
"L16": 1,
"C17": 1,
"D17:E17": 28,
"F17": 29,
"G17": 1,
"H17:I17": 42,
"J17": 43,
"K17": 44,
"L17": 1,
"C18": 1,
"D18:E18": 30,
"F18": 17,
"G18": 1,
"H18:I18": 45,
"J18": 46,
"K18": 47,
"L18": 1,
"C19": 1,
"D19:E19": 31,
"F19": 32,
"G19:L19": 1,
"H19:I19": 33,
"C20": 1,
"D20:E20": 30,
"F20": 17,
"G20": 1,
"H20:I20": 33,
"J20": 34,
"C21": 1,
"D21:E21": 31,
"F21": 32,
"G21": 1,
"H21:I21": 33,
"J21": 34,
"M21": 35,
"D22:E22": 30,
"F22": 17,
"H22:I22": 36,
"J22": 34,
"D23:E23": 31,
"F23": 32,
"H23": 33,
"I23": 36,
"J23": 34,
"D24:E24": 30,
"F24": 17,
"H24:I24": 36,
"J24": 34,
"D25:E25": 31,
"F25": 32,
"J25": 34,
"D26:E26": 30,
"F26": 17,
"J26": 34,
"D27:E27": 31,
"F27": 32,
"J27": 34
},
textOverflow: true,
stripHTML: false,
defaultColAlign: "left",
worksheetName: "KPI Data",
defaultRowHeight: 43,
defaultColWidth: 79,
gridline: false,
tableOverflow: true,
minDimensions: [12, 27],
mergeCells: {
"A1": [10, 1],
"A2": [2, 1],
"C2": [3, 1],
"F2": [2, 1],
"H2": [3, 1],
"K2": [2, 1],
"D16": [3, 1]
},
},
{
data: [["","KPI DASHBOARD","","","","","","","","","","","","","","",""]],
columns: [
{ "width": 24, "type": "text", "align": "left" },
{ "type": "text", "width": 62, "align": "left" },
{ "type": "text", "width": 62, "align": "left" },
{ "width": 62, "type": "text", "align": "left" },
{ "width": 62, "type": "text", "align": "left" },
{ "width": 62, "type": "text", "align": "left" },
{ "width": 62, "type": "text", "align": "left" },
{ "width": 62, "type": "text", "align": "left" },
{ "type": "text", "width": 15, "align": "left" },
{ "type": "text", "width": 60, "align": "left" },
{ "width": 60, "type": "text", "align": "left" },
{ "width": 60, "type": "text", "align": "left" },
{ "type": "text", "width": 60, "align": "left" },
{ "type": "text", "width": 60, "align": "left" },
{ "type": "text", "width": 60, "align": "left" },
{ "type": "text", "width": 60, "align": "left" },
{ "type": "text", "width": 38, "align": "left" }
],
rows: [
{ "height": 77 },
{ "height": 29 },
{ "height": 29 },
{ "height": 29 },
{ "height": 29 },
{ "height": 29 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 118, "id": null },
{ "height": 71, "id": null },
{ "height": 58, "id": null },
{ "height": 51, "id": null },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 36 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 29 },
{ "height": 190 },
{ "height": 147 },
{ "height": 127 },
{ "height": 118 },
{ "height": 30 }
],
style: {
"B1:J1": 0,
"K1:M1": 1,
"A31": 37,
"B31:Q31": 35
},
textOverflow: true,
stripHTML: false,
defaultColAlign: "left",
worksheetName: "KPI Dashboard",
defaultColWidth: 79,
gridline: false,
tableOverflow: true,
freezeRowControl: true,
freezeColumnControl: true,
freezeRows: [0],
minDimensions: [17, 42],
mergeCells: {
"B1": [9, 1],
"B17": [7, 4],
"J17": [7, 4],
"B38": [15, 4]
},
media: [
{
"id": "19bb08c4-6a32-441b-90e5-9db66be86313",
"type": "chart",
"options": {
"type": "bar",
"range": "'KPI Data'!C3:E13",
"labels": 0,
"datasets": [1, 0],
"title": {
"text": "BUDGET",
"font": { "size": 40, "color": "#2E75B6" }
},
"legend": {
"position": "bottom",
"display": true,
"labels": { "font": { "color": "#000000", "size": 13 } }
},
"series": [
{ "color": "#92D050", "xAxis": "top" },
{ "color": "#00B050", "xAxis": "top" }
],
"axis": {
"base": {
"reverse": false,
"grid": { "display": false },
"ticks": { "display": false },
"labels": { "display": false }
},
"side2": {
"grid": { "width": 1, "color": "#D9D9D9" },
"ticks": { "width": 1, "length": 8 },
"labels": { "size": 15, "color": "#000000" },
"max": 500000,
"forceTheLimits": true
}
}
},
"cellAnchor": "B2",
"left": 0,
"top": 0,
"width": 434,
"height": 408,
"zIndex": 3,
"rotate": 0
},
{
"id": "afed067c-148d-42e1-aff6-49c328d7a22c",
"type": "chart",
"options": {
"type": "bar",
"range": "'KPI Data'!H3:J13",
"labels": 0,
"datasets": [1, 0],
"title": {
"text": "REVENUE",
"font": { "size": 40, "color": "#2E75B6" }
},
"legend": {
"position": "bottom",
"display": true,
"labels": { "font": { "color": "#000000", "size": 13 } }
},
"series": [
{ "color": "#B4C7E7", "xAxis": "top" },
{ "color": "#2E75B6", "xAxis": "top" }
],
"axis": {
"base": {
"reverse": false,
"grid": { "display": false },
"ticks": { "display": false },
"labels": { "display": false }
},
"side2": {
"grid": { "width": 1, "color": "#D9D9D9" },
"ticks": { "width": 1, "length": 8 },
"labels": { "size": 15, "color": "#000000" },
"min": 0,
"max": 1250000,
"forceTheLimits": true
}
}
},
"cellAnchor": "J2",
"left": 0,
"top": 0,
"width": 421,
"height": 408,
"zIndex": 3,
"rotate": 0
},
{
"type": "chart",
"width": 434,
"height": 300,
"options": {
"type": "bar",
"range": "'KPI DATA'!H17:I18",
"title": { "text": "TOTAL BUDGET", "position": "top" },
"legend": { "position": "bottom", "display": true },
"series": [
{ "color": "#B4C7E7", "xAxis": "top" },
{ "color": "#2E75B6", "xAxis": "top" }
]
},
"id": "717cc7d8-abbe-4842-b394-b64ad59ed550",
"top": 0,
"left": 0,
"cellAnchor": "B17",
"zIndex": 4,
"rotate": 0
},
{
"type": "chart",
"width": 420,
"height": 300,
"options": {
"type": "bar",
"range": "'KPI DATA'!J17:K18",
"title": { "text": "TOTAL REVENUE", "position": "top" },
"legend": { "position": "bottom", "display": true },
"series": [
{ "color": "#92D050", "xAxis": "top" },
{ "color": "#00B050", "xAxis": "top" }
]
},
"id": "fd82c8d4-0409-4eab-8033-e09f7bc9d8cd",
"top": 0,
"left": 0,
"cellAnchor": "J17",
"zIndex": 4,
"rotate": 0
},
{
"id": "df9ad462-1f05-46af-8b3f-d3d2a11e1212",
"type": "chart",
"options": {
"type": "line",
"range": "'KPI DATA'!K3:L13",
"labels": 0,
"title": {
"text": "PROFIT MARGINS",
"position": "top",
"font": { "size": 40, "color": "#2E75B6" }
},
"legend": {
"position": "bottom",
"display": true,
"labels": { "font": { "color": "#000000", "size": 13 } }
},
"series": [
{
"drawNullValues": false,
"borderColor": "#4472C4",
"line": { "width": 1 },
"color": "#00B0F0",
"point": { "style": "circle", "radius": 7 }
},
{
"drawNullValues": false,
"borderColor": "#FFC000",
"line": { "width": 1 },
"color": "#ED7D31",
"point": { "style": "circle", "radius": 5.5 }
}
],
"axis": {
"base": {
"grid": { "display": false },
"ticks": { "display": false },
"labels": { "display": false }
},
"side": {
"grid": { "width": 1 },
"ticks": { "width": 1, "length": 8 },
"labels": { "size": 16, "color": "#000000" },
"forceTheLimits": true
}
}
},
"cellAnchor": "B22",
"left": 0,
"top": 0,
"width": 873,
"height": 444,
"zIndex": 3,
"rotate": 0
},
{
"type": "chart",
"width": 870,
"height": 584,
"options": {
"type": "column",
"range": "'KPI DATA'!D17:F27",
"labels": 0,
"datasets": [1, 2],
"title": {
"text": "LIABILITIES vs EQUITY per Year",
"position": "top"
},
"legend": { "position": "bottom", "display": true },
"series": [
{ "color": "#ED7D31", "xAxis": "bottom" },
{ "color": "#00B050", "xAxis": "bottom" }
]
},
"id": "a1699cf7-e71c-45d5-91a2-4a47c195bb33",
"top": 0,
"left": 0,
"cellAnchor": "B38",
"zIndex": 4,
"rotate": 0
}
],
}
],
bar: true,
toolbar: true,
onload: function(instance) {
instance.openWorksheet(1);
}
});
</script>
</html>
import React, { useEffect, useRef } from 'react';
import jspreadsheet from 'jspreadsheet';
import formula from '@jspreadsheet/formula-pro';
import charts from '@jspreadsheet/charts';
import studio from '@lemonadejs/studio';
import chartjs from '@jspreadsheet/formula-charts';
import '@lemonadejs/studio';
import '@lemonadejs/studio/dist/style.css';
import 'jsuites/dist/jsuites.css';
import 'jspreadsheet/dist/jspreadsheet.css';
import '@jspreadsheet/formula-charts';
import '@jspreadsheet/charts/dist/style.css';
import './App.css';
export default function App() {
const spreadsheetRef = useRef(null);
useEffect(() => {
// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('OTQwZDc1Zjg3ODlkZjJhMDM1YzFmY2RjYmFlNGRhNGM0YmIwOTUwNzcyNWM3OWE4ZGU0OTM5NTg2NmY5MjJjOTA4NjUxODA1OTVkZTcwYzA3MGVjOGMwNWYwZjNkZGRhZjZmYTVlMDhiNmUwYWVjNmFmOGI2M2RjZTA2MjZmNzUsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94Tnpjd09EQTBNakkzTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElpd2ljR2wyYjNRaVhTd2laR1Z0YnlJNmRISjFaWDA9');
jspreadsheet.setExtensions({ formula, charts });
const instance = jspreadsheet(spreadsheetRef.current, {
style: [
"font-size: 29px;font-weight: bold;font-family: Century Gothic;color: #595959;vertical-align: middle;",
"font-size: 16px;font-family: Arial;color: #000000;",
"font-size: 29px;font-family: Century Gothic;color: #595959;vertical-align: middle;",
"background-color: #595959;font-size: 19px;font-family: Century Gothic;color: #FFFFFF;text-align: center;vertical-align: middle;white-space: break-spaces;border-left: 1px solid #BFBFBF;border-right: 1px solid #BFBFBF;border-top: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #595959;font-size: 19px;font-family: Century Gothic;color: #FFFFFF;text-align: center;vertical-align: middle;white-space: break-spaces;border-right: 1px solid #BFBFBF;border-top: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #70AD47;font-size: 19px;font-family: Century Gothic;color: #FFFFFF;text-align: center;vertical-align: middle;white-space: break-spaces;border-right: 1px solid #BFBFBF;border-top: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #009844;font-size: 19px;font-family: Century Gothic;color: #FFFFFF;text-align: center;vertical-align: middle;white-space: break-spaces;border-right: 1px solid #BFBFBF;border-top: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #2E75B6;font-size: 19px;font-family: Century Gothic;color: #FFFFFF;text-align: center;vertical-align: middle;white-space: break-spaces;border-right: 1px solid #BFBFBF;border-top: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #806000;font-size: 19px;font-family: Century Gothic;color: #FFFFFF;text-align: center;vertical-align: middle;white-space: break-spaces;border-right: 1px solid #BFBFBF;border-top: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #595959;font-size: 16px;font-weight: bold;font-family: Century Gothic;color: #FFFFFF;text-align: center;vertical-align: middle;border-left: 1px solid #BFBFBF;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #595959;font-size: 13px;font-weight: bold;font-family: Century Gothic;color: #FFFFFF;text-align: center;vertical-align: middle;white-space: break-spaces;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #92D050;font-size: 13px;font-weight: bold;font-family: Century Gothic;color: #FFFFFF;text-align: center;vertical-align: middle;white-space: break-spaces;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #79AE40;font-size: 13px;font-weight: bold;font-family: Century Gothic;color: #FFFFFF;text-align: center;vertical-align: middle;white-space: break-spaces;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #5B9BD5;font-size: 13px;font-weight: bold;font-family: Century Gothic;color: #FFFFFF;text-align: center;vertical-align: middle;white-space: break-spaces;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #D6A000;font-size: 13px;font-weight: bold;font-family: Century Gothic;color: #FFFFFF;text-align: center;vertical-align: middle;white-space: break-spaces;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #F2F2F2;font-size: 13px;font-family: Century Gothic;color: #000000;text-align: center;vertical-align: middle;border-left: 1px solid #BFBFBF;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #F2F2F2;font-size: 13px;font-family: Century Gothic;color: #000000;text-align: center;vertical-align: middle;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"font-size: 13px;font-family: Century Gothic;color: #000000;text-align: center;vertical-align: middle;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #E2F0D9;font-size: 13px;font-family: Century Gothic;color: #000000;text-align: center;vertical-align: middle;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #D0E08D;font-size: 13px;font-family: Century Gothic;color: #000000;text-align: center;vertical-align: middle;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #DEEBF7;font-size: 13px;font-family: Century Gothic;color: #000000;text-align: center;vertical-align: middle;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #FFF2CC;font-size: 13px;font-family: Century Gothic;color: #000000;text-align: center;vertical-align: middle;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #F2F2F2;font-size: 16px;font-family: Century Gothic;color: #000000;text-align: center;vertical-align: middle;border-left: 1px solid #BFBFBF;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #F2F2F2;font-size: 16px;font-family: Century Gothic;color: #000000;text-align: center;vertical-align: middle;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"font-size: 13px;font-weight: bold;font-family: Century Gothic;color: #00B050;text-align: center;vertical-align: middle;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"font-size: 13px;font-weight: bold;font-family: Century Gothic;color: #009844;text-align: center;vertical-align: middle;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"font-size: 13px;font-weight: bold;font-family: Century Gothic;color: #385724;text-align: center;vertical-align: middle;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"font-size: 13px;font-weight: bold;font-family: Century Gothic;color: #806000;text-align: center;vertical-align: middle;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #C55A11;font-size: 13px;font-weight: bold;font-family: Century Gothic;color: #FFFFFF;text-align: center;vertical-align: middle;white-space: break-spaces;border-left: 1px solid #BFBFBF;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #C55A11;font-size: 13px;font-weight: bold;font-family: Century Gothic;color: #FFFFFF;text-align: center;vertical-align: middle;white-space: break-spaces;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"font-size: 13px;font-family: Century Gothic;color: #000000;text-align: center;vertical-align: middle;border-left: 1px solid #BFBFBF;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #FBE5D6;font-size: 13px;font-family: Century Gothic;color: #000000;text-align: center;vertical-align: middle;border-left: 1px solid #BFBFBF;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #FBE5D6;font-size: 13px;font-family: Century Gothic;color: #000000;text-align: center;vertical-align: middle;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"font-size: 16px;font-family: Arial;color: #000000;text-align: center;",
"font-size: 16px;font-weight: bold;font-family: Calibri;color: #000000;",
"font-size: 16px;font-family: Calibri;color: #000000;",
"font-size: 16px;font-family: Calibri;color: #000000;text-align: center;",
"",
"font-size:16px;font-family:Arial;color:#000000;background-color:#fb8c00",
"background-color:#70AD47;font-size:19px;font-family:Century Gothic;color:#FFFFFF;text-align:center;vertical-align:middle;white-space:break-spaces;border-top:1px solid #eeeeee;border-left:1px solid #eeeeee",
"background-color:#2E75B6;font-size:19px;font-family:Century Gothic;color:#FFFFFF;text-align:center;vertical-align:middle;white-space:break-spaces;border-top:1px solid #eeeeee;border-left:1px solid #eeeeee",
"background-color:#2E75B6;font-size:19px;font-family:Century Gothic;color:#FFFFFF;text-align:center;vertical-align:middle;white-space:break-spaces;border-right:1px solid #eeeeee;border-top:1px solid #eeeeee;border-left:1px solid #eeeeee",
"background-color:#92D050;font-size:13px;font-weight:bold;font-family:Century Gothic;color:#FFFFFF;text-align:center;vertical-align:middle;white-space:break-spaces;border-top:1px solid #eeeeee;border-left:1px solid #eeeeee",
"background-color:#5B9BD5;font-size:13px;font-weight:bold;font-family:Century Gothic;color:#FFFFFF;text-align:center;vertical-align:middle;white-space:break-spaces;border-top:1px solid #eeeeee;border-left:1px solid #eeeeee",
"background-color:#5B9BD5;font-size:13px;font-weight:bold;font-family:Century Gothic;color:#FFFFFF;text-align:center;vertical-align:middle;white-space:break-spaces;border-right:1px solid #eeeeee;border-top:1px solid #eeeeee;border-left:1px solid #eeeeee",
"font-size:13px;font-weight:bold;font-family:Century Gothic;color:#00B050;text-align:center;vertical-align:middle;border-bottom:1px solid #eeeeee;border-top:1px solid #eeeeee;border-left:1px solid #eeeeee",
"font-size:13px;font-weight:bold;font-family:Century Gothic;color:#385724;text-align:center;vertical-align:middle;border-bottom:1px solid #eeeeee;border-top:1px solid #eeeeee;border-left:1px solid #eeeeee",
"font-size:13px;font-weight:bold;font-family:Century Gothic;color:#385724;text-align:center;vertical-align:middle;border-right:1px solid #eeeeee;border-bottom:1px solid #eeeeee;border-top:1px solid #eeeeee;border-left:1px solid #eeeeee"
],
tableOverflow: true,
tableWidth: '1360',
tableHeight: '620',
resizable: true,
worksheets: [
{
data: [
["KPI DASHBOARD DATA", "", "", "", "", "", "", "", "", "", "", ""],
["Products","","Budget","","","Net Expenses","","Revenue","","","Profit Margins",""],
["N.º","NAME","TARGET","ACTUAL","REMAINING","EXTRA","TOTAL","TARGET","ACTUAL","REMAINING","GROSS","NET"],
[1,"PRODUCT 1",160344,259757.28000000003,"=(D4-C4)",16007,"=F4+E4",500916,1073357,"=H4-I4","=(J4-E4)/J4","=(J4-H4)/J4"],
[2,"PRODUCT 2",200816,311264.8,"=(D5-C5)",14816,"=F5+E5",215534,878162,"=H5-I5","=(J5-E5)/J5","=(J5-H5)/J5"],
[3,"PRODUCT 3",170989,237674.71,"=(D6-C6)",17057,"=F6+E6",820719,1193784,"=H6-I6","=(J6-E6)/J6","=(J6-H6)/J6"],
[4,"PRODUCT 4",281053,61831.66,"=(D7-C7)",17459,"=F7+E7",620242,420345,"=H7-I7","=(J7-E7)/J7","=(J7-H7)/J7"],
[5,"PRODUCT 5",262319,459058.25,"=(D8-C8)",13985,"=F8+E8",821177,1175811,"=H8-I8","=(J8-E8)/J8","=(J8-H8)/J8"],
[6,"PRODUCT 6",206881,157229.56,"=(D9-C9)",11183,"=F9+E9",901263,1015766,"=H9-I9","=(J9-E9)/J9","=(J9-H9)/J9"],
[7,"PRODUCT 7",130194,213518.15999999997,"=(D10-C10)",17111,"=F10+E10",878528,733751,"=H10-I10","=(J10-E10)/J10","=(J10-H10)/J10"],
[8,"PRODUCT 8",208451,214704.53,"=(D11-C11)",16494,"=F11+E11",838380,955983,"=H11-I11","=(J11-E11)/J11","=(J11-H11)/J11"],
[9,"PRODUCT 9",206422,177522.91999999998,"=(D12-C12)",17311,"=F12+E12",1073157,924095,"=H12-I12","=(J12-E12)/J12","=(J12-H12)/J12"],
[10,"PRODUCT 10",251504,2515.04,"=(D13-C13)",17315,"=F13+E13",941047,1061074,"=H13-I13","=(J13-E13)/J13","=(J13-H13)/J13"],
["","","=SUM(C4:C13)","=SUM(D4:D13)","=SUM(E4:E13)","=SUM(F4:F13)","=SUM(G4:G13)","=SUM(H4:H13)","=SUM(I4:I13)","=SUM(J4:JK13)","=SUM(K4:K13)/10","=SUM(L4:L13)/10"],
["", "", "", "", "", "", "", "", "", "", "", ""],
["","","","LIABILITIES / EQUITY RATIO","","","","Budget","","Revenue","",""],
["","","","CALENDAR","LIABILITIES","EQUITY","","TARGET","ACTUAL","TARGET","ACTUAL",""],
["","","",2027,3613439,3293202,"","=SUM(C4:C13)","=SUM(D4:D13)","=SUM(H4:H13)","=SUM(I4:I13)",""],
["", "", "", 2028, 3508776, 3441854, "", "", "", "", "", ""],
["", "", "", 2029, 3719457, 3531844, "", "", "", "", "", ""],
["", "", "", 2030, 3310212, 3354051, "", "", "", "", "", ""],
["", "", "", 2031, 3945202, 3476155, "", "", "", "", "", ""],
["", "", "", 2032, 3938152, 3538468, "", "", "", "", "", ""],
["", "", "", 2033, 3733706, 3727037, "", "", "", "", "", ""],
["", "", "", 2034, 3526698, 3425405, "", "", "", "", "", ""],
["", "", "", 2035, 3632971, 3734041, "", "", "", "", "", ""],
["", "", "", 2036, 3206487, 3677074, "", "", "", "", "", ""]
],
columns: [
{ "width": 44, "type": "text", "align": "left" },
{ "width": 190, "type": "text", "align": "left" },
{ "width": 97, "type": "numeric", "align": "left", "mask": "$#,##0" },
{ "width": 86, "type": "numeric", "align": "left", "mask": "$#,##0" },
{ "width": 103, "type": "numeric", "align": "left", "mask": "$#,##0" },
{ "width": 101, "type": "numeric", "align": "left", "mask": "$#,##0" },
{ "width": 86, "type": "numeric", "align": "left", "mask": "$#,##0" },
{ "width": 86, "type": "numeric", "align": "left", "mask": "$#,##0" },
{ "width": 97, "type": "numeric", "align": "left", "mask": "$#,##0" },
{ "width": 107, "type": "numeric", "align": "left", "mask": "$#,##0" },
{ "width": 86, "type": "numeric", "align": "left", "mask": "0%" },
{ "width": 86, "type": "numeric", "align": "left", "mask": "0%" }
],
rows: [
{ "height": 67 },
{ "height": 53 },
],
cells: {
"D18": { "format": "0" },
"E18": { "format": "0" },
"H18": { "format": "$#,##0" },
"K18": { "format": "$#,##0" },
"D19": { "format": "0" },
"E19": { "format": "0" },
"D20": { "format": "0" },
"E20": { "format": "0" },
"D21": { "format": "0" },
"E21": { "format": "0" },
"D22": { "format": "0" },
"E22": { "format": "0" },
"D23": { "format": "0" },
"E23": { "format": "0" },
"D24": { "format": "0" },
"E24": { "format": "0" },
"D25": { "format": "0" },
"E25": { "format": "0" },
"D26": { "format": "0" },
"E26": { "format": "0" },
"D27": { "format": "0" },
"E27": { "format": "0" }
},
style: {
"A1:J1": 2,
"K1:L1": 1,
"A2": 3,
"B2": 4,
"C2:E2": 5,
"F2:G2": 6,
"H2:J2": 7,
"K2:L2": 8,
"A3": 9,
"B3": 10,
"C3:E3": 11,
"F3:G3": 12,
"H3:J3": 13,
"K3:L3": 14,
"A4": 15,
"B4": 16,
"C4:L4": 17,
"A5": 15,
"B5": 16,
"C5:E5": 18,
"F5:G5": 19,
"H5:J5": 20,
"K5:L5": 21,
"A6": 15,
"B6": 16,
"C6:L6": 17,
"A7": 15,
"B7": 16,
"C7:E7": 18,
"F7:G7": 19,
"H7:J7": 20,
"K7:L7": 21,
"A8": 15,
"B8": 16,
"C8:L8": 17,
"A9": 15,
"B9": 16,
"C9:E9": 18,
"F9:G9": 19,
"H9:J9": 20,
"K9:L9": 21,
"A10": 15,
"B10": 16,
"C10:L10": 17,
"A11": 15,
"B11": 16,
"C11:E11": 18,
"F11:G11": 19,
"H11:J11": 20,
"K11:L11": 21,
"A12": 15,
"B12": 16,
"C12:L12": 17,
"A13": 15,
"B13": 16,
"C13:E13": 18,
"F13:G13": 19,
"H13:J13": 20,
"K13:L13": 21,
"A14": 22,
"B14": 23,
"C14:E14": 24,
"F14:G14": 25,
"H14:J14": 26,
"K14:L14": 27,
"C15:L15": 1,
"C16": 1,
"D16:F16": 38,
"G16": 1,
"H16:I16": 39,
"J16": 40,
"K16": 41,
"L16": 1,
"C17": 1,
"D17:E17": 28,
"F17": 29,
"G17": 1,
"H17:I17": 42,
"J17": 43,
"K17": 44,
"L17": 1,
"C18": 1,
"D18:E18": 30,
"F18": 17,
"G18": 1,
"H18:I18": 45,
"J18": 46,
"K18": 47,
"L18": 1,
"C19": 1,
"D19:E19": 31,
"F19": 32,
"G19:L19": 1,
"H19:I19": 33,
"C20": 1,
"D20:E20": 30,
"F20": 17,
"G20": 1,
"H20:I20": 33,
"J20": 34,
"C21": 1,
"D21:E21": 31,
"F21": 32,
"G21": 1,
"H21:I21": 33,
"J21": 34,
"M21": 35,
"D22:E22": 30,
"F22": 17,
"H22:I22": 36,
"J22": 34,
"D23:E23": 31,
"F23": 32,
"H23": 33,
"I23": 36,
"J23": 34,
"D24:E24": 30,
"F24": 17,
"H24:I24": 36,
"J24": 34,
"D25:E25": 31,
"F25": 32,
"J25": 34,
"D26:E26": 30,
"F26": 17,
"J26": 34,
"D27:E27": 31,
"F27": 32,
"J27": 34
},
textOverflow: true,
stripHTML: false,
defaultColAlign: "left",
worksheetName: "KPI Data",
defaultRowHeight: 43,
defaultColWidth: 79,
gridline: false,
tableOverflow: true,
minDimensions: [12, 27],
mergeCells: {
"A1": [10, 1],
"A2": [2, 1],
"C2": [3, 1],
"F2": [2, 1],
"H2": [3, 1],
"K2": [2, 1],
"D16": [3, 1]
},
},
{
data: [
["","KPI DASHBOARD","","","","","","","","","","","","","","",""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
[null, "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""]
],
columns: [
{ "width": 24, "type": "text", "align": "left" },
{ "type": "text", "width": 62, "align": "left" },
{ "type": "text", "width": 62, "align": "left" },
{ "width": 62, "type": "text", "align": "left" },
{ "width": 62, "type": "text", "align": "left" },
{ "width": 62, "type": "text", "align": "left" },
{ "width": 62, "type": "text", "align": "left" },
{ "width": 62, "type": "text", "align": "left" },
{ "type": "text", "width": 15, "align": "left" },
{ "type": "text", "width": 60, "align": "left" },
{ "width": 60, "type": "text", "align": "left" },
{ "width": 60, "type": "text", "align": "left" },
{ "type": "text", "width": 60, "align": "left" },
{ "type": "text", "width": 60, "align": "left" },
{ "type": "text", "width": 60, "align": "left" },
{ "type": "text", "width": 60, "align": "left" },
{ "type": "text", "width": 38, "align": "left" }
],
rows: [
{ "height": 77 },
{ "height": 29 },
{ "height": 29 },
{ "height": 29 },
{ "height": 29 },
{ "height": 29 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 118, "id": null },
{ "height": 71, "id": null },
{ "height": 58, "id": null },
{ "height": 51, "id": null },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 36 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 29 },
{ "height": 190 },
{ "height": 147 },
{ "height": 127 },
{ "height": 118 },
{ "height": 30 }
],
style: {
"B1:J1": 0,
"K1:M1": 1,
"A31": 37,
"B31:Q31": 35
},
textOverflow: true,
stripHTML: false,
defaultColAlign: "left",
worksheetName: "KPI Dashboard",
defaultColWidth: 79,
gridline: false,
tableOverflow: true,
freezeRowControl: true,
freezeColumnControl: true,
freezeRows: [0],
minDimensions: [17, 42],
mergeCells: {
"B1": [9, 1],
"B17": [7, 4],
"J17": [7, 4],
"B38": [15, 4]
},
media: [
{
"id": "19bb08c4-6a32-441b-90e5-9db66be86313",
"type": "chart",
"options": {
"type": "bar",
"range": "'KPI Data'!C3:E13",
"labels": 0,
"datasets": [1, 0],
"title": {
"text": "BUDGET",
"font": { "size": 40, "color": "#2E75B6" }
},
"legend": {
"position": "bottom",
"display": true,
"labels": { "font": { "color": "#000000", "size": 13 } }
},
"series": [
{ "color": "#92D050", "xAxis": "top" },
{ "color": "#00B050", "xAxis": "top" }
],
"axis": {
"base": {
"reverse": false,
"grid": { "display": false },
"ticks": { "display": false },
"labels": { "display": false }
},
"side2": {
"grid": { "width": 1, "color": "#D9D9D9" },
"ticks": { "width": 1, "length": 8 },
"labels": { "size": 15, "color": "#000000" },
"max": 500000,
"forceTheLimits": true
}
}
},
"cellAnchor": "B2",
"left": 0,
"top": 0,
"width": 434,
"height": 408,
"zIndex": 3,
"rotate": 0
},
{
"id": "afed067c-148d-42e1-aff6-49c328d7a22c",
"type": "chart",
"options": {
"type": "bar",
"range": "'KPI Data'!H3:J13",
"labels": 0,
"datasets": [1, 0],
"title": {
"text": "REVENUE",
"font": { "size": 40, "color": "#2E75B6" }
},
"legend": {
"position": "bottom",
"display": true,
"labels": { "font": { "color": "#000000", "size": 13 } }
},
"series": [
{ "color": "#B4C7E7", "xAxis": "top" },
{ "color": "#2E75B6", "xAxis": "top" }
],
"axis": {
"base": {
"reverse": false,
"grid": { "display": false },
"ticks": { "display": false },
"labels": { "display": false }
},
"side2": {
"grid": { "width": 1, "color": "#D9D9D9" },
"ticks": { "width": 1, "length": 8 },
"labels": { "size": 15, "color": "#000000" },
"min": 0,
"max": 1250000,
"forceTheLimits": true
}
}
},
"cellAnchor": "J2",
"left": 0,
"top": 0,
"width": 421,
"height": 408,
"zIndex": 3,
"rotate": 0
},
{
"type": "chart",
"width": 434,
"height": 300,
"options": {
"type": "bar",
"range": "'KPI DATA'!H17:I18",
"title": { "text": "TOTAL BUDGET", "position": "top" },
"legend": { "position": "bottom", "display": true },
"series": [
{ "color": "#B4C7E7", "xAxis": "top" },
{ "color": "#2E75B6", "xAxis": "top" }
]
},
"id": "717cc7d8-abbe-4842-b394-b64ad59ed550",
"top": 0,
"left": 0,
"cellAnchor": "B17",
"zIndex": 4,
"rotate": 0
},
{
"type": "chart",
"width": 420,
"height": 300,
"options": {
"type": "bar",
"range": "'KPI DATA'!J17:K18",
"title": { "text": "TOTAL REVENUE", "position": "top" },
"legend": { "position": "bottom", "display": true },
"series": [
{ "color": "#92D050", "xAxis": "top" },
{ "color": "#00B050", "xAxis": "top" }
]
},
"id": "fd82c8d4-0409-4eab-8033-e09f7bc9d8cd",
"top": 0,
"left": 0,
"cellAnchor": "J17",
"zIndex": 4,
"rotate": 0
},
{
"id": "df9ad462-1f05-46af-8b3f-d3d2a11e1212",
"type": "chart",
"options": {
"type": "line",
"range": "'KPI DATA'!K3:L13",
"labels": 0,
"title": {
"text": "PROFIT MARGINS",
"position": "top",
"font": { "size": 40, "color": "#2E75B6" }
},
"legend": {
"position": "bottom",
"display": true,
"labels": { "font": { "color": "#000000", "size": 13 } }
},
"series": [
{
"drawNullValues": false,
"borderColor": "#4472C4",
"line": { "width": 1 },
"color": "#00B0F0",
"point": { "style": "circle", "radius": 7 }
},
{
"drawNullValues": false,
"borderColor": "#FFC000",
"line": { "width": 1 },
"color": "#ED7D31",
"point": { "style": "circle", "radius": 5.5 }
}
],
"axis": {
"base": {
"grid": { "display": false },
"ticks": { "display": false },
"labels": { "display": false }
},
"side": {
"grid": { "width": 1 },
"ticks": { "width": 1, "length": 8 },
"labels": { "size": 16, "color": "#000000" },
"forceTheLimits": true
}
}
},
"cellAnchor": "B22",
"left": 0,
"top": 0,
"width": 873,
"height": 444,
"zIndex": 3,
"rotate": 0
},
{
"type": "chart",
"width": 870,
"height": 584,
"options": {
"type": "column",
"range": "'KPI DATA'!D17:F27",
"labels": 0,
"datasets": [1, 2],
"title": {
"text": "LIABILITIES vs EQUITY per Year",
"position": "top"
},
"legend": { "position": "bottom", "display": true },
"series": [
{ "color": "#ED7D31", "xAxis": "bottom" },
{ "color": "#00B050", "xAxis": "bottom" }
]
},
"id": "a1699cf7-e71c-45d5-91a2-4a47c195bb33",
"top": 0,
"left": 0,
"cellAnchor": "B38",
"zIndex": 4,
"rotate": 0
}
],
}
],
bar: true,
toolbar: true,
onload: function(instance) {
instance.openWorksheet(1);
}
});
return () => {
instance?.destroy?.();
};
}, []);
return <div ref={spreadsheetRef}></div>;
}
<template>
<Spreadsheet
ref="spreadsheet"
:license="license"
:worksheets="worksheets"
:styles="globalStyle"
toolbar="true"
/>
</template>
<script>
import { Spreadsheet, Worksheet } from "@jspreadsheet/vue";
import jspreadsheet from 'jspreadsheet';
import formula from '@jspreadsheet/formula-pro';
import charts from '@jspreadsheet/charts';
import studio from '@lemonadejs/studio';
import chartjs from '@jspreadsheet/formula-charts';
import '@lemonadejs/studio';
import '@lemonadejs/studio/dist/style.css';
import 'jsuites/dist/jsuites.css';
import 'jspreadsheet/dist/jspreadsheet.css';
import '@jspreadsheet/formula-charts';
import '@jspreadsheet/charts/dist/style.css';
jspreadsheet.setLicense('OTQwZDc1Zjg3ODlkZjJhMDM1YzFmY2RjYmFlNGRhNGM0YmIwOTUwNzcyNWM3OWE4ZGU0OTM5NTg2NmY5MjJjOTA4NjUxODA1OTVkZTcwYzA3MGVjOGMwNWYwZjNkZGRhZjZmYTVlMDhiNmUwYWVjNmFmOGI2M2RjZTA2MjZmNzUsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94Tnpjd09EQTBNakkzTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElpd2ljR2wyYjNRaVhTd2laR1Z0YnlJNmRISjFaWDA9');
jspreadsheet.setExtensions({ formula });
export default {
components: { Spreadsheet, Worksheet },
data() {
return {
globalStyle: [
"font-size: 29px;font-weight: bold;font-family: Century Gothic;color: #595959;vertical-align: middle;",
"font-size: 16px;font-family: Arial;color: #000000;",
"font-size: 29px;font-family: Century Gothic;color: #595959;vertical-align: middle;",
"background-color: #595959;font-size: 19px;font-family: Century Gothic;color: #FFFFFF;text-align: center;vertical-align: middle;white-space: break-spaces;border-left: 1px solid #BFBFBF;border-right: 1px solid #BFBFBF;border-top: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #595959;font-size: 19px;font-family: Century Gothic;color: #FFFFFF;text-align: center;vertical-align: middle;white-space: break-spaces;border-right: 1px solid #BFBFBF;border-top: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #70AD47;font-size: 19px;font-family: Century Gothic;color: #FFFFFF;text-align: center;vertical-align: middle;white-space: break-spaces;border-right: 1px solid #BFBFBF;border-top: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #009844;font-size: 19px;font-family: Century Gothic;color: #FFFFFF;text-align: center;vertical-align: middle;white-space: break-spaces;border-right: 1px solid #BFBFBF;border-top: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #2E75B6;font-size: 19px;font-family: Century Gothic;color: #FFFFFF;text-align: center;vertical-align: middle;white-space: break-spaces;border-right: 1px solid #BFBFBF;border-top: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #806000;font-size: 19px;font-family: Century Gothic;color: #FFFFFF;text-align: center;vertical-align: middle;white-space: break-spaces;border-right: 1px solid #BFBFBF;border-top: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #595959;font-size: 16px;font-weight: bold;font-family: Century Gothic;color: #FFFFFF;text-align: center;vertical-align: middle;border-left: 1px solid #BFBFBF;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #595959;font-size: 13px;font-weight: bold;font-family: Century Gothic;color: #FFFFFF;text-align: center;vertical-align: middle;white-space: break-spaces;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #92D050;font-size: 13px;font-weight: bold;font-family: Century Gothic;color: #FFFFFF;text-align: center;vertical-align: middle;white-space: break-spaces;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #79AE40;font-size: 13px;font-weight: bold;font-family: Century Gothic;color: #FFFFFF;text-align: center;vertical-align: middle;white-space: break-spaces;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #5B9BD5;font-size: 13px;font-weight: bold;font-family: Century Gothic;color: #FFFFFF;text-align: center;vertical-align: middle;white-space: break-spaces;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #D6A000;font-size: 13px;font-weight: bold;font-family: Century Gothic;color: #FFFFFF;text-align: center;vertical-align: middle;white-space: break-spaces;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #F2F2F2;font-size: 13px;font-family: Century Gothic;color: #000000;text-align: center;vertical-align: middle;border-left: 1px solid #BFBFBF;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #F2F2F2;font-size: 13px;font-family: Century Gothic;color: #000000;text-align: center;vertical-align: middle;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"font-size: 13px;font-family: Century Gothic;color: #000000;text-align: center;vertical-align: middle;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #E2F0D9;font-size: 13px;font-family: Century Gothic;color: #000000;text-align: center;vertical-align: middle;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #D0E08D;font-size: 13px;font-family: Century Gothic;color: #000000;text-align: center;vertical-align: middle;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #DEEBF7;font-size: 13px;font-family: Century Gothic;color: #000000;text-align: center;vertical-align: middle;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #FFF2CC;font-size: 13px;font-family: Century Gothic;color: #000000;text-align: center;vertical-align: middle;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #F2F2F2;font-size: 16px;font-family: Century Gothic;color: #000000;text-align: center;vertical-align: middle;border-left: 1px solid #BFBFBF;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #F2F2F2;font-size: 16px;font-family: Century Gothic;color: #000000;text-align: center;vertical-align: middle;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"font-size: 13px;font-weight: bold;font-family: Century Gothic;color: #00B050;text-align: center;vertical-align: middle;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"font-size: 13px;font-weight: bold;font-family: Century Gothic;color: #009844;text-align: center;vertical-align: middle;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"font-size: 13px;font-weight: bold;font-family: Century Gothic;color: #385724;text-align: center;vertical-align: middle;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"font-size: 13px;font-weight: bold;font-family: Century Gothic;color: #806000;text-align: center;vertical-align: middle;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #C55A11;font-size: 13px;font-weight: bold;font-family: Century Gothic;color: #FFFFFF;text-align: center;vertical-align: middle;white-space: break-spaces;border-left: 1px solid #BFBFBF;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #C55A11;font-size: 13px;font-weight: bold;font-family: Century Gothic;color: #FFFFFF;text-align: center;vertical-align: middle;white-space: break-spaces;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"font-size: 13px;font-family: Century Gothic;color: #000000;text-align: center;vertical-align: middle;border-left: 1px solid #BFBFBF;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #FBE5D6;font-size: 13px;font-family: Century Gothic;color: #000000;text-align: center;vertical-align: middle;border-left: 1px solid #BFBFBF;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #FBE5D6;font-size: 13px;font-family: Century Gothic;color: #000000;text-align: center;vertical-align: middle;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"font-size: 16px;font-family: Arial;color: #000000;text-align: center;",
"font-size: 16px;font-weight: bold;font-family: Calibri;color: #000000;",
"font-size: 16px;font-family: Calibri;color: #000000;",
"font-size: 16px;font-family: Calibri;color: #000000;text-align: center;",
"",
"font-size:16px;font-family:Arial;color:#000000;background-color:#fb8c00",
"background-color:#70AD47;font-size:19px;font-family:Century Gothic;color:#FFFFFF;text-align:center;vertical-align:middle;white-space:break-spaces;border-top:1px solid #eeeeee;border-left:1px solid #eeeeee",
"background-color:#2E75B6;font-size:19px;font-family:Century Gothic;color:#FFFFFF;text-align:center;vertical-align:middle;white-space:break-spaces;border-top:1px solid #eeeeee;border-left:1px solid #eeeeee",
"background-color:#2E75B6;font-size:19px;font-family:Century Gothic;color:#FFFFFF;text-align:center;vertical-align:middle;white-space:break-spaces;border-right:1px solid #eeeeee;border-top:1px solid #eeeeee;border-left:1px solid #eeeeee",
"background-color:#92D050;font-size:13px;font-weight:bold;font-family:Century Gothic;color:#FFFFFF;text-align:center;vertical-align:middle;white-space:break-spaces;border-top:1px solid #eeeeee;border-left:1px solid #eeeeee",
"background-color:#5B9BD5;font-size:13px;font-weight:bold;font-family:Century Gothic;color:#FFFFFF;text-align:center;vertical-align:middle;white-space:break-spaces;border-top:1px solid #eeeeee;border-left:1px solid #eeeeee",
"background-color:#5B9BD5;font-size:13px;font-weight:bold;font-family:Century Gothic;color:#FFFFFF;text-align:center;vertical-align:middle;white-space:break-spaces;border-right:1px solid #eeeeee;border-top:1px solid #eeeeee;border-left:1px solid #eeeeee",
"font-size:13px;font-weight:bold;font-family:Century Gothic;color:#00B050;text-align:center;vertical-align:middle;border-bottom:1px solid #eeeeee;border-top:1px solid #eeeeee;border-left:1px solid #eeeeee",
"font-size:13px;font-weight:bold;font-family:Century Gothic;color:#385724;text-align:center;vertical-align:middle;border-bottom:1px solid #eeeeee;border-top:1px solid #eeeeee;border-left:1px solid #eeeeee",
"font-size:13px;font-weight:bold;font-family:Century Gothic;color:#385724;text-align:center;vertical-align:middle;border-right:1px solid #eeeeee;border-bottom:1px solid #eeeeee;border-top:1px solid #eeeeee;border-left:1px solid #eeeeee"
],
tableWidth: '1360',
tableHeight: '620',
resizable: true,
worksheets: [
{
data: [
["KPI DASHBOARD DATA", "", "", "", "", "", "", "", "", "", "", ""],
["Products","","Budget","","","Net Expenses","","Revenue","","","Profit Margins",""],
["N.º","NAME","TARGET","ACTUAL","REMAINING","EXTRA","TOTAL","TARGET","ACTUAL","REMAINING","GROSS","NET"],
[1,"PRODUCT 1",160344,259757.28000000003,"=(D4-C4)",16007,"=F4+E4",500916,1073357,"=H4-I4","=(J4-E4)/J4","=(J4-H4)/J4"],
[2,"PRODUCT 2",200816,311264.8,"=(D5-C5)",14816,"=F5+E5",215534,878162,"=H5-I5","=(J5-E5)/J5","=(J5-H5)/J5"],
[3,"PRODUCT 3",170989,237674.71,"=(D6-C6)",17057,"=F6+E6",820719,1193784,"=H6-I6","=(J6-E6)/J6","=(J6-H6)/J6"],
[4,"PRODUCT 4",281053,61831.66,"=(D7-C7)",17459,"=F7+E7",620242,420345,"=H7-I7","=(J7-E7)/J7","=(J7-H7)/J7"],
[5,"PRODUCT 5",262319,459058.25,"=(D8-C8)",13985,"=F8+E8",821177,1175811,"=H8-I8","=(J8-E8)/J8","=(J8-H8)/J8"],
[6,"PRODUCT 6",206881,157229.56,"=(D9-C9)",11183,"=F9+E9",901263,1015766,"=H9-I9","=(J9-E9)/J9","=(J9-H9)/J9"],
[7,"PRODUCT 7",130194,213518.15999999997,"=(D10-C10)",17111,"=F10+E10",878528,733751,"=H10-I10","=(J10-E10)/J10","=(J10-H10)/J10"],
[8,"PRODUCT 8",208451,214704.53,"=(D11-C11)",16494,"=F11+E11",838380,955983,"=H11-I11","=(J11-E11)/J11","=(J11-H11)/J11"],
[9,"PRODUCT 9",206422,177522.91999999998,"=(D12-C12)",17311,"=F12+E12",1073157,924095,"=H12-I12","=(J12-E12)/J12","=(J12-H12)/J12"],
[10,"PRODUCT 10",251504,2515.04,"=(D13-C13)",17315,"=F13+E13",941047,1061074,"=H13-I13","=(J13-E13)/J13","=(J13-H13)/J13"],
["","","=SUM(C4:C13)","=SUM(D4:D13)","=SUM(E4:E13)","=SUM(F4:F13)","=SUM(G4:G13)","=SUM(H4:H13)","=SUM(I4:I13)","=SUM(J4:JK13)","=SUM(K4:K13)/10","=SUM(L4:L13)/10"],
["", "", "", "", "", "", "", "", "", "", "", ""],
["","","","LIABILITIES / EQUITY RATIO","","","","Budget","","Revenue","",""],
["","","","CALENDAR","LIABILITIES","EQUITY","","TARGET","ACTUAL","TARGET","ACTUAL",""],
["","","",2027,3613439,3293202,"","=SUM(C4:C13)","=SUM(D4:D13)","=SUM(H4:H13)","=SUM(I4:I13)",""],
["", "", "", 2028, 3508776, 3441854, "", "", "", "", "", ""],
["", "", "", 2029, 3719457, 3531844, "", "", "", "", "", ""],
["", "", "", 2030, 3310212, 3354051, "", "", "", "", "", ""],
["", "", "", 2031, 3945202, 3476155, "", "", "", "", "", ""],
["", "", "", 2032, 3938152, 3538468, "", "", "", "", "", ""],
["", "", "", 2033, 3733706, 3727037, "", "", "", "", "", ""],
["", "", "", 2034, 3526698, 3425405, "", "", "", "", "", ""],
["", "", "", 2035, 3632971, 3734041, "", "", "", "", "", ""],
["", "", "", 2036, 3206487, 3677074, "", "", "", "", "", ""]
],
columns: [
{ "width": 44, "type": "text", "align": "left" },
{ "width": 190, "type": "text", "align": "left" },
{ "width": 97, "type": "numeric", "align": "left", "mask": "$#,##0" },
{ "width": 86, "type": "numeric", "align": "left", "mask": "$#,##0" },
{ "width": 103, "type": "numeric", "align": "left", "mask": "$#,##0" },
{ "width": 101, "type": "numeric", "align": "left", "mask": "$#,##0" },
{ "width": 86, "type": "numeric", "align": "left", "mask": "$#,##0" },
{ "width": 86, "type": "numeric", "align": "left", "mask": "$#,##0" },
{ "width": 97, "type": "numeric", "align": "left", "mask": "$#,##0" },
{ "width": 107, "type": "numeric", "align": "left", "mask": "$#,##0" },
{ "width": 86, "type": "numeric", "align": "left", "mask": "0%" },
{ "width": 86, "type": "numeric", "align": "left", "mask": "0%" }
],
rows: [
{ "height": 67 },
{ "height": 53 },
],
cells: {
"D18": { "format": "0" },
"E18": { "format": "0" },
"H18": { "format": "$#,##0" },
"K18": { "format": "$#,##0" },
"D19": { "format": "0" },
"E19": { "format": "0" },
"D20": { "format": "0" },
"E20": { "format": "0" },
"D21": { "format": "0" },
"E21": { "format": "0" },
"D22": { "format": "0" },
"E22": { "format": "0" },
"D23": { "format": "0" },
"E23": { "format": "0" },
"D24": { "format": "0" },
"E24": { "format": "0" },
"D25": { "format": "0" },
"E25": { "format": "0" },
"D26": { "format": "0" },
"E26": { "format": "0" },
"D27": { "format": "0" },
"E27": { "format": "0" }
},
style: {
"A1:J1": 2,
"K1:L1": 1,
"A2": 3,
"B2": 4,
"C2:E2": 5,
"F2:G2": 6,
"H2:J2": 7,
"K2:L2": 8,
"A3": 9,
"B3": 10,
"C3:E3": 11,
"F3:G3": 12,
"H3:J3": 13,
"K3:L3": 14,
"A4": 15,
"B4": 16,
"C4:L4": 17,
"A5": 15,
"B5": 16,
"C5:E5": 18,
"F5:G5": 19,
"H5:J5": 20,
"K5:L5": 21,
"A6": 15,
"B6": 16,
"C6:L6": 17,
"A7": 15,
"B7": 16,
"C7:E7": 18,
"F7:G7": 19,
"H7:J7": 20,
"K7:L7": 21,
"A8": 15,
"B8": 16,
"C8:L8": 17,
"A9": 15,
"B9": 16,
"C9:E9": 18,
"F9:G9": 19,
"H9:J9": 20,
"K9:L9": 21,
"A10": 15,
"B10": 16,
"C10:L10": 17,
"A11": 15,
"B11": 16,
"C11:E11": 18,
"F11:G11": 19,
"H11:J11": 20,
"K11:L11": 21,
"A12": 15,
"B12": 16,
"C12:L12": 17,
"A13": 15,
"B13": 16,
"C13:E13": 18,
"F13:G13": 19,
"H13:J13": 20,
"K13:L13": 21,
"A14": 22,
"B14": 23,
"C14:E14": 24,
"F14:G14": 25,
"H14:J14": 26,
"K14:L14": 27,
"C15:L15": 1,
"C16": 1,
"D16:F16": 38,
"G16": 1,
"H16:I16": 39,
"J16": 40,
"K16": 41,
"L16": 1,
"C17": 1,
"D17:E17": 28,
"F17": 29,
"G17": 1,
"H17:I17": 42,
"J17": 43,
"K17": 44,
"L17": 1,
"C18": 1,
"D18:E18": 30,
"F18": 17,
"G18": 1,
"H18:I18": 45,
"J18": 46,
"K18": 47,
"L18": 1,
"C19": 1,
"D19:E19": 31,
"F19": 32,
"G19:L19": 1,
"H19:I19": 33,
"C20": 1,
"D20:E20": 30,
"F20": 17,
"G20": 1,
"H20:I20": 33,
"J20": 34,
"C21": 1,
"D21:E21": 31,
"F21": 32,
"G21": 1,
"H21:I21": 33,
"J21": 34,
"M21": 35,
"D22:E22": 30,
"F22": 17,
"H22:I22": 36,
"J22": 34,
"D23:E23": 31,
"F23": 32,
"H23": 33,
"I23": 36,
"J23": 34,
"D24:E24": 30,
"F24": 17,
"H24:I24": 36,
"J24": 34,
"D25:E25": 31,
"F25": 32,
"J25": 34,
"D26:E26": 30,
"F26": 17,
"J26": 34,
"D27:E27": 31,
"F27": 32,
"J27": 34
},
textOverflow: true,
stripHTML: false,
defaultColAlign: "left",
worksheetName: "KPI Data",
defaultRowHeight: 43,
defaultColWidth: 79,
gridline: false,
tableOverflow: true,
minDimensions: [12, 27],
mergeCells: {
"A1": [10, 1],
"A2": [2, 1],
"C2": [3, 1],
"F2": [2, 1],
"H2": [3, 1],
"K2": [2, 1],
"D16": [3, 1]
},
},
{
data: [
["","KPI DASHBOARD","","","","","","","","","","","","","","",""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
[null, "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""]
],
columns: [
{ "width": 24, "type": "text", "align": "left" },
{ "type": "text", "width": 62, "align": "left" },
{ "type": "text", "width": 62, "align": "left" },
{ "width": 62, "type": "text", "align": "left" },
{ "width": 62, "type": "text", "align": "left" },
{ "width": 62, "type": "text", "align": "left" },
{ "width": 62, "type": "text", "align": "left" },
{ "width": 62, "type": "text", "align": "left" },
{ "type": "text", "width": 15, "align": "left" },
{ "type": "text", "width": 60, "align": "left" },
{ "width": 60, "type": "text", "align": "left" },
{ "width": 60, "type": "text", "align": "left" },
{ "type": "text", "width": 60, "align": "left" },
{ "type": "text", "width": 60, "align": "left" },
{ "type": "text", "width": 60, "align": "left" },
{ "type": "text", "width": 60, "align": "left" },
{ "type": "text", "width": 38, "align": "left" }
],
rows: [
{ "height": 77 },
{ "height": 29 },
{ "height": 29 },
{ "height": 29 },
{ "height": 29 },
{ "height": 29 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 118, "id": null },
{ "height": 71, "id": null },
{ "height": 58, "id": null },
{ "height": 51, "id": null },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 36 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 29 },
{ "height": 190 },
{ "height": 147 },
{ "height": 127 },
{ "height": 118 },
{ "height": 30 }
],
style: {
"B1:J1": 0,
"K1:M1": 1,
"A31": 37,
"B31:Q31": 35
},
textOverflow: true,
stripHTML: false,
defaultColAlign: "left",
worksheetName: "KPI Dashboard",
defaultColWidth: 79,
gridline: false,
tableOverflow: true,
freezeRowControl: true,
freezeColumnControl: true,
freezeRows: [0],
minDimensions: [17, 42],
mergeCells: {
"B1": [9, 1],
"B17": [7, 4],
"J17": [7, 4],
"B38": [15, 4]
},
media: [
{
"id": "19bb08c4-6a32-441b-90e5-9db66be86313",
"type": "chart",
"options": {
"type": "bar",
"range": "'KPI Data'!C3:E13",
"labels": 0,
"datasets": [1, 0],
"title": {
"text": "BUDGET",
"font": { "size": 40, "color": "#2E75B6" }
},
"legend": {
"position": "bottom",
"display": true,
"labels": { "font": { "color": "#000000", "size": 13 } }
},
"series": [
{ "color": "#92D050", "xAxis": "top" },
{ "color": "#00B050", "xAxis": "top" }
],
"axis": {
"base": {
"reverse": false,
"grid": { "display": false },
"ticks": { "display": false },
"labels": { "display": false }
},
"side2": {
"grid": { "width": 1, "color": "#D9D9D9" },
"ticks": { "width": 1, "length": 8 },
"labels": { "size": 15, "color": "#000000" },
"max": 500000,
"forceTheLimits": true
}
}
},
"cellAnchor": "B2",
"left": 0,
"top": 0,
"width": 434,
"height": 408,
"zIndex": 3,
"rotate": 0
},
{
"id": "afed067c-148d-42e1-aff6-49c328d7a22c",
"type": "chart",
"options": {
"type": "bar",
"range": "'KPI Data'!H3:J13",
"labels": 0,
"datasets": [1, 0],
"title": {
"text": "REVENUE",
"font": { "size": 40, "color": "#2E75B6" }
},
"legend": {
"position": "bottom",
"display": true,
"labels": { "font": { "color": "#000000", "size": 13 } }
},
"series": [
{ "color": "#B4C7E7", "xAxis": "top" },
{ "color": "#2E75B6", "xAxis": "top" }
],
"axis": {
"base": {
"reverse": false,
"grid": { "display": false },
"ticks": { "display": false },
"labels": { "display": false }
},
"side2": {
"grid": { "width": 1, "color": "#D9D9D9" },
"ticks": { "width": 1, "length": 8 },
"labels": { "size": 15, "color": "#000000" },
"min": 0,
"max": 1250000,
"forceTheLimits": true
}
}
},
"cellAnchor": "J2",
"left": 0,
"top": 0,
"width": 421,
"height": 408,
"zIndex": 3,
"rotate": 0
},
{
"type": "chart",
"width": 434,
"height": 300,
"options": {
"type": "bar",
"range": "'KPI DATA'!H17:I18",
"title": { "text": "TOTAL BUDGET", "position": "top" },
"legend": { "position": "bottom", "display": true },
"series": [
{ "color": "#B4C7E7", "xAxis": "top" },
{ "color": "#2E75B6", "xAxis": "top" }
]
},
"id": "717cc7d8-abbe-4842-b394-b64ad59ed550",
"top": 0,
"left": 0,
"cellAnchor": "B17",
"zIndex": 4,
"rotate": 0
},
{
"type": "chart",
"width": 420,
"height": 300,
"options": {
"type": "bar",
"range": "'KPI DATA'!J17:K18",
"title": { "text": "TOTAL REVENUE", "position": "top" },
"legend": { "position": "bottom", "display": true },
"series": [
{ "color": "#92D050", "xAxis": "top" },
{ "color": "#00B050", "xAxis": "top" }
]
},
"id": "fd82c8d4-0409-4eab-8033-e09f7bc9d8cd",
"top": 0,
"left": 0,
"cellAnchor": "J17",
"zIndex": 4,
"rotate": 0
},
{
"id": "df9ad462-1f05-46af-8b3f-d3d2a11e1212",
"type": "chart",
"options": {
"type": "line",
"range": "'KPI DATA'!K3:L13",
"labels": 0,
"title": {
"text": "PROFIT MARGINS",
"position": "top",
"font": { "size": 40, "color": "#2E75B6" }
},
"legend": {
"position": "bottom",
"display": true,
"labels": { "font": { "color": "#000000", "size": 13 } }
},
"series": [
{
"drawNullValues": false,
"borderColor": "#4472C4",
"line": { "width": 1 },
"color": "#00B0F0",
"point": { "style": "circle", "radius": 7 }
},
{
"drawNullValues": false,
"borderColor": "#FFC000",
"line": { "width": 1 },
"color": "#ED7D31",
"point": { "style": "circle", "radius": 5.5 }
}
],
"axis": {
"base": {
"grid": { "display": false },
"ticks": { "display": false },
"labels": { "display": false }
},
"side": {
"grid": { "width": 1 },
"ticks": { "width": 1, "length": 8 },
"labels": { "size": 16, "color": "#000000" },
"forceTheLimits": true
}
}
},
"cellAnchor": "B22",
"left": 0,
"top": 0,
"width": 873,
"height": 444,
"zIndex": 3,
"rotate": 0
},
{
"type": "chart",
"width": 870,
"height": 584,
"options": {
"type": "column",
"range": "'KPI DATA'!D17:F27",
"labels": 0,
"datasets": [1, 2],
"title": {
"text": "LIABILITIES vs EQUITY per Year",
"position": "top"
},
"legend": { "position": "bottom", "display": true },
"series": [
{ "color": "#ED7D31", "xAxis": "bottom" },
{ "color": "#00B050", "xAxis": "bottom" }
]
},
"id": "a1699cf7-e71c-45d5-91a2-4a47c195bb33",
"top": 0,
"left": 0,
"cellAnchor": "B38",
"zIndex": 4,
"rotate": 0
}
],
}
],
bar: true,
toolbar: true
};
}
}
</script>
import { Component, ElementRef, ViewChild } from '@angular/core';
import jspreadsheet from 'jspreadsheet';
import formula from '@jspreadsheet/formula-pro';
import charts from '@jspreadsheet/charts';
import '@jspreadsheet/formula-charts';
// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('OTQwZDc1Zjg3ODlkZjJhMDM1YzFmY2RjYmFlNGRhNGM0YmIwOTUwNzcyNWM3OWE4ZGU0OTM5NTg2NmY5MjJjOTA4NjUxODA1OTVkZTcwYzA3MGVjOGMwNWYwZjNkZGRhZjZmYTVlMDhiNmUwYWVjNmFmOGI2M2RjZTA2MjZmNzUsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94Tnpjd09EQTBNakkzTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElpd2ljR2wyYjNRaVhTd2laR1Z0YnlJNmRISjFaWDA9');
jspreadsheet.setExtensions({ formula, charts });
@Component({
standalone: true,
selector: 'app-root',
template: `<div #spreadsheet></div>`,
})
export class AppComponent {
@ViewChild('spreadsheet', { static: true }) spreadsheet!: ElementRef;
ngAfterViewInit() {
jspreadsheet(this.spreadsheet.nativeElement, {
style: [
"font-size: 29px;font-weight: bold;font-family: Century Gothic;color: #595959;vertical-align: middle;",
"font-size: 16px;font-family: Arial;color: #000000;",
"font-size: 29px;font-family: Century Gothic;color: #595959;vertical-align: middle;",
"background-color: #595959;font-size: 19px;font-family: Century Gothic;color: #FFFFFF;text-align: center;vertical-align: middle;white-space: break-spaces;border-left: 1px solid #BFBFBF;border-right: 1px solid #BFBFBF;border-top: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #595959;font-size: 19px;font-family: Century Gothic;color: #FFFFFF;text-align: center;vertical-align: middle;white-space: break-spaces;border-right: 1px solid #BFBFBF;border-top: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #70AD47;font-size: 19px;font-family: Century Gothic;color: #FFFFFF;text-align: center;vertical-align: middle;white-space: break-spaces;border-right: 1px solid #BFBFBF;border-top: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #009844;font-size: 19px;font-family: Century Gothic;color: #FFFFFF;text-align: center;vertical-align: middle;white-space: break-spaces;border-right: 1px solid #BFBFBF;border-top: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #2E75B6;font-size: 19px;font-family: Century Gothic;color: #FFFFFF;text-align: center;vertical-align: middle;white-space: break-spaces;border-right: 1px solid #BFBFBF;border-top: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #806000;font-size: 19px;font-family: Century Gothic;color: #FFFFFF;text-align: center;vertical-align: middle;white-space: break-spaces;border-right: 1px solid #BFBFBF;border-top: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #595959;font-size: 16px;font-weight: bold;font-family: Century Gothic;color: #FFFFFF;text-align: center;vertical-align: middle;border-left: 1px solid #BFBFBF;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #595959;font-size: 13px;font-weight: bold;font-family: Century Gothic;color: #FFFFFF;text-align: center;vertical-align: middle;white-space: break-spaces;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #92D050;font-size: 13px;font-weight: bold;font-family: Century Gothic;color: #FFFFFF;text-align: center;vertical-align: middle;white-space: break-spaces;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #79AE40;font-size: 13px;font-weight: bold;font-family: Century Gothic;color: #FFFFFF;text-align: center;vertical-align: middle;white-space: break-spaces;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #5B9BD5;font-size: 13px;font-weight: bold;font-family: Century Gothic;color: #FFFFFF;text-align: center;vertical-align: middle;white-space: break-spaces;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #D6A000;font-size: 13px;font-weight: bold;font-family: Century Gothic;color: #FFFFFF;text-align: center;vertical-align: middle;white-space: break-spaces;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #F2F2F2;font-size: 13px;font-family: Century Gothic;color: #000000;text-align: center;vertical-align: middle;border-left: 1px solid #BFBFBF;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #F2F2F2;font-size: 13px;font-family: Century Gothic;color: #000000;text-align: center;vertical-align: middle;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"font-size: 13px;font-family: Century Gothic;color: #000000;text-align: center;vertical-align: middle;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #E2F0D9;font-size: 13px;font-family: Century Gothic;color: #000000;text-align: center;vertical-align: middle;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #D0E08D;font-size: 13px;font-family: Century Gothic;color: #000000;text-align: center;vertical-align: middle;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #DEEBF7;font-size: 13px;font-family: Century Gothic;color: #000000;text-align: center;vertical-align: middle;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #FFF2CC;font-size: 13px;font-family: Century Gothic;color: #000000;text-align: center;vertical-align: middle;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #F2F2F2;font-size: 16px;font-family: Century Gothic;color: #000000;text-align: center;vertical-align: middle;border-left: 1px solid #BFBFBF;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #F2F2F2;font-size: 16px;font-family: Century Gothic;color: #000000;text-align: center;vertical-align: middle;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"font-size: 13px;font-weight: bold;font-family: Century Gothic;color: #00B050;text-align: center;vertical-align: middle;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"font-size: 13px;font-weight: bold;font-family: Century Gothic;color: #009844;text-align: center;vertical-align: middle;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"font-size: 13px;font-weight: bold;font-family: Century Gothic;color: #385724;text-align: center;vertical-align: middle;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"font-size: 13px;font-weight: bold;font-family: Century Gothic;color: #806000;text-align: center;vertical-align: middle;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #C55A11;font-size: 13px;font-weight: bold;font-family: Century Gothic;color: #FFFFFF;text-align: center;vertical-align: middle;white-space: break-spaces;border-left: 1px solid #BFBFBF;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #C55A11;font-size: 13px;font-weight: bold;font-family: Century Gothic;color: #FFFFFF;text-align: center;vertical-align: middle;white-space: break-spaces;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"font-size: 13px;font-family: Century Gothic;color: #000000;text-align: center;vertical-align: middle;border-left: 1px solid #BFBFBF;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #FBE5D6;font-size: 13px;font-family: Century Gothic;color: #000000;text-align: center;vertical-align: middle;border-left: 1px solid #BFBFBF;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"background-color: #FBE5D6;font-size: 13px;font-family: Century Gothic;color: #000000;text-align: center;vertical-align: middle;border-right: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;",
"font-size: 16px;font-family: Arial;color: #000000;text-align: center;",
"font-size: 16px;font-weight: bold;font-family: Calibri;color: #000000;",
"font-size: 16px;font-family: Calibri;color: #000000;",
"font-size: 16px;font-family: Calibri;color: #000000;text-align: center;",
"",
"font-size:16px;font-family:Arial;color:#000000;background-color:#fb8c00",
"background-color:#70AD47;font-size:19px;font-family:Century Gothic;color:#FFFFFF;text-align:center;vertical-align:middle;white-space:break-spaces;border-top:1px solid #eeeeee;border-left:1px solid #eeeeee",
"background-color:#2E75B6;font-size:19px;font-family:Century Gothic;color:#FFFFFF;text-align:center;vertical-align:middle;white-space:break-spaces;border-top:1px solid #eeeeee;border-left:1px solid #eeeeee",
"background-color:#2E75B6;font-size:19px;font-family:Century Gothic;color:#FFFFFF;text-align:center;vertical-align:middle;white-space:break-spaces;border-right:1px solid #eeeeee;border-top:1px solid #eeeeee;border-left:1px solid #eeeeee",
"background-color:#92D050;font-size:13px;font-weight:bold;font-family:Century Gothic;color:#FFFFFF;text-align:center;vertical-align:middle;white-space:break-spaces;border-top:1px solid #eeeeee;border-left:1px solid #eeeeee",
"background-color:#5B9BD5;font-size:13px;font-weight:bold;font-family:Century Gothic;color:#FFFFFF;text-align:center;vertical-align:middle;white-space:break-spaces;border-top:1px solid #eeeeee;border-left:1px solid #eeeeee",
"background-color:#5B9BD5;font-size:13px;font-weight:bold;font-family:Century Gothic;color:#FFFFFF;text-align:center;vertical-align:middle;white-space:break-spaces;border-right:1px solid #eeeeee;border-top:1px solid #eeeeee;border-left:1px solid #eeeeee",
"font-size:13px;font-weight:bold;font-family:Century Gothic;color:#00B050;text-align:center;vertical-align:middle;border-bottom:1px solid #eeeeee;border-top:1px solid #eeeeee;border-left:1px solid #eeeeee",
"font-size:13px;font-weight:bold;font-family:Century Gothic;color:#385724;text-align:center;vertical-align:middle;border-bottom:1px solid #eeeeee;border-top:1px solid #eeeeee;border-left:1px solid #eeeeee",
"font-size:13px;font-weight:bold;font-family:Century Gothic;color:#385724;text-align:center;vertical-align:middle;border-right:1px solid #eeeeee;border-bottom:1px solid #eeeeee;border-top:1px solid #eeeeee;border-left:1px solid #eeeeee"
],
worksheets: [
{
data: [
["KPI DASHBOARD DATA", "", "", "", "", "", "", "", "", "", "", ""],
["Products","","Budget","","","Net Expenses","","Revenue","","","Profit Margins",""],
["N.º","NAME","TARGET","ACTUAL","REMAINING","EXTRA","TOTAL","TARGET","ACTUAL","REMAINING","GROSS","NET"],
[1,"PRODUCT 1",160344,259757.28000000003,"=(D4-C4)",16007,"=F4+E4",500916,1073357,"=H4-I4","=(J4-E4)/J4","=(J4-H4)/J4"],
[2,"PRODUCT 2",200816,311264.8,"=(D5-C5)",14816,"=F5+E5",215534,878162,"=H5-I5","=(J5-E5)/J5","=(J5-H5)/J5"],
[3,"PRODUCT 3",170989,237674.71,"=(D6-C6)",17057,"=F6+E6",820719,1193784,"=H6-I6","=(J6-E6)/J6","=(J6-H6)/J6"],
[4,"PRODUCT 4",281053,61831.66,"=(D7-C7)",17459,"=F7+E7",620242,420345,"=H7-I7","=(J7-E7)/J7","=(J7-H7)/J7"],
[5,"PRODUCT 5",262319,459058.25,"=(D8-C8)",13985,"=F8+E8",821177,1175811,"=H8-I8","=(J8-E8)/J8","=(J8-H8)/J8"],
[6,"PRODUCT 6",206881,157229.56,"=(D9-C9)",11183,"=F9+E9",901263,1015766,"=H9-I9","=(J9-E9)/J9","=(J9-H9)/J9"],
[7,"PRODUCT 7",130194,213518.15999999997,"=(D10-C10)",17111,"=F10+E10",878528,733751,"=H10-I10","=(J10-E10)/J10","=(J10-H10)/J10"],
[8,"PRODUCT 8",208451,214704.53,"=(D11-C11)",16494,"=F11+E11",838380,955983,"=H11-I11","=(J11-E11)/J11","=(J11-H11)/J11"],
[9,"PRODUCT 9",206422,177522.91999999998,"=(D12-C12)",17311,"=F12+E12",1073157,924095,"=H12-I12","=(J12-E12)/J12","=(J12-H12)/J12"],
[10,"PRODUCT 10",251504,2515.04,"=(D13-C13)",17315,"=F13+E13",941047,1061074,"=H13-I13","=(J13-E13)/J13","=(J13-H13)/J13"],
["","","=SUM(C4:C13)","=SUM(D4:D13)","=SUM(E4:E13)","=SUM(F4:F13)","=SUM(G4:G13)","=SUM(H4:H13)","=SUM(I4:I13)","=SUM(J4:JK13)","=SUM(K4:K13)/10","=SUM(L4:L13)/10"],
["", "", "", "", "", "", "", "", "", "", "", ""],
["","","","LIABILITIES / EQUITY RATIO","","","","Budget","","Revenue","",""],
["","","","CALENDAR","LIABILITIES","EQUITY","","TARGET","ACTUAL","TARGET","ACTUAL",""],
["","","",2027,3613439,3293202,"","=SUM(C4:C13)","=SUM(D4:D13)","=SUM(H4:H13)","=SUM(I4:I13)",""],
["", "", "", 2028, 3508776, 3441854, "", "", "", "", "", ""],
["", "", "", 2029, 3719457, 3531844, "", "", "", "", "", ""],
["", "", "", 2030, 3310212, 3354051, "", "", "", "", "", ""],
["", "", "", 2031, 3945202, 3476155, "", "", "", "", "", ""],
["", "", "", 2032, 3938152, 3538468, "", "", "", "", "", ""],
["", "", "", 2033, 3733706, 3727037, "", "", "", "", "", ""],
["", "", "", 2034, 3526698, 3425405, "", "", "", "", "", ""],
["", "", "", 2035, 3632971, 3734041, "", "", "", "", "", ""],
["", "", "", 2036, 3206487, 3677074, "", "", "", "", "", ""]
],
columns: [
{ "width": 44, "type": "text", "align": "left" },
{ "width": 190, "type": "text", "align": "left" },
{ "width": 97, "type": "numeric", "align": "left", "mask": "$#,##0" },
{ "width": 86, "type": "numeric", "align": "left", "mask": "$#,##0" },
{ "width": 103, "type": "numeric", "align": "left", "mask": "$#,##0" },
{ "width": 101, "type": "numeric", "align": "left", "mask": "$#,##0" },
{ "width": 86, "type": "numeric", "align": "left", "mask": "$#,##0" },
{ "width": 86, "type": "numeric", "align": "left", "mask": "$#,##0" },
{ "width": 97, "type": "numeric", "align": "left", "mask": "$#,##0" },
{ "width": 107, "type": "numeric", "align": "left", "mask": "$#,##0" },
{ "width": 86, "type": "numeric", "align": "left", "mask": "0%" },
{ "width": 86, "type": "numeric", "align": "left", "mask": "0%" }
],
rows: [
{ "height": 67 },
{ "height": 53 },
],
cells: {
"D18": { "format": "0" },
"E18": { "format": "0" },
"H18": { "format": "$#,##0" },
"K18": { "format": "$#,##0" },
"D19": { "format": "0" },
"E19": { "format": "0" },
"D20": { "format": "0" },
"E20": { "format": "0" },
"D21": { "format": "0" },
"E21": { "format": "0" },
"D22": { "format": "0" },
"E22": { "format": "0" },
"D23": { "format": "0" },
"E23": { "format": "0" },
"D24": { "format": "0" },
"E24": { "format": "0" },
"D25": { "format": "0" },
"E25": { "format": "0" },
"D26": { "format": "0" },
"E26": { "format": "0" },
"D27": { "format": "0" },
"E27": { "format": "0" }
},
style: {
"A1:J1": 2,
"K1:L1": 1,
"A2": 3,
"B2": 4,
"C2:E2": 5,
"F2:G2": 6,
"H2:J2": 7,
"K2:L2": 8,
"A3": 9,
"B3": 10,
"C3:E3": 11,
"F3:G3": 12,
"H3:J3": 13,
"K3:L3": 14,
"A4": 15,
"B4": 16,
"C4:L4": 17,
"A5": 15,
"B5": 16,
"C5:E5": 18,
"F5:G5": 19,
"H5:J5": 20,
"K5:L5": 21,
"A6": 15,
"B6": 16,
"C6:L6": 17,
"A7": 15,
"B7": 16,
"C7:E7": 18,
"F7:G7": 19,
"H7:J7": 20,
"K7:L7": 21,
"A8": 15,
"B8": 16,
"C8:L8": 17,
"A9": 15,
"B9": 16,
"C9:E9": 18,
"F9:G9": 19,
"H9:J9": 20,
"K9:L9": 21,
"A10": 15,
"B10": 16,
"C10:L10": 17,
"A11": 15,
"B11": 16,
"C11:E11": 18,
"F11:G11": 19,
"H11:J11": 20,
"K11:L11": 21,
"A12": 15,
"B12": 16,
"C12:L12": 17,
"A13": 15,
"B13": 16,
"C13:E13": 18,
"F13:G13": 19,
"H13:J13": 20,
"K13:L13": 21,
"A14": 22,
"B14": 23,
"C14:E14": 24,
"F14:G14": 25,
"H14:J14": 26,
"K14:L14": 27,
"C15:L15": 1,
"C16": 1,
"D16:F16": 38,
"G16": 1,
"H16:I16": 39,
"J16": 40,
"K16": 41,
"L16": 1,
"C17": 1,
"D17:E17": 28,
"F17": 29,
"G17": 1,
"H17:I17": 42,
"J17": 43,
"K17": 44,
"L17": 1,
"C18": 1,
"D18:E18": 30,
"F18": 17,
"G18": 1,
"H18:I18": 45,
"J18": 46,
"K18": 47,
"L18": 1,
"C19": 1,
"D19:E19": 31,
"F19": 32,
"G19:L19": 1,
"H19:I19": 33,
"C20": 1,
"D20:E20": 30,
"F20": 17,
"G20": 1,
"H20:I20": 33,
"J20": 34,
"C21": 1,
"D21:E21": 31,
"F21": 32,
"G21": 1,
"H21:I21": 33,
"J21": 34,
"M21": 35,
"D22:E22": 30,
"F22": 17,
"H22:I22": 36,
"J22": 34,
"D23:E23": 31,
"F23": 32,
"H23": 33,
"I23": 36,
"J23": 34,
"D24:E24": 30,
"F24": 17,
"H24:I24": 36,
"J24": 34,
"D25:E25": 31,
"F25": 32,
"J25": 34,
"D26:E26": 30,
"F26": 17,
"J26": 34,
"D27:E27": 31,
"F27": 32,
"J27": 34
},
textOverflow: true,
defaultColAlign: "left",
worksheetName: "KPI Data",
defaultRowHeight: 43,
defaultColWidth: 79,
gridline: false,
tableOverflow: true,
minDimensions: [12, 27],
mergeCells: {
"A1": [10, 1],
"A2": [2, 1],
"C2": [3, 1],
"F2": [2, 1],
"H2": [3, 1],
"K2": [2, 1],
"D16": [3, 1]
},
},
{
data: [
["","KPI DASHBOARD","","","","","","","","","","","","","","",""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
[null, "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""]
],
columns: [
{ "width": 24, "type": "text", "align": "left" },
{ "type": "text", "width": 62, "align": "left" },
{ "type": "text", "width": 62, "align": "left" },
{ "width": 62, "type": "text", "align": "left" },
{ "width": 62, "type": "text", "align": "left" },
{ "width": 62, "type": "text", "align": "left" },
{ "width": 62, "type": "text", "align": "left" },
{ "width": 62, "type": "text", "align": "left" },
{ "type": "text", "width": 15, "align": "left" },
{ "type": "text", "width": 60, "align": "left" },
{ "width": 60, "type": "text", "align": "left" },
{ "width": 60, "type": "text", "align": "left" },
{ "type": "text", "width": 60, "align": "left" },
{ "type": "text", "width": 60, "align": "left" },
{ "type": "text", "width": 60, "align": "left" },
{ "type": "text", "width": 60, "align": "left" },
{ "type": "text", "width": 38, "align": "left" }
],
rows: [
{ "height": 77 },
{ "height": 29 },
{ "height": 29 },
{ "height": 29 },
{ "height": 29 },
{ "height": 29 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 118 },
{ "height": 71 },
{ "height": 58 },
{ "height": 51 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 36 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 30 },
{ "height": 29 },
{ "height": 190 },
{ "height": 147 },
{ "height": 127 },
{ "height": 118 },
{ "height": 30 }
],
style: {
"B1:J1": 0,
"K1:M1": 1,
"A31": 37,
"B31:Q31": 35
},
textOverflow: true,
defaultColAlign: "left",
worksheetName: "KPI Dashboard",
defaultColWidth: 79,
gridline: false,
tableOverflow: true,
freezeRowControl: true,
freezeColumnControl: true,
freezeRows: [0],
minDimensions: [17, 42],
mergeCells: {
"B1": [9, 1],
"B17": [7, 4],
"J17": [7, 4],
"B38": [15, 4]
},
media: [
{
"id": "19bb08c4-6a32-441b-90e5-9db66be86313",
"type": "chart",
"options": {
"type": "bar",
"range": "'KPI Data'!C3:E13",
"labels": 0,
"datasets": [1, 0],
"title": {
"text": "BUDGET",
"font": { "size": 40 }
},
"legend": {
"position": "bottom",
"display": true,
},
"series": [
{ "color": "#92D050" },
{ "color": "#00B050" }
],
},
"cellAnchor": "B2",
"left": 0,
"top": 0,
"width": 434,
"height": 408,
"zIndex": 3,
},
{
"id": "afed067c-148d-42e1-aff6-49c328d7a22c",
"type": "chart",
"options": {
"type": "bar",
"range": "'KPI Data'!H3:J13",
"labels": 0,
"datasets": [1, 0],
"title": {
"text": "REVENUE",
"font": { "size": 40 }
},
"legend": {
"position": "bottom",
"display": true,
},
"series": [
{ "color": "#B4C7E7"},
{ "color": "#2E75B6"}
],
},
"cellAnchor": "J2",
"left": 0,
"top": 0,
"width": 421,
"height": 408,
"zIndex": 3,
},
{
"type": "chart",
"width": 434,
"height": 300,
"options": {
"type": "bar",
"range": "'KPI DATA'!H17:I18",
"title": { "text": "TOTAL BUDGET" },
"legend": { "position": "bottom", "display": true },
"series": [
{ "color": "#B4C7E7"},
{ "color": "#2E75B6"}
]
},
"id": "717cc7d8-abbe-4842-b394-b64ad59ed550",
"top": 0,
"left": 0,
"cellAnchor": "B17",
"zIndex": 4,
},
{
"type": "chart",
"width": 420,
"height": 300,
"options": {
"type": "bar",
"range": "'KPI DATA'!J17:K18",
"title": { "text": "TOTAL REVENUE" },
"legend": { "position": "bottom", "display": true },
"series": [
{ "color": "#92D050"},
{ "color": "#00B050"}
]
},
"id": "fd82c8d4-0409-4eab-8033-e09f7bc9d8cd",
"top": 0,
"left": 0,
"cellAnchor": "J17",
"zIndex": 4,
},
{
"id": "df9ad462-1f05-46af-8b3f-d3d2a11e1212",
"type": "chart",
"options": {
"type": "line",
"range": "'KPI DATA'!K3:L13",
"labels": 0,
"title": {
"text": "PROFIT MARGINS",
"font": { "size": 40}
},
"legend": {
"position": "bottom",
"display": true,
},
"series": [
{
"borderColor": "#4472C4",
"color": "#00B0F0",
},
{
"borderColor": "#FFC000",
"color": "#ED7D31",
}
],
},
"cellAnchor": "B22",
"left": 0,
"top": 0,
"width": 873,
"height": 444,
"zIndex": 3,
},
{
"type": "chart",
"width": 870,
"height": 584,
"options": {
"type": "column",
"range": "'KPI DATA'!D17:F27",
"labels": 0,
"datasets": [1, 2],
"title": {
"text": "LIABILITIES vs EQUITY per Year",
},
"legend": { "position": "bottom", "display": true },
"series": [
{ "color": "#ED7D31"},
{ "color": "#00B050"}
]
},
"id": "a1699cf7-e71c-45d5-91a2-4a47c195bb33",
"top": 0,
"left": 0,
"cellAnchor": "B38",
"zIndex": 4,
}
],
}
],
bar: true,
toolbar: true,
onload: function(instance) {
instance.openWorksheet(1);
}
});
}
}