Requests by channel: an online Google chart and embedded source table

Select the code and use your copy shortcut. Changes in this preview are temporary.

<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Requests by channel</title><style>*{box-sizing:border-box}body{margin:24px auto;padding:0 16px;max-width:800px;font:16px/1.6 system-ui;color:#202834}h1{font-size:clamp(25px,4vw,34px);line-height:1.2}h2{font-size:20px}button,input{font:inherit;padding:8px;border:1px solid #8b99ab;border-radius:4px}button{cursor:pointer}button:disabled{cursor:default;opacity:.65}label{font-weight:600}table{width:100%;border-collapse:collapse}th,td{border-bottom:1px solid #d4dce6;padding:8px;text-align:left}caption{text-align:left;font-weight:600}img{max-width:100%;height:auto}#status{min-height:1.6em}</style></head><body><h1>Requests by channel</h1><p>Fictional example · <strong>35 requests</strong> in the prepared dataset.</p><p id="status" role="status">Loading the online Google Charts library…</p><div id="chart" style="width:100%;min-height:280px"></div><table><caption>Source rows, available while the chart loads</caption><thead><tr><th scope="col">Channel</th><th scope="col">Requests</th></tr></thead><tbody><tr><th scope="row">Email</th><td>16</td></tr><tr><th scope="row">Chat</th><td>11</td></tr><tr><th scope="row">Phone</th><td>8</td></tr></tbody></table><p>This file needs a connection for Google Charts. The source table is embedded in the file.</p><script src="https://www.gstatic.com/charts/loader.js"></script><script>
const status=document.querySelector('#status');let chart,data;window.chartReady=false;
function drawRequests(){try{if(!window.google?.visualization)throw Error('Chart library unavailable');if(!data)data=google.visualization.arrayToDataTable([['Channel','Requests'],['Email',16],['Chat',11],['Phone',8]]);if(!chart)chart=new google.visualization.ColumnChart(document.querySelector('#chart'));window.chartReady=false;const current=chart;google.visualization.events.addOneTimeListener(chart,'ready',()=>{if(chart!==current)return;window.chartReady=true;status.textContent='Online chart loaded. Source values: Email 16, Chat 11, Phone 8.';});chart.draw(data,{title:'Fictional requests by channel',legend:{position:'none'},height:280,colors:['#485f9b'],chartArea:{left:45,right:16,top:45,bottom:50}});window.chartData=data;}catch(error){window.chartReady=false;chart=null;document.querySelector('#chart').replaceChildren();status.textContent='Chart unavailable. Read the source table below.';}}
window.drawRequests=drawRequests;
try{google.charts.load('current',{packages:['corechart'],language:'en'}).then(drawRequests).catch(()=>{status.textContent='Chart unavailable. Read the source table below.';});}catch(error){status.textContent='Chart unavailable. Read the source table below.';}
let previousWidth=0;new ResizeObserver(entries=>{const width=Math.round(entries[0].contentRect.width);if(width!==previousWidth){previousWidth=width;if(window.chartReady)drawRequests();}}).observe(document.querySelector('#chart'));
setTimeout(()=>{if(!window.chartReady)status.textContent='Chart unavailable. Read the source table below.';},15000);
</script></body></html>