JavaScript Plot Graph: Plot the values of a function in a canvas

Recommend this page to a friend!
  Info   View files Example   View files View files (20)   DownloadInstall with Composer Download .zip   Reputation   Support forum   Blog    
Ratings Unique User Downloads Download Rankings
Not enough user ratingsTotal: 71 All time: 465 This week: 4Up
Version License JavaScript version Categories
jplotgraph 1.1.0Custom (specified...5Graphics
Description Author

This package can plot the values of a function in a canvas.

The is an object that can render the values of an equation function in a bidimensional area defined inside a canvas object.

The equation function is defined by another object that also defined how the points in the canvas are drawn.

Another objects allows the user to change the graph points using mouse movements.

Innovation Award
JavaScript Programming Innovation award winner
December 2016
Winner


Prize: One downloadable e-book of choice by O'Reilly
Graphs are often used to visualize the way the values of functions evolve within a range of input values.

This package can visualize the values of functions using canvas to display them on a Web page.

It uses callback functions of other objects to return the values of the current function.

The values of the functions in the graph may be changed interactively by the user with the mouse.

Manuel Lemos
Picture of Leonardo Mauro Pereira Moraes
  Performance   Level  
Name: Leonardo Mauro Pereira ... <contact>
Classes: 5 packages by
Country: Brazil Brazil
Innovation award
Innovation award
Nominee: 3x

Winner: 3x

Details

jPlotGraph

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.

Package

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 plot.events.js - 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 ~

  Files folder image Files  
File Role Description
Files folder imageassets (3 directories)
Files folder imagedist (1 directory)
Files folder imageexample (1 file)
Accessible without login Plain text file LICENSE Lic. License text
Accessible without login Plain text file README.md Doc. Documentation

  Files folder image Files  /  assets  
File Role Description
Files folder imagecss (9 files)
Files folder imageimg (1 file)
Files folder imagejs (2 files, 1 directory)

  Files folder image Files  /  assets  /  css  
File Role Description
  Accessible without login Plain text file bootstrap-theme.css Data Auxiliary data
  Accessible without login Plain text file bootstrap-theme.css.map Example Example script
  Accessible without login Plain text file bootstrap-theme.min.css Data Auxiliary data
  Accessible without login Plain text file bootstrap-theme.min.css.map Data Auxiliary data
  Accessible without login Plain text file bootstrap.min.css Data Auxiliary data
  Accessible without login Plain text file bootstrap.min.css.map Data Auxiliary data
  Accessible without login Plain text file lumen.bootstrap.min.css Data Auxiliary data
  Accessible without login Plain text file paper.bootstrap.min.css Data Auxiliary data
  Accessible without login Plain text file style.css Data Auxiliary data

  Files folder image Files  /  assets  /  img  
File Role Description
  Accessible without login Image file bg-grafic.png Icon Icon image

  Files folder image Files  /  assets  /  js  
File Role Description
Files folder imagemath (1 file)
  Plain text file bootstrap.min.js Class Class source
  Plain text file jquery.min.js Class Class source

  Files folder image Files  /  assets  /  js  /  math  
File Role Description
  Accessible without login Plain text file math.round.js Aux. Auxiliary script

  Files folder image Files  /  dist  
File Role Description
Files folder imagejPlotGraph (4 files)

  Files folder image Files  /  dist  /  jPlotGraph  
File Role Description
  Plain text file plot.axis.js Class Class source
  Plain text file plot.events.js Class Class source
  Plain text file plot.func.linear.js Class Class source
  Accessible without login Plain text file plot.func.linear.ui.js Example Example script

  Files folder image Files  /  example  
File Role Description
  Accessible without login Plain text file index.html Example Example

 Version Control Unique User Downloads Download Rankings  
 100%
Total:71
This week:0
All time:465
This week:4Up