JSFiddle - React, Tailwind, and code Playground

by Umair Rafiq

HTML

<script src="https://widget-staging.socialmarketanalytics.com/heatmap_widgets/source/js/sma_widget.js?t=12"></script>
<h3>SMA Heatmap LongTerm</h3>
<div id="sma_widget_container"></div>

<h3>SMA All Cards</h3>
<div style="height:422px" id="sma_card_container2"></div>

<h3>SMA Cards</h3>
<div style="height:314px;" id="sma_card_container"></div>

<h3>SMA Intra Day Chart</h3>
<div id="sma_intraday_container"></div>

<h3>SMA Intra Day Detail Chart</h3>
<div style="height:100%" id="sma_intraday_detailed_container"></div>

JavaScript

// SMA cards widget init
SMA.SMACards({
  container: 'sma_card_container',
  width:'250',
  height: '100%',
  apikey: 'a8ba49e8bd374fb6d96f7dc63616d3ee43494ee3',
  sma_card_container: true,
  ontology: 'cme_metals',
  hideHeader:true,
  applySlider: true,
  updateIntraday: true
});  

// SMA intra day chart for GOLD
SMA.SMAIntraDay({
  container: 'sma_intraday_container',
  width:'200',
  height: '100%',
  apikey: 'a8ba49e8bd374fb6d96f7dc63616d3ee43494ee3',
  ontology: 'cme_micro',
  subjects:'CNH_F',
  showEnlarge: false,
  hideHeader:true
});

// SMA intra day detail chart for GOLD
SMA.SMAIntraDayDetail({
  container: 'sma_intraday_detailed_container',
  width:'100%',
  height: '420',
  apikey: 'a8ba49e8bd374fb6d96f7dc63616d3ee43494ee3',
  ontology: 'cme_metals',
  subjects:'GC_F',
  hideHeader:true
});