Tutorial for using AnyChart with PHP

If you want to use AnyChart with PHP you can start with downloading the following sample package:

download AnyChart with PHP Samples Package

These are samples of AnyChart Flash Charts usage with PHP, please download the zip file, unpack it and follow the instructions in readme.txt

All samples work as they are, but MySQL Sample requires MySQL configuration in PHP Code and attaching data to the database, please see "03_simple_chart_mysql/data.php" source code from the package for more.

Below we will explain in details sample of usage AnyChart with PHP and MySQL Database (03_simple_chart_mysql), all other samples in package contain a lot of comments in source code and samples themselves are really simple and comprehensive.

Simple Chart created using AnyChart and PHP


AnyChart is a flexible component for creation charts in Web, you can easily create a lot of charts using it, PHP is one of the most server popular scripting engines, MySQL - is the most popular database to be used with PHP, so let's see step by step how to put them all together in a small sample.

to top

Package File Structure

When you unpack anychart-php-samples.zip you will get the following file structure:

  • anychart-php-samples
    • 01_simple_chart
    • 02_simple_chart_array
    • 03_simple_chart_mysql
    • 04_self_drilldown
    • 05_drilldown
    • 06_map_sample
    • anychart_files
    • index.html

to top

Sample File Structure

Our point of interest is MySQL Sample, so we will focus only on two folders:

  • anychart-php-samples
    • 03_simple_chart_mysql
      • dump.sql
      • data.php
      • index.html
    • anychart_files
      • swf
        • anychart.swf
      • js
        • anychart.js

to top

AnyChart Engine Files

anychart_files folder contains two folders and two files: anychart.swf and anychart.js. SWF file is a file that is used to render charts by a Flash Player on client-side, anychart.js is a JavaScript file that is used to make easier embedding of AnyChart Flash Charts into HTML page. JavaScript file is not mandatory, but it makes embedding much easier and is recommended.

You don't have to understand what's inside these two files - they just have to be uploaded to your server to some folder of your choice. In this sample they are placed in anychart_files folder, please do not move them until you understand what you are doing.

to top

Sample File structure

03_simple_chart_mysql contains 3 files: dump.sql, index.html and data.php, they are important, so we will talk about them in details:

Sample Database

dump.sql file contains SQL commands to create table named anychart_sample_products and anychart_sample_orders in your database. These table are used in sample to show fetching data from MySQL and passing it to AnyChart. The structure and content of these tables:

id name
1 Product A
2 Product B
id product_id date volume
1 1 2007-01-01 120
2 1 2007-02-01 230
3 1 2007-03-01 160
4 1 2007-04-01 540
5 1 2007-05-01 110
6 2 2007-02-01 130
7 2 2007-03-01 250
8 2 2007-04-01 320
9 2 2007-05-01 420

NOTE: To make this sample work you should add these tables to some database in your MySQL Server.

to top

HTML Code Explained

index.html is a simple HTML page, here is its code:

<title>AnyChart Sample of Simple Using AnyChart with PHP and MySQL Database</title>
<script type="text/javascript" language="javascript" src="../anychart_files/js/AnyChart.js"></script>
    <h1>AnyChart Sample of Simple Using AnyChart with PHP and MySQL Database</h1>
    <p>Please see data.php code to see how xml for AnyChart is created using PHP.</p>

    <div id="container"></div>

    <script type="text/javascript" language="javascript">
    var chart = new AnyChart('../anychart_files/swf/AnyChart.swf');


What you should know about this code:

  • anychart.js should be properly referenced in head section
  • div named container is used as a container for the chart, it can be placed anywhere in body.
  • javascript script code block should appear after div that should contain chart. This code tells AnyChart to use data.php file with data and AnyChart.swf to render Flash chart.

to top

PHP Code Explained

data.php is the PHP script that gets data from MySQL Database and converts it into XML format acceptable by AnyChart, this script shows only some basics (learn more about XML).

To understand what exactly data.php does it is better to view its source code and read comments, we will highlight only main points.

  • To make this sample work you should configure MySQL Connection details in the beginning of the script.
  • Script consists of two large parts:
    • First part gets data from database and creates a data section of AnyChart XML, this data is contained in $data variable.
    • Second part is a plain XML created according to AnyChart XML rules, $data variable is output as a part of this XML.

to top


When configuring the sample it may be useful to launch data.php and look at its output, prior to trying to see the chart at index.html

If you did everything right you will see data.php put like this: Click to view data.php output.

And chart you will get will look like that: Click to view index.html.

to top

Please contact us at contact@anychart.com if you have any questions.

Please note that this sample (and those provided in downloadable package) uses only some of AnyChart features. AnyChart provides a number of other chart types and options, which are described in evaluation download.

To learn more about AnyChart, get User's Guide and XML Reference:
Download Full AnyChart Evaluation Package or View documentation online

to top

download Download Trial     buy Buy Now