The above example shows you how to create LineChart using ChartJs package. In this example, for purpose of chart demonstration only, we do use mock-up data from array. As you can see, the KoolReport's widget in general support dataSource could be DataStore, Process, DataSource or even simple array.
This example shows how to build a line chart with different point sizes using the pointRadius, pointHoverRadius properties.
For example:
...
'columns' => array(
'month',
'dataset - big points' => array(
...
"pointRadius" => 15,
"pointHoverRadius" => 10
),
'dataset - individual point sizes' => array(
...
"pointRadius" => [2, 4, 6, 18, 0, 12, 20]
),
'dataset - large pointHoverRadius' => array(
...
"pointHoverRadius" => 30
),
"dataset - large pointHitRadius" => array(
...
"pointHoverRadius" => 20
)
)
...
<?php
if (session_status() !== PHP_SESSION_ACTIVE) session_start();
require_once "../../../load.koolreport.php";
require_once "MyReport.php";
$report = new MyReport;
$report->run();
$report->render();
?>
<html>
<head>
<title>
Different Point Sizes
</title>
</head>
<body>
</body>
</html><?php
class MyReport extends \koolreport\KoolReport
{
}
<div id="report_render">
<?php
function randomScalingFactor()
{
return mt_rand(-100, 100);
}
$data = [
['month' => 'February', 'dataset - big points' => randomScalingFactor(), 'dataset - individual point sizes' => randomScalingFactor(), 'dataset - large pointHoverRadius' => randomScalingFactor(), 'dataset - large pointHitRadius' => randomScalingFactor()],
['month' => 'January', 'dataset - big points' => randomScalingFactor(), 'dataset - individual point sizes' => randomScalingFactor(), 'dataset - large pointHoverRadius' => randomScalingFactor(), 'dataset - large pointHitRadius' => randomScalingFactor()],
['month' => 'March', 'dataset - big points' => randomScalingFactor(), 'dataset - individual point sizes' => randomScalingFactor(), 'dataset - large pointHoverRadius' => randomScalingFactor(), 'dataset - large pointHitRadius' => randomScalingFactor()],
['month' => 'April', 'dataset - big points' => randomScalingFactor(), 'dataset - individual point sizes' => randomScalingFactor(), 'dataset - large pointHoverRadius' => randomScalingFactor(), 'dataset - large pointHitRadius' => randomScalingFactor()],
['month' => 'May', 'dataset - big points' => randomScalingFactor(), 'dataset - individual point sizes' => randomScalingFactor(), 'dataset - large pointHoverRadius' => randomScalingFactor(), 'dataset - large pointHitRadius' => randomScalingFactor()],
['month' => 'June', 'dataset - big points' => randomScalingFactor(), 'dataset - individual point sizes' => randomScalingFactor(), 'dataset - large pointHoverRadius' => randomScalingFactor(), 'dataset - large pointHitRadius' => randomScalingFactor()],
['month' => 'July', 'dataset - big points' => randomScalingFactor(), 'dataset - individual point sizes' => randomScalingFactor(), 'dataset - large pointHoverRadius' => randomScalingFactor(), 'dataset - large pointHitRadius' => randomScalingFactor()],
];
\koolreport\chartjs\LineChart::create(
array(
'dataSource' => $data,
'columns' => array(
'month',
'dataset - big points' => array(
"backgroundColor" => 'rgb(255, 99, 132)',
"borderColor" => 'rgb(255, 99, 132)',
"fill" => false,
"borderDash" => [5, 5],
"pointRadius" => 15,
"pointHoverRadius" => 10
),
'dataset - individual point sizes' => array(
"borderDash" => [5, 5],
"backgroundColor" => 'rgb(54, 162, 235)',
"borderColor" => 'rgb(54, 162, 235)',
"fill" => false,
"pointRadius" => [2, 4, 6, 18, 0, 12, 20]
),
'dataset - large pointHoverRadius' => array(
"fill" => false,
"backgroundColor" => 'rgb(75, 192, 192)',
"borderColor" => 'rgb(75, 192, 192)',
"pointHoverRadius" => 30
),
"dataset - large pointHitRadius" => array(
"fill" => false,
"backgroundColor" => 'rgb(255, 205, 86)',
"borderColor" => 'rgb(255, 205, 86)',
"pointHoverRadius" => 20
)
),
"options" => array(
"responsive" => true,
"legend" => array(
"position" => "bottom",
),
"hover" => array(
"mode" => 'index',
),
"scales" => array(
"xAxes" => array(
array(
"display" => true,
"scaleLabel" => array(
"display" => true,
"labelString" => "Month",
)
)
),
"yAxes" => array(
array(
"display" => true,
"scaleLabel" => array(
"display" => true,
"labelString" => "Value"
)
)
)
),
"title" => array(
"display" => true,
"text" => "Chart.js Line Chart - Different point sizes"
)
)
)
);
?>
</div>
What People Are Saying
"KoolReport helps me very much in creating data report for my corporate! Keep up your good work!"
--
Alain Melsens
"The first use of your product. I was impressed by its easiness and powerfulness. This product is a great and amazing."
--
Dr. Lew Choy Onn
"Fantastic framework for reporting!"
--
Greg Schneider