simple-line-chart

    1.1.2 • Public • Published

    Line

    npm version

    Dead simple line chart in webgl. Demo

    4.8KB after gzip.

    Install

    $ npm install simple-line-chart

    Simple Example

    import line from "simple-line-chart";
     
    line({
      canvas: document.querySelector("canvas"),
      data: [100, 200, 300, 200, 400, 100]
    });

    Api

    line(options: Options): Line

    /* All available options */
    interface Options {
      canvas: HTMLCanvasElement; // the canvas to render to. Required.
      data: Data[]; // check out Data type definition below. Required.
      downsample?: boolean | number; // default true.
      color?: {r: number, g: number, b: number}; // line color in rgb.
      backgroundColor?: {r: number, g: number, b: number}; // background color in rgb.
      onHover?: (data: {x:number, y:number}) => void; // interactive
    }
    /**
     * Data type could be one or two dimensional array
     * For example:
     * [100, 250, 70, 180...]
     * or
     * [[2010, 100], [2011, 250], [2012, 70], [2013, 180]...]
     * */
    type Data = Array<number> || Array<[number, number]>

    Highlights

    How the line is drawn?

    Due to limitations of the OpenGL Core Profile on most platforms, the maximun line width is not constant(mostly is 1.0). So instead of drawing lines with GL_LINES, we build line segments with triangles, the so called Triangulated Lines.

    Downsampling

    Internally this lib implemented LTTB data downsampling algorithm and use it for better visualisation output. LTTB is short for Largest Triangles Three Buckets, which is introduced on Sveinn Steinarsson's paper Downsampling Time Series for Visual Representation. Check it out for more information.

    To turn off the optimization and get the original visualisation, you could set downsample: false. In addition, this option allows you to set a threahold for output points. You can do that by providing a number.

    For example:

    line({
      // ...
      canvas: document.querySelector('#canvas-original')
      downsample: false
    });
     
    line({
      // ...
      canvas: document.querySelector('#canvas-downsampled')
      downsample: 60 // the output will contain less than 60 points.
    });

    License

    MIT (Chuang Yu cyu9960@gmail.com)

    Install

    npm i simple-line-chart

    DownloadsWeekly Downloads

    39

    Version

    1.1.2

    License

    MIT

    Unpacked Size

    175 kB

    Total Files

    12

    Last publish

    Collaborators

    • cyyyu