foo123 / plot.js

Simple chart and function graph plotting library which can render to Canvas, SVG or plain HTML

Plot.js

Plot.js: simple chart and function graph plotting library which can render to Canvas, SVG or plain HTML

46 kB minified

let canvasPlot = Plot(Plot.Renderer.Canvas(document.getElementById('container-canvas')), {
    background: {
        color: '#ffffff'
    },
    line:{
        size: 3,
        color: '#ff0000'
    },
    axes: {
        x: {
            color: '#000000',
            ticks: {color: 'rgba(0,0,0,0.5)', step: 0.5}
        },
        y: {
            color: '#000000',
            ticks: {color: 'rgba(0,0,0,0.5)', step: 0.5}
        }
    }
});

canvasPlot
    .graph((x)=>Math.sin(4*x)/x, -3, 3)
    .label({x:'right',y:'top'},{x:'auto',y:'auto'}, 'f(x) = sin(4*x)/x', {label:{border:{size:0},fill:'rgba(255,255,255,0.7)',text:{size:20}}})
;

let htmlPlot = Plot(Plot.Renderer.Html(document.getElementById('container-html')), {
background: {
        color: '#ffffff'
    },
    axes: {
            x: {
                color: '#000000',
                ticks: {color: 'rgba(0,0,0,0.2)', step: 10}
            },
            y: {
                color: '#000000',
                ticks: {color: 'rgba(0,0,0,0.2)', step: 10}
            }
        }
});

htmlPlot.chart('vbar', data, {colors:colors, labels:labels});

let svgPlot = Plot(Plot.Renderer.Svg(document.getElementById('container-svg')), {
background: {
        color: '#ffffff'
    }
});

svgPlot.chart('pie', data, {colors:colors, labels:labels});

see also:

• Abacus advanced Combinatorics and Algebraic Number Theory Symbolic Computation library for JavaScript, Python
• MOD3 3D Modifier Library in JavaScript
• Geometrize Computational Geometry and Rendering Library for JavaScript
• Plot.js simple and small library which can plot graphs of functions and various simple charts and can render to Canvas, SVG and plain HTML
• HAAR.js image feature detection based on Haar Cascades in JavaScript (Viola-Jones-Lienhart et al Algorithm)
• HAARPHP image feature detection based on Haar Cascades in PHP (Viola-Jones-Lienhart et al Algorithm)
• FILTER.js video and image processing and computer vision Library in pure JavaScript (browser and node)
• Xpresion a simple and flexible eXpression parser engine (with custom functions and variables support), based on GrammarTemplate, for PHP, JavaScript, Python
• Regex Analyzer/Composer Regular Expression Analyzer and Composer for PHP, JavaScript, Python
• GrammarTemplate grammar-based templating for PHP, JavaScript, Python
• codemirror-grammar transform a formal grammar in JSON format into a syntax-highlight parser for CodeMirror editor
• ace-grammar transform a formal grammar in JSON format into a syntax-highlight parser for ACE editor
• prism-grammar transform a formal grammar in JSON format into a syntax-highlighter for Prism code highlighter
• highlightjs-grammar transform a formal grammar in JSON format into a syntax-highlight mode for Highlight.js code highlighter
• syntaxhighlighter-grammar transform a formal grammar in JSON format to a highlight brush for SyntaxHighlighter code highlighter
• SortingAlgorithms implementations of Sorting Algorithms in JavaScript
• PatternMatchingAlgorithms implementations of Pattern Matching Algorithms in JavaScript
• CanvasLite an html canvas implementation in pure JavaScript
• Rasterizer stroke and fill lines, rectangles, curves and paths, without canvaσ
• Gradient create linear, radial, conic and elliptic gradients and image patterns without canvas
• css-color simple class to parse and manipulate colors in various formats