The SimpleGraph component wraps Plotly.js in a simple interface to allow graphs to be made through a single element. In contrast to a static image of a plot, graphs created through this element are interactive, letting users pan and zoom labeled data. This helps users to more quickly understand the trends being shown.
<script defer src="https://dist.mechanomy.com/EasyElements/simpleGraph.js"></script>
<script defer src="https://cdn.plot.ly/plotly-2.20.0.min.js" charset="utf-8"></script>
<div class="simpleGraph" id="uniqueGraphId" x="10:20:300" y1="[0.03, 1, 4]" line1="dot, red, 1" label1="do-hickey" y2="[-0.03, -8, -10]" line2="dot, #0069ff99, 10", marker2="dot, 8, green" label2="walrus" xy3="10,701;5,-500;100,810; 200,0" label3="region" marker3="hourglass, 10, magenta" xlabel="density" xunits="lbm/in3:1, kg/m3:0.000036127" ylabel="pressure" yunits="psi:1, Pa:6895, MPa:0.006895" title="A Simple Graph"></div>The above three lines need to be added as Custom HTML within the WordPress editor. The first line loads the SimpleGraph library from Mechanomy’s server, and the second loads the Plotly graphing library. With both libraries loaded, the third line specifies the graph in a format documented here.