PHP Sparkline

Published on : August 03,2022

Overview

Sparklines are easy to interpret and also it conveys much more information to the user by visualizing the data in a small amount of space.

Some of the key features are,

Consumes less amount of space for visualizing the data.
Easy integration with grids.
Five type of Sparkline available namely Line, Column, Area, Win-loss and Pie.
Range Band to highlight selected start and end value region.
Can customize markers for high, low, start, end and negative point.
Trackball to get current mouse point to display tooltip.

Getting Started

This section explains you the steps required to populate the Sparkline with data. This section covers only the minimal features that you need to know to get started with the Sparkline.

Adding PHP EJ source and script reference

Create a first PHP file in Xampp and name it appropriately with .php extension and also place it under the newly created sample folder. Now refer AutoLoad.php file from EJ source of PHP in the sample page. For example, say Index.php with the initial code as shown below -
Refer the required scripts files in your PHP page as mentioned below in order to render the Sparkline control.

<!DOCTYPE html>
<html>
<head>
<!--  jquery script  -->
    <script type="text/javascript" src="//cdn.syncfusion.com/js/assets/external/jquery-3.0.0.min.js"></script>    
    <!-- Essential JS UI widget -->
    <script type="text/javascript" src="//cdn.syncfusion.com/14.3.0.49/js/web/ej.web.all.min.js"></script>
</head>
<body>
<!--Refer AutoLoad.php common source to render the control-->
   <?php
      require_once '../EJ/AutoLoad.php';
    ?>
</body>
</html>

In the above code, ej.web.all.min.js script reference has been added for demonstration purpose. It is not recommended to use this for deployment purpose, as its file size is larger since it contains all the widgets. Instead, you can use CSG utility to generate a custom script file with the required widgets for deployment purpose.

Initialize Sparkline

Add the following code in the index.php file to create the Sparkline control in index page.

<div>

    <?php
    require_once '../EJ/AutoLoad.php';
    ?>

<?php
    $sparkline=new EJ\Sparkline("container");    
	
    echo $sparkline->render();
    ?>

</div>

Now, the Sparkline is rendered with some auto-generated random values and with default Line type.

Categories : PHP

Tags : PHP

Praful Sangani

I'm a passionate full-stack developer with expertise in PHP, Laravel, Angular, React Js, Vue, Node, Javascript, JQuery, Codeigniter, and Bootstrap. I enjoy sharing my knowledge by writing tutorials and providing tips to others in the industry. I prioritize consistency and hard work, and I always aim to improve my skills to keep up with the latest advancements. As the owner of Open Code Solution, I'm committed to providing high-quality services to help clients achieve their business goals.