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 #

Name	type	default	description
`width`	`number` `string`		The width of chart, default is full container width
`height`	`number` `string`	`240`	The height of chart
`dataSource`	`mixed`		Datasource of chart, can take DataStore, DataSource, Process or even simple array
`columns`	`array`		List of columns from datasource that is used for FunnelChart, FunnelChart requires two columns, first one is category and second one is value
`chart.bottomWidth`	`number`	`0.33`	The percent of total width the bottom should be
`chart.bottomPinch`	`number`	`0`	How many blocks to pinch on the bottom to create a funnel "neck".
`chart.inverted`	`bool`	`false`	Whether the funnel direction is inverted (like a pyramid).
`chart.animate`	`nunber`	`0`	The load animation speed in milliseconds.
`chart.curve.enabled`	`bool`	`false`	Whether the funnel is curved.
`chart.curve.height`	`number`	`20`	The curvature amount.
`chart.totalCount`	`number`	`null`	Override the total count used in ratio calculations.
`block.dynamicHeight`	`bool`	`false`	Whether the block heights are proportional to their weight.
`block.dynamicSlope`	`bool`	`false`	Whether the block widths are proportional to their value decrease.
`block.barOverlay`	`bool`	`false`	Whether the blocks have bar chart overlays proportional to its weight.
`block.fill.scale`	`mixed`	`d3.schemeCategory10`	The background color scale as an array or function.
`block.fill.type`	`string`	`"solid"`	Either 'solid' or 'gradient'.
`block.minHeight`	`number`	`0`	The minimum pixel height of a block.
`block.highlight`	`bool`	`false`	Whether the blocks are highlighted on hover.
`label.enabled`	`bool`	`true`	Whether the block labels should be displayed.
`label.fontFamily`	`string`	`null`	Any valid font family for the labels.
`label.fontSize`	`string`	`14px`	Any valid font size for the labels.
`label.fill`	`string`	`'#fff'`	Any valid hex color for the label color.
`label.format`	`mixed`	`'{l}: {f}'`	Either function(label, value) or a format string.
`tooltip.enabled`	`bool`	`false`	Whether tooltips should be enabled on hover.
`tooltip.format`	`mixed`	`'{l}: {f}'`	Either function(label, value) or a format string.
`events.click.block`	`function`	`null`	Callback function(data) for when a block is clicked.
`colorScheme`	`array`	`null`	List of colors to be applied to funnel chart

Get started with KoolReport

KoolReport will help you to construct good php data report by gathering your data from multiple sources, transforming them into valuable insights, and finally visualizing them in stunning charts and graphs.