Simple and Fast Mathematical Function Plotter For The Web | Sidus

Sidus is a simple and fast functional illustrator that helps create zoomable, scalable, and downloadable graphs of mathematical functions.

Intuitive input shows that you’ve drawn the functions as you write them on paper rather than squeezing everything into one line.

Table of Contents

Using Sidus

This is the best part about Sidus. It is very easy to use

  • Enter the function, just as you write it on paper.
  • Enter the x domain.
  • Voila! You get the graph for exactly what you want.

Interact with your graph

  • Move around the chart as you like.
  • Zoom in to see details.
  • Save a PNG image of what you just drew
  • Return to the default view.

How to make use of it:

1. Load jQuery and other resources into the document.

<!-- mathlive -->
<script src="/path/to/cdn/mathlive.min.js"></script>
<!-- Math.js -->
<script src="/path/to/cdn/math.js"></script>
<!-- Plotly -->
<script src="/path/to/cdn/plotly-latest.min.js"></script>
<!-- jQuery -->
<script src="/path/to/cdn/jquery.min.js"></script>
<!-- Bootstrap -->
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/bootstrap.bundle.min.js"></script>

2. Load the functional plotter files into the document.

<link rel="stylesheet" href="plotertestui.css" />
<script src="plotter2.0.js"></script>

3. Generate the HTML for the job illustrator.

<div class="container-fluid mb-0">
  <div class="row h-100">
    <div class="col-md-4 col-12 col-lg-3 h-md-100 p-2 " id="controls">
      <ul class="w-100 p-0" id="functionslist">
        <li class=" mt-2 mb-1 row funcitem m-2">
          <div class="col-2 text-center p-0 pt-2 funcnot">f(x) =</div> 
          <math-field class="col-8 p-0 " id="inputfunc" onchange="plotgraph()"></math-field>
          <button class="col-2 p-0 butn" onClick="findderivative()">f'(x)</button> 
    <main class="col-md-8 col-12 col-lg-9 h-md-100" id="workspace">
      <div id="plotarea"></div>

Fast Maths Function Plotter In JavaScript, Sidus Plugin/Github

See Demo And Download

Official Website(beetrandahiya): Click Here

This superior jQuery/javascript plugin is developed by beetrandahiya. For extra advanced usage, please go to the official website.

Related Posts


How to Create a Simple Cookie Banner Consent Using Bootstrap 4

Cookie Consent Popup Javascript – Quick and simple tutorial for creating a simple Bootstrap cookie banner. If you have a website or blog with people visiting or…


Create Custom HTML Terminals With Pure JavaScript | shell.js

Custom HTML Terminals is A JavaScript library to create HTML terminals on web pages. The shell js JavaScript library offers a straightforward method to create Ubuntu, OS X,…


Bootstrap Alert, Confirm, and Flexible Dialog Boxes | Bootbox

Bootbox.js is a small JavaScript library that allows you to create programming dialogs using Bootstrap templates, without having to worry about creating, managing, or removing any required…


An Accessible Touch-enabled Slider Web Component | fg-carousel

fg-carousel Slider – A simple & modern slider web component to create versatile, accessible, touch-enabled picture carousels utilizing CSS scroll snap, Custom Element, and Intersection Observer API….


A Lightweight and Efficient Tags Input Component in Vanilla JS | tagify

tagify transforms an input field or textarea into a tags component, in an easy and customizable way, with great performance and a small code footprint, full of…


A Lightweight Library to Copy Text to Clipboard | CopyJS

CopyJS is a lightweight JavaScript library that allows you to copy plain text or HTML content to the clipboard. Must Read: Tiny Library for Copy Text In…