Table of Contents
$ composer create-project -s dev zendframework/skeleton-application path/to/installThis will install an initial set of dependencies, which includes:
$ composer require "name of the dependency you want"First, it will prompt:
$ Do you want a minimal install (no optional packages)? Y/nIf you answer with a “Y”, or press enter with no selection, the installer will not raise any additional prompts and finish installing your application. If you answer “n”, it will continue (for about ten questions) to prompt you with questions. Now you can see that there is a skeleton-application folder created in the path you have specified in the above command. Now you can change the folder name to anything you want , in our case we have renamed the directory skeleton-application to zend_fusioncharts. Once done, go inside the directory that you have set above (In our case the zend_fusioncharts ) and run the following command to install all the dependencies:
$composer self-update $composer installNow the project is completely set. If you’ve followed all the steps correctly, you should see the following output if you traverse to the public folder of your project (localhost/zend_fusioncharts/public/):
127.0.0.1 localhost
127.0.0.1 zend_local
#Virtual hosts #Include conf/extra/httpd-vhosts.conf
#Virtual hosts Include conf/extra/httpd-vhosts.conf
ServerAdmin webmaster@dummy.com DocumentRoot "C:/xampp/htdocs/zend_fusioncharts/public" ServerName zend_local ErrorLog "logs/dummy-host2.example.com-error.log" CustomLog "logs/dummy-host2.example.com-access.log" common
$ cd /etc/apache2/sites-available/
$ sudo cp 000-default.conf zend_local.conf
ServerAdmin webmaster@localhost DocumentRoot /var/www/html/skeleton/public ServerName zend_local SetEnv APPLICATION_ENV "development" DirectoryIndex index.php AllowOverride All Require all granted ErrorLog ${APACHE_LOG_DIR}/error.log CustomLog ${APACHE_LOG_DIR}/access.log combinedAfter you’ve saved all the changes , it should look something like the image given below:
$ sudo a2ensite example.com.conf
$ 127.0.0.1 zend_local
$ sudo service apache2 restart
npm install fusioncharts npm install fusionmapsFor Bower:
bower install fusioncharts bower install fusionmapsOnce you have successfully downloaded the FusionCharts Suite XT execute the steps given below to add the FusionCharts library to your project:
headscript() ->prependFile($this->basePath(‘fusioncharts/fusioncharts.js’)) ?>
[ 'driver' => 'Pdo', 'dsn' => 'mysql:dbname=FC;host=localhost', ], 'service_manager' => [ 'factories' => [ 'Zend\Db\Adapter\Adapter' => 'Zend\Db\Adapter\AdapterServiceFactory', ], ], ];?>Create a new file called local.php in zend_fusioncharts/config/ and add the following code to it:
[ 'username' => 'Your username for mysql connection', 'password' => 'Your password for mysql connection', ], ]; ?>Now create a table and insert the following data in the Mysql database.
CREATE TABLE albums (id INTEGER PRIMARY KEY AUTO_INCREMENT, month varchar(100) NOT NULL, revenue varchar(100) NOT NULL); INSERT INTO album (month, revenue) VALUES ('Jan', '4500'); INSERT INTO album (month, revenue) VALUES ('Feb', '4600'); INSERT INTO album (month, revenue) VALUES ('Mar', '4800'); INSERT INTO album (month, revenue) VALUES ('Apr', '4500'); INSERT INTO album (month, revenue) VALUES ('May', '4700'); INSERT INTO album (month, revenue) VALUES ('June', '3500'); INSERT INTO album (month, revenue) VALUES ('July', '4500'); INSERT INTO album (month, revenue) VALUES ('Aug', '4100'); INSERT INTO album (month, revenue) VALUES ('Sep', '4200'); INSERT INTO album (month, revenue) VALUES ('Oct', '4500'); INSERT INTO album (month, revenue) VALUES ('Nov', '4000'); INSERT INTO album (month, revenue) VALUES ('Dec', '5500');
[ Model\FusionchartsTable::class => function($container){ $tableGateway = $container->get(Model\FusionchartsTableGateway::class); return new Model\FusionchartsTable($tableGateway); }, Model\FusionchartsTableGateway::class => function($container){ $dbAdapter = $container->get(AdapterInterface::class); $resultSetPrototype = new ResultSet(); $resultSetPrototype->setArrayObjectPrototype(new Model\Fusioncharts()); return new TableGateway('Albums', $dbAdapter, null, $resultSetPrototype); } ], ]; } public function getControllerConfig() { return [ 'factories' => [ Controller\FusionchartsController::class => function($container) { return new Controller\FusionchartsController( $container->get(Model\FusionchartsTable::class) ); }, ], ]; } } ?>
"autoload": { "psr-4": { "Application\\": "module/Application/src/" } },We’ll now add our new module to the list, so it now reads:
"autoload": { "psr-4": { "Application\\": "module/Application/src/", "Fusioncharts\\": "module/Fusioncharts/src/" } },Once you’ve made that change, run the following to ensure Composer updates its autoloading rules:
$ composer dump-autoload
namespace Fusioncharts; use Zend\ServiceManager\Factory\InvokableFactory; return [ 'controllers' => [ 'factories' => [ Controller\FusionchartsController::class => InvokableFactory::class, ], ], 'view_manager' => [ 'template_path_stack' => [ 'album' => __DIR__ . '/../view', ], ], ];
return [ 'Zend\Form', 'Zend\Db', 'Zend\Router', 'Zend\Validator', 'Application', 'Fusioncharts', ];Note: `Fusioncharts` has been added to the above code
>namespace Fusioncharts; use Zend\Router\Http\Segment; use Zend\ServiceManager\Factory\InvokableFactory; return [ 'controllers' => [ 'factories' => [ Controller\FusionchartsController::class => InvokableFactory::class, ], ], // The following section is new and should be added to your file: 'router' => [ 'routes' => [ 'fusioncharts' => [ 'type' => Segment::class, 'options' => [ 'route' => '/fusioncharts[/:action[/:id]]', 'constraints' => [ 'action' => '[a-zA-Z][a-zA-Z0-9_-]*', 'id' => '[0-9]+', ], 'defaults' => [ 'controller' => Controller\FusionchartsController::class, 'action' => 'index', ], ], ], ], ], 'view_manager' => [ 'template_path_stack' => [ 'fusioncharts' => __DIR__ . '/../view', ], ], ];
table = $table; } //Used to the index action which will render index.phtml that has a chart with static data // link -> __ServerName__/fusioncharts/index or __ServerName__/fusioncharts/index public function indexAction() { } //Used to the index action which will render index.phtml that has a chart with data returned from the database //link -> __ServerName__/fusioncharts/db/ public function dbAction() { return new ViewModel([ 'albums' => $this->table->fetchAll(), ]); } } ?>
namespace Fusioncharts\Model; class Fusioncharts { public $id; public $artist; public $title; public function exchangeArray(array $data) { $this->id = !empty($data['id']) ? $data['id'] : null; $this->artist = !empty($data['artist']) ? $data['artist'] : null; $this->title = !empty($data['title']) ? $data['title'] : null; } }Next, create a file called FusionchartsTable.php under the module/Fusioncharts/src/Model directory and populate it with the code given below:
namespace Fusioncharts\Model; use RuntimeException; use Zend\Db\TableGateway\TableGatewayInterface; class FusionchartsTable { private $tableGateway; public function __construct(TableGatewayInterface $tableGateway) { $this->tableGateway = $tableGateway; } public function fetchAll() { return $this->tableGateway->select(); } }
$album->month , "value" => $album->revenue]; array_push($datas, $data) ; } //Call the Fusioncharts Class to render the chart $columnChart = new FusionCharts("column2d", "myFirstChart1" , 600, 300, "chart 2", "json", '{ "chart": { "caption": "Quarterly Revenue", "subCaption": "Last year", "xAxisName": "Quarter", "yAxisName": "Amount (In USD)", "theme": "fint", "numberPrefix": "$", //Setting the usage of plot gradient "usePlotGradientColor": "1", //Custom plot gradient color "plotGradientColor": "#eeeeee" }, "data": '.json_encode($datas).' }' ); //Rendering Chart $columnChart->render(); ?>After this is done you are good to go this url https://zend_local/fusioncharts/db you’ll get :Fusion Charts will render here
Have you ever spent hours buried in documentation, hunting for a specific piece of code?…
Do you feel like your data is a cryptic puzzle, locked away from revealing its…
In web development, mastering JavaScript charting libraries is crucial for keeping up with the fast-paced…
Ever spend an afternoon neck-deep in documentation, searching for that one elusive code snippet? Or…
In the dynamic world of data visualization, the need for precision and innovation has never…
Are you drowning in data but struggling to find the insights that drive real business…
View Comments
Hola, estoy siguiendo tu tutorial y me esta dando un error me gustaría poder enviártelo a ver si me puedes ayudar.
Hey,
Drop an email at "support@fusioncharts.com" quoting this blogpost. We would assist you.
Hi.
I am working in a Zend Framework project and I need to create a graph with two lines, taking data using a sql query from a database.
My error is in the final part of the code, I hope you can help me.
Thank you.
Hi Ricardo,
Please drop an email to support@fusioncharts.com mentioning the issue you're facing. We'll try our best to make it work for you.
Thanks.