Angular 5 Graphing Component


I often work on highly interactive applications and components, the constituents of which are often difficult to test and demonstrate outside of some sense of position in a physical space.  The space must be represented in a browser-based environment, so we are talking about a function graph.  Much of my computational work deals with physical quantities or assets that can not be negative, so a first-quadrant (non-negative x and y), multi-layer graph is sufficient.  This allows the graph engine to be optimized for single-quadrant display, which results in a very lightweight implementation.

I have implemented an Angular 5 graphing component that is built on top of the Typescript Math Toolkit quadrant class (TSMT$Quadrant) and its supporting class library.  This includes pre-release versions of solid/dashed/dotted line decorators for automatic line drawing without changing the underlying Canvas drawing code.

My initial thought was to restrict this engine to my client-only Angular Dev Toolkit, however, I believe the baseline code is useful for the entire Angular community.  While I will continue to enhance this engine in the ADT, the baseline code is now fully open source.

Here is a quick example that uses the Typescript Math Toolkit linear regression class.


The template is extremely simple,

<adt-graph title="Typescript Math Toolkit Linear Regression" xAxisLabel="X-Data" yAxisLabel="Y-Data"></adt-graph>

More information and additional information on usage can be obtained from the Github repo and I know you want the code more than more verbiage, so point your friendly neighborhood browser here and enjoy!

Comments are closed.