g2d-chart v0.5.4

g2.chart

g2.chart is an important brick for g2.js being an engineers and scientists graphics tool. g2.chart as a g2 addon generates x/y-line charts only, but it does that very well.

Example: first chart

<canvas id="c" width="250" height="175"></canvas>
<script src="./g2/g2.js"></script>
<script src="./g2.chart.js"></script>
<script>
  g2().cartesian()
      .chart({ x:35, y:35, b:200, h:120,
               funcs:[
                 { data:[-2,6,0,-2,2,1,4,1,6,5], 
                   fill:true, 
                   dots:true }
               ],
             })
      .exe(document.getElementById("c").getContext("2d"));
</script>

Chart usage

g2.chart introduces a new chart command, which expects a single javascript object specifying the chart properties. In order to use it properly you need to set g2's cartesian flag. You want to set the chart dimensions by specifying the lower left corner x and y as well as width b and height h of the rectangular chart area. Please note, that chart title, axis ticks, labels and titles are not included in that dimensions.

Chart functions, range and style

Line charts display functional relations. These relations can be numerically represented via datasets or algebraically via functions. g2.chart offers both representations. A single chart can contain multiple functions and even mix numerical and algebraic forms.

The chart x-value range is extracted from available datasets or must be explicitly specified. Its y-value range can be derived from both datasets and algebraic functions or - again - be explicitly set.

Example: multiple functions

g2().cartesian()
    .chart({x:25,y:25,b:200,h:100,
            title:{text:"sine + tan"},
            xmin:-Math.PI/2,xmax:2*Math.PI,
            ymin:-3,ymax:3,
            funcs:[
              {fn:Math.sin,dx:Math.PI/30,fill:true},
              {fn:Math.tan,dx:Math.PI/90,fill:true}
            ]})
    .exe(ctx);

In this example the x-value range is explicitely set by xmin and xmax. It is valid then for all functions. The y-value range is also explicitely set by ymin and ymax. That is done here only, because the tan-function has singularities at odd multiples of pi/2. So its chart is simply clipped to the desired range of [-3,3].

Please note that we didn't specify a color for displaying the functions in the last example. g2.chart provides a small set of default colors for sequentially assigning them to functions without explicite color definitions. If the fill property is set to true, the function chart is filled with respect to the zero x-axis using its semi-transparent function color.

Example: Axis properties

g2().cartesian()
    .chart({ x:35,y:35,b:200,h:100,
             title:{ text:"sin(φ)"},
                     xmin:-Math.PI/2,xmax:2*Math.PI,
                     funcs:[
                       {fn:Math.sin,dx:Math.PI/30,fill:true}
                     ],
                     xaxis: {
                       title:"φ",
                       grid:true
                     },
                     yaxis: {
                       title:"sin(φ)",
                       origin:true
                     }
                   })
    .exe(ctx);

Chart API

After a chart object is created, we might want to interact with it then. So we would like to request canvas coordinates for certain chart area coordinates. There is a small API for supporting tasks like this.

It is possible to place markers on chart functions after they are generated. For this we need to create a standalone chart instance via g2.Chart.create first.

Example: chart marker

var ctx = document.getElementById("c").getContext("2d"),
    g = g2(),
    ch = g2.Chart.create({ x:100,y:100,b:200,h:100,
                           funcs:[{data:[-1,-2,3,2,6,0],fill:true}],
                           title:{text:"marker on chart"},
                           yaxis:{origin:true}
                         });
 g.cartesian()
  .chart(ch)
  .cpy(ch.drawMarkersAt(g,4))
  .exe(ctx);

Those markers can be set interactively then.

Example: interactive chart

(animated gif)
see example

Markers can also get animated along simulation parameters.

Example: animated chart

(animated gif)
see example

Chart Properties

We can set some properties with x- and y-axis, as axis titles, grids and an explicite origin line. It is also possible to suppress automatically defined axis ticks and labels. Custom labels are not implemented at current.

You can overwrite the the default values, if you are not comfortable with them.

Tests

See this growing table of test cases with canvas and svg output side by side.

GitCDN

Use the link https://gitcdn.xyz/repo/goessner/g2-chart/master/g2.chart.min.js for getting the latest commit as a raw file.

In HTML use ...

<script src="https://gitcdn.xyz/repo/goessner/g2-chart/master/g2.chart.min.js"></script>

License

g2.chart is licensed under the terms of the MIT License.

Change Log

0.2.0 - 2016-07-31

Initial Commit

• chart command.