Recommend this page to a friend!
  Classes of Leonardo Mauro Pereira Moraes   JavaScript Plot Graph   Download  
Role: Documentation
Content type: text/markdown
Description: Documentation
Class: JavaScript Plot Graph
Plot the values of a function in a canvas
Author: By
Last change: Update of
Date: 2 years ago
Size: 1,783 bytes


Class file image Download


Links: Online Example and JS Classes

This package build a graph (cartesian plane) in Canvas [HTML5] through a determinate equation. Any Canvas element can be used to plot the graph, until with width and height responsives.

The Online Example show a plot of linear function with many options to user interface. The user can in real-time do changes to the values of variables, event.mousemove to see a (x, y) in draw and event.mouseclick to pause the draw events. Also, use Canvas responsive (with Bootstrap) to display the program in various devices. This example is in the files.


The package is in ./dist/jPlotGraph/, and are defined by two main classes: fileplot.axis.js -class* PlotGraph()

*  This class management all system of draw graph. Here you can modify colors, equation, axis, sizes, margins and texts.   
  • file - json.functions `events` * These functions realize the user interface (UI) interaction (like: mousemove, mouseleave and click). Here you can modify how behave the UI with the Canvas element.

But, the package don't work without func_mmy and func_plot. That's functions have to be included before of the plot graph. Theses functions define how draw the equation and how fit max and min values of f(x). See file plot.func.linear.js, used in example.

Also look ~