JSFiddle - React, Tailwind, and code Playground

by icodeforlove

JavaScript

function renderLibratoChart({width, height, id, duration, email, token}) {
  let iframe = document.createElement('iframe');
  iframe.width = width;
  iframe.height = height;
  iframe.style.cssText = 'border: none';
  iframe.src = `data:text/html;base64,${btoa(`
    <div
      class='librato-display-media'
      data-chart_id='${id}'
      data-duration='${duration}'
      data-height='${height - 100}'
      data-width='${width}'
      data-source='*'
    ></div>
    <${'script'}
      type='text/javascript'
      src='https://sdk.librato.com/embedding/librato-sdk-v1.2.1-min.js'
      charset='utf-8'
      data-librato_email='${email}'
      data-librato_token='${token}'>
    </${'script'}>
  `)}`;
  return iframe;
}

document.body.appendChild(renderLibratoChart({
	width: 600, 
  height: 300, 
  duration: 3600, 
  id: 123454, // chart ID
  email: 'EMAIL', 
  token: 'TOKEN'
}));