VCL for PHP Charting components - Planning

Posted by on in Blogs
This article is not about coding, but about planning how to write a wrapper for an existing library. The very first step is to know how the library works, you don't need to become a master on it, but you will need some key points and, usually, the samples provided by the library are enough for this.

The planning stage it's a very important (if not the most important) step in the process, because here is where we determine the scope of the project and which steps are required to get it done.

So the first thing we need to do is to make a list of the features the library provides, paying special attention to the things that are customizable, that is, the user will be able to change to use the component.

That list is easily extracted from samples and/or documentation,you can find here:

And here is the basic list:

  • User can create different chart types (bars, lines, pie, etc)

  • Axis (horizontal and vertical) are fully customizable (width, ticks length, color for grid lines, etc)

  • Chart legend can have a style

  • A chart can hold several series of data

  • Each serie is built by an array of information

  • A chart can have a title

  • The background color can be customized

  • The loading message can be customized

  • Each serie has a lot of options to customize, which depend on the type of chart you want to use, some options apply to some types of charts, but not to other types

  • Some chart types, like Line, are able to call a javascript function when clicked, sending information about which point has been clicked

Also, we need to find/write a basic "hello-world-like" sample project, so we get the minimum code to make the library work, here is ours:

Basically, this library is a flash object that request the data to generate the chart to a script, and the library provides a PHP API to generate all that information.

With all this, we are ready to write a task list:

  • An XAxis persistent property to specify all the properties for the X Axis

  • An YAxis persistent property to specify all the properties for the Y Axis, of different type than XAxis because some properties of the Y Axis are different

  • A property to allow the user specify the Font for the X Legend

  • A property to allow the user specify the Font for the Y Legend

  • A property called Series to hold all the series information the chart can hold

  • A property editor for the Series property to allow the user to add all that information at design-time

  • Such property editor should be able to generate events to allow the user customize the series in run-time and also to allow attach a javascript event handler to a serie

  • A Title property to specify the title of the chart

  • XLegend and YLegend properties to allow the user customize the text to show on the axis

  • A BackgroundColor property

  • A LoadingMessage property

  • To make the component work, we need to use all the properties to generate the chart information, but we need to provide that information only when the

So, right now, we have clear what we need to do in order to wrap this library to provide a common interface and to integrate this library into the IDE. On the next article we will see how to transform all this to code.


  • Guest
    Daniele Teti Monday, 10 November 2008

    Great article.

    Thanks José

  • Guest
    Umberto Masotti Monday, 10 November 2008

    Well done and very useful. Thanks José.

  • Please login first in order for you to submit comments
  • Page :
  • 1

Check out more tips and tricks in this development video: