Skip to content

Configuration parameters graph

Jump to bottom
Yutaka Yamaguchi edited this page Sep 10, 2013 · 2 revisions

Configuration Parameters

Movable Type Chart API have many configuration parameters. These parameters must be specified by JSON format.

Graph section

Data

The data of chart. You can specify by JSON or by filename. When you specify a filename, that must be the path from StaticPath, or absolute URL.

This parameter is required.

type

The type of chart you want to draw. The value that begin with "morris.", these chart will be made by Morris library. In the same way, the value that begin with "easel.", these chart will be made by EaselJS.

Default is morris.bar

Available Values
  • morris.bar
  • morris.line
  • morris.area
  • morris.donut
  • easel.bar
  • easel.motionLine
  • easel.mix
  • css.horizontalBar
  • css.ratioHorizontalBar

staticPath

The base URL for get external files. This value must be absolute path.

yLength

The number of data-sets to be drawn. For example, yLength=2 specified, ChartAPI will draw a chart with "y" data and "y1" data. The data of "y2" or later will never using.

Default is 1

autoResize

If true specified, the chart will be redraw at window resizing.

Default is false

dataLabel

The data that will be displayed on the slider.

Default is x

chartColors

The array of the color code that used in chart. By default, following color code will be used:

  • #6AAC2B
  • #FFBE00
  • #CF6DD3
  • #8F2CFF
  • #2D85FF
  • #5584D4
  • #5ED2B8
  • #9CCF41
  • #F87085
  • #2C8087
  • #8EEC6A
  • #FFE700
  • #FF5E19
  • #FF4040
  • #976BD6
  • #503D99
  • #395595

chartColorsMethod

The method to get the value from an array of chartColors. By default, will pick up from the first element of chartColors.

Available Values
  • shuffle
  • reverse

label

If specified, Chart API will draw the label of chart. You can specify more parameter for the label.

template

The template filename of the label. The value must be the path from StaticPath, or absolute URL.

data

The data of the label. You can specify by JSON or by filename. When you specify a filename, that must be the path from StaticPath, or absolute URL.

hideTotalCount

If true is specified, the total number of data is not displayed.

hideDeltaCount

If true is specified, the difference between the previous and the latest data is not displayed.

fallback

In some situations, may not be able to draw a Chart that is specified in the "type" parameter. So, if you specified "test" parameter in the "fallback", the Chart API will test that feature is available or not. If not available, Chart API will overwrite parameters automatically by the "fallback" parameters.

test

The test item

Available Values
  • canvas
  • svg
  • vml

width

The width of the chart. If not specified, Chart API will use width of container. If width of container is zero, will use default width: 300px.

height

The height of the chart. If not specified, Chart API will use height of container. If height of container is zero, will use default height: 300px.

donutsFormatter

It's only for morris.donuts chart.

donutsFormatter is wrapper of formatter option of Morris Donuts Chart. You can customize the label showed in the center of the donuts to pass the function object like the following.

  donutsFormatter: function(str, percent){
    return str + 'MB' + percent;
  };

First argument is the normalized string like '199,789,000', Second one is the percents of total with '%' unit, like '100%'. We also passes the original argument y (morris throws) as the third argument optionally.

If not specified, label shows like the following example.

  10,000,00 (100%)

noCommaOnYLabel

It's only for morris.donuts chart.

If you want to remove comma in the number string, set noCommaOnYLabel true.

Clone this wiki locally