BubbleChart

Overview #

ScatterChart and BubbleChart are sharing the same settings. They are similar but there is a major different. While ScatterChart care about the location of the point of chart with (x,y) the BubbleChart also care about the size of the point. The BubbleChart has 3 value (x,y,v). The v value determined the size of points.

Code:

\koolreport\chartjs\BubbleChart::create(array(
    "title"=>"Weight, Height and Number of Phone"
    "dataSource"=>array(
        array("weight"=>89,"height"=>169,"#phone"=>12),
        array("weight"=>75,"height"=>174,"#phone"=>33),
        array("weight"=>72,"height"=>176,"#phone"=>44),
        array("weight"=>78,"height"=>180,"#phone"=>52),
    ),
    "series"=>array(
        array("weight","height","#phone")
    )
));

Settings #

nametypedefaultdescription
namestringSet name for chart. It is optional
titlestringTitle of the chart
dataSourcemixedSet the data source for chart, accepting DataStore, DataSource, Process object and even array in table or associate format
seriesarrayList of series, each series is an array containing column name and settings
optionsarrayExtra options for line chart or area chart, please view options section for more details
backgroundOpacitynumber0.5Set the opacity for background
scalenumber1For BubbleChart only, this property set the scale for bubble to fit the size of chart. Please change this to make the point suitable for the size of your chart

Series property #

Property series contains list of columns for ScatterChart and BubbleChart. ScatterChart will requires 2 columns while BubbleChart requires 3 columns. The adding array at the end will contains settings for the series.

ScatterChart::create(array(
    "series"=>array("age","#phone",array(
        "label"=>"Age vs Phone",
    ))
));
BubbleChart::create(array(
    "series"=>array("height","weight","#phone",array(
        "label"=>"Height, weight vs Phone",
    ))
));
nametypedefaultdescription
labelstringLabel of the series
backgroundColorstringBackground of the point
borderColorstringBorder of the point
borderWidthnumberSize of point's border
pointStylestringcircleStyle of points.Values: 'circle', 'cross', 'crossRot', 'dash', 'line', 'rect', 'rectRounded', 'rectRot', 'star', 'triangle'
radiusnumberSize of the point
hoverBackgroundColorstringBackground of point when hovered
hoverBorderColorstringBorder color of point when hovered
hoverBorderWidthnumberBorder width of the point when hovered
hoverRadiusnumberRadius of point when hovered
hitRadiusnumberAdditional radius for hit detection
scalenumberScale for the series

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.