In most cases, graphical representation of data is most appropriate in a given situation. If the diagrams are also interactive, then that’s really cool! What I mean? Clicking on a diagram element opens another diagram.
What are connected diagrams?Until this point, such diagrams corresponded to only one data stream and were not completely interconnected. What if we made diagrams that we could move back and forth? These charts are called connected charts and are part of the new FusionCharts 3.2 package, which allows you to create multi-level charts by extracting data from a single source. In such diagrams, everything is connected to each other.
In this tutorial we will look at integrating such diagrams into a small project. Base MySQL data will contain the data, PHP will act as a glue creating XML file, FusionCharts will accept this file and output the data.
A few words about connected diagrams:
- By default, a child chart has the same display type (for example, bar charts) as its parent;
- Additional settings can be added at any level of the hierarchy, including the chart type itself;
- Diagrams can be placed in an HTML container, jQuey dialogs, lightbox, extJS windows, etc.;
- Event support using JavaScript;
Many times we have been faced with the task of tracking the growth of visitors to our sites. So let's create a small project that will show the number of registered users per month / day / hour, or in other words, the number of users registered on our site over a certain period of time.
Requirements:
- Any web server with PHP;
- MySQL server with database;
- FusionCharts, which you can download or purchase from their website;
Create an empty database called fctutorialc.
Create an empty folder called fcdemo in the root of your web server (usually www)
Step 1: Prepare the databaseTo keep things simple, we will only use one table, users, which will display user information. We are only interested in the time of user registration. So our table will only contain this information. Paste this code into phpMyAdmin:
CREATE TABLE `users` (`ID` int(10) unsigned NOT NULL AUTO_INCREMENT, `Time` timestamp NOT NULL DEFAULT "0000-00-00 00:00:00", PRIMARY KEY (`ID`), KEY `Time` (`Time`))
We have created a table containing 2 fields: ID and time. time will contain information about the time the user registered. Please note that we put an index on this field because We will use many WHERE conditions. The index will allow us to speed up the sampling process.
Connecting to the baseLet's write a small script to connect to the database:
Replace the settings with your own and save this file under the name connect-to-database.php in the fcdemo folder.
Let's insert random dataIf this were a real project, the users table would grow over time, but for the sake of demonstration, we need to insert some data. Let's write a small script that will insert random data into the table. Don't worry if you don't understand the following code - it's not important for this tutorial.
Save this file called generate-random-data.php all in the same folder.
First we include the database connection file. Then we set a time frame from which the time for user registration will be randomly selected. You can change the number of rows to be inserted. To do this, you need to adjust the $RecordsToInsert variable.
Then we run the script for inserting the generated records into the database. In order to start this process, go to this address - http://localhost/fcdemo/generate-random-data.php.
Eventually you should see the message: "Inserted ($RecordsToInsert) records"
Step 2. Prepare the website skeletonWe need to create the most simple page to display our chart. Something like this:
FusionCharts v3.2 - LinkedCharts PHP Demo