Skip to content

Latest commit

 

History

History
128 lines (84 loc) · 7.05 KB

README.md

File metadata and controls

128 lines (84 loc) · 7.05 KB
Raw

ChartsLab-Geometry

Visualizations typically consist of discrete graphical Geometries, such as symbols, arcs, lines and areas, bars, pie. This module provides a variety of shape generators for your convenience, and easy to use in HTML5_Canvas

Install

You can install this micro-library by download the latest version or by downloading the full bundle ChartsLab library.

<script src="./Geometry.js"></script>

Requires

This micro-library requires Scales for data encoding and you can use Stat or/and Filter for easy and simple data entry

var line = Geometry.Line()
              .xScale(x)
              .yScale(y)
              .xVector(xVec)
              .yVector(yVec)
              .Draw(ctx);

Try ChartsLab-Geometry in your browser.

API Reference

  • Arcs

    Arc is the general shape/geometry naming of many plotting shapes like pie, daunat, coxcomb charts and these shapes are popular in data analysis and business intellegence work. And here in chartsLab we simplified bars in some API easy to use functions that you can control the plot with it.

    Requires Scale For data Scaling and mapping, and maybe data-filter for easy to invoke datasets.

          Geometry.Arc()
          .Position([200,200])
          .Frequency(100)
          .Values([30,30,30,10])
          .Colors(['red','blue','green','yellow'])
          .Radius([50,70,20,100])
          .InnerRadius(0)
          .Centeroid(function (ctx, start, end, perc) {
              ctx.fillStyle = "#000000";
              ctx.fillText( perc,end[0], end[1]);
          })
          .Draw(context);

    # Arc.Draw( ctx Context)

    This function takes canvas context and be ready for drawing in it, you maybe prepare canvas before use see ChartCore for more details. Warn you can't give this function any thing except canvas context or you will have raise an error for more details about errors see ErrorHandler.

    # Arc.Draw( ctx Context)

    # Arc.Frequency( freq Integer)

    # Arc.Position([StartPoint Array], [EndPoint Array])

    # Arc.Radius( rad Integer)

    # Arc.InnerRadius( rad Integer)

    # Arc.Values([dataValues Array])

    # Arc.Colors([colorsValues Array])   # Arc.Centeroid( funcCallback Function)

  • Areas

  • Bars

    Bars(Intervals) is one of common-used plots and primitives in data visualization. And here in chartsLab we simplified bars in some API easy to use functions that you can control the plot with it.

    Requires Scale For data Scaling and mapping, and maybe data-filter for easy to invoke datasets.

          Geometry.Bar.
              .xScale(x)
              .yScale(y)
              .xVector(xVec)
              .yVector(yVec)
              .Draw(ctx);

    # Bar.Draw( ctx Context)

    This function takes canvas context and be ready for drawing in it, you maybe prepare canvas before use see ChartCore for more details. Warn you can't give this function any thing except canvas context or you will have raise an error for more details about errors see ErrorHandler.

    # Bar.Size(Size Integer)

    Size Take an Integer Positive value for all Bars sizes(width), you can customize it be a column histogram see Column

    # Bar.Position([StartPoint Array], [EndPoint Array])

    Position Take 2 Array each contain 2 value for start and end coordinates, you can control the position of start you Bar chart from here (But not the axis see Axis)

    # Bar.xScale(y Scale)

    Scale(X) is the mapping function that maps each bar to certain position along X Axis based on it's X value, see Scale for more details, this function simpilify for you to find the position and this is the only required class need for Bar plots.

    # Bar.yScale(x Scale)

    Scale(Y) is the mapping function that maps each bar to certain position along Y Axis based on it's Y value, see Scale for more details, this function simpilify for you to find the position and this is the only required class need for Bar plots.

    # Bar.xVector(Vector Vector)

    Vector(X) is taking a vector that represent the bars X values, Warn if you tried to pass an array this function will raise and error see ErrorHandler, you can use Data-Filter for more details, but it's not required actually, you can manipulate any array to work with it but it's easlt to use Data-Filter.

    # Bar.yVector(Vector Vector)

    Vector(Y) is taking a vector that represent the bars Y values, Warn if you tried to pass an array this function will raise and error see ErrorHandler, you can use Data-Filter for more details, but it's not required actually, you can manipulate any array to work with it but it's easlt to use Data-Filter.

    # Bar.Column(flag Boolean)

    Column is simple function that's ask you to choose a column bar or row one, it's for simplicity but you can use rotation see ChartCore for more details in this topic

    # Bar.Colors(mu Scale)

    Scale(mu) is the mapping function that maps each bar to certain color gradiant, see Color-Scale for more details, this function simpilify for you to find the color and this is the only required class need for Bar plots.

  • Curves

  • Custom Curves

  • Custom Symbol Types

  • Lines

  • Pies

  • Stacks

  • Symbols