FunnelChart

Overview #

Funnel charts are a type of chart, often used to represent stages in a sales process and show the amount of potential revenue for each stage. This type of chart can also be useful in identifying potential problem areas in an organization’s sales processes. A funnel chart is similar to a stacked percent bar chart.

Example:

\koolreport\d3\FunnelChart::create([
    "dataSource"=>array(
        array("category"=>"Visit","amount"=>5000),
        array("category"=>"Download","amount"=>4000),
        array("category"=>"Initial Checkout","amount"=>2000),
        array("category"=>"Purchase","amount"=>1000),
    ),
    "width"=>480,
    "columns"=>[
        "category",
        "amount"
    ]
]);

Properties #

Nametypedefaultdescription
widthnumber stringThe width of chart, default is full container width
heightnumber string240The height of chart
dataSourcemixedDatasource of chart, can take DataStore, DataSource, Process or even simple array
columnsarrayList of columns from datasource that is used for FunnelChart, FunnelChart requires two columns, first one is category and second one is value
chart.bottomWidthnumber0.33The percent of total width the bottom should be
chart.bottomPinchnumber0How many blocks to pinch on the bottom to create a funnel "neck".
chart.invertedboolfalseWhether the funnel direction is inverted (like a pyramid).
chart.animatenunber0The load animation speed in milliseconds.
chart.curve.enabledboolfalseWhether the funnel is curved.
chart.curve.heightnumber20The curvature amount.
chart.totalCountnumbernullOverride the total count used in ratio calculations.
block.dynamicHeightboolfalseWhether the block heights are proportional to their weight.
block.dynamicSlopeboolfalseWhether the block widths are proportional to their value decrease.
block.barOverlayboolfalseWhether the blocks have bar chart overlays proportional to its weight.
block.fill.scalemixedd3.schemeCategory10The background color scale as an array or function.
block.fill.typestring"solid"Either 'solid' or 'gradient'.
block.minHeightnumber0The minimum pixel height of a block.
block.highlightboolfalseWhether the blocks are highlighted on hover.
label.enabledbooltrueWhether the block labels should be displayed.
label.fontFamilystringnullAny valid font family for the labels.
label.fontSizestring14pxAny valid font size for the labels.
label.fillstring'#fff'Any valid hex color for the label color.
label.formatmixed'{l}: {f}'Either function(label, value) or a format string.
tooltip.enabledboolfalseWhether tooltips should be enabled on hover.
tooltip.formatmixed '{l}: {f}'Either function(label, value) or a format string.
events.click.blockfunctionnullCallback function(data) for when a block is clicked.
colorSchemearraynullList of colors to be applied to funnel chart