Mechanomy

Software for Pre-CAD systems design

SimpleGraph

The SimpleGraph application wraps Plotly.js in a simple interface to allow graphs to be made easily. In contrast to a static image of a plot, graphs created through this element are interactive, letting users pan and zoom labeled data, helping them to more quickly understand the trends being shown.

If your website is written in WordPress, see our WordPress demonstration website.

As before, the library is loaded by:

<script defer src="https://dist.mechanomy.com/SimpleGraphWeb/simpleGraph.js"></script>

The graph is created by this somewhat involved element; linebreaks may be added to the element for clarity:

<div class="simpleGraph" id="uniqueGraphId" 
     x="10:20:300"
     y1="[0.03, 1, 4]" line1="dot, red, 1" label1="robot"
     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 [kg/m^3]"
     ylabel="pressure [Pa]"
     title="A Simple Graph">
</div>

For simplicity, SimpleGraph is limited to displaying point and polynomial data. The point format is shown by line 3 as

  • xy3="10,701;5,-500;100,810; 200,0" with the points in x,y pairs separated by semicolons.

The polynomial format is demonstrated by graph lines 1 and 2, where

  • x="10:20:300" specifies a range of x locations between 10 and 300, spanned by 20 unit steps,
  • y1="[0.03, 1, 4]" describes the 2nd-order polynomial coefficients of y1 = 0.03x^2 + 1*x + 4 for line1, and
  • y2="[0.0001, -0.03, -8, -10]" the 3rd-order polynomial of y2 = 0.0001x^3 - 0.03x^2 - 8x - 10 for line2. All polynomial lines are required to follow the same x range, with subsequent lines incrementing the number after y, with all line, marker, and label associated by the same number.

These lines are styled by

  • line1="dot, red, 1" for a red dotted line of width 1px,
  • line2="dash, #0069ff99, 10" for a dashed, translucent blue line of width 10px, with
  • marker2="dot, 8, green" adding green dots of 8px diameter to the dashed blue line.

Lines are displayed by default, while markers are normally omitted; hence marker3="hourglass, 10, magenta" adds 10px hourglasses to default line of xy3, with everything colored magenta. Lines may be omitted by setting their width to zero line2="solid, black, 0". Labels applied with label1="robot" appear when the cursor hovers over one of the lines or markers.

Axes labels are specified via

  • xlabel="density [kg/m^3]"
  • ylabel="pressure [Pa]"

and the title similarly

  • title="A Simple Graph"

These attributes will cover many scenarios but may be tedious for users; send us a quick description if you would like SimpleGraph customized to your application.

Development Status

SimpleGraph is under continued development and is released under the MIT License.

On third-party JavaScript

No two websites are written or hosted the same way, and the various organizations responsible for these will have a variety of policies on the use of third-party libraries. Our Javascript libraries are cleanly written to provide only the capabilities described. They do not accept personally-identifiable information from your users, nor do they utilize cookies or other local storage technologies to function and generally will not require you to display a cookie banner or other notice (understanding that compliance with any applicable authority remains your duty).

Mechanomy respects you and your users and does not perform any fingerprinting or usage tracking in these libraries. When you place one of our <script> tags on your page, the browsers of visitors to your website will download our library; this request is the only information Mechanomy receives from you or your users.

These libraries are written in vanilla JavaScript and bundled via WebPack. External dependencies are Plotly.js for SimpleGraph and three.js for ViewModel.

Please note that libraries loaded from dist.mechanomy.com, as described above, may change at any time according to our development and maintenance needs. While we will endeavor to not change functionality, this cannot always be avoided. If you would like to receive notice of these changes, please email us.

We are also happy to assist you in evaluating these libraries by creating a static prototype of your website for your internal evaluation, please send us a link to the exact page, the desired library and functionality, and any details you know about your web framework or host.