You are viewing documentation for an older version. For current documentation - click here.
Example

As we told you earlier, drawing pad can be used to create process flow diagrams. Here, we will use it to create a process flow diagram which depicts how the Data URL method of FusionCharts works.

The chart will appear within this DIV. This text will be replaced by the chart.
 
The XML for the above is:
  
<chart bgColor='E1F5FF'>
         <annotations>

      <!--Group containing the rectangles--> 
            <annotationGroup id='Grp1' >
               <annotation type='rectangle' x='30' y='100' toX='110' toY='220' radius='5' color='453269' />
               <annotation type='rectangle' x='235' y='100' toX='315' toY='220' radius='5' color='453269' />
               <annotation type='rectangle' x='440' y='100' toX='520' toY='220' radius='5' color='453269' />
            </annotationGroup>

      <!--Group containing the text inside the rectangles--> 
              <annotationGroup id='Grp2'>
                 <annotation type='text' x='70' y='155' fontSize='12' bold='1' label='Chart' color='FFFFFF'/>
                 <annotation type='text' x='275' y='140' fontSize='12' bold='1' label='Scripts' color='FFFFFF'/>
                 <annotation type='text' x='275' y='170' label='ASP/PHP/.NET/.. pages' color='EFEBF5' wrap='1' wrapWidth='60'/>
                 <annotation type='text' x='480' y='155' fontSize='12' bold='1' label='Database' color='FFFFFF'/>
              </annotationGroup>

      <!--Group containing all the description text         -->
             <annotationGroup id='Grp3' >
                 <annotation type='text' x='70' y='65' label='1. HTML provides the URL of XML/JSON data to chart' 
                  wrap='1' wrapWidth='100' color='453269'/>
                 <annotation type='text' x='170' y='130' label='2. Chart sends a request to the specified URL for XML data' 
                  wrap='1' wrapWidth='100' color='453269'/>
                 <annotation type='text' x='380' y='130' label='3. These pages now interact with the database' 
                  wrap='1' wrapWidth='100' color='453269'/>
                 <annotation type='text' x='380' y='200' label='4. Data returned back to the scripts in native objects' 
                  wrap='1' wrapWidth='100' color='453269'/>
                 <annotation type='text' x='275' y='255' label='5. Scripts convert it into XML and finally output it' 
                  wrap='1' wrapWidth='100' color='453269'/>
                 <annotation type='text' x='170' y='200' label='6. XML data is returned to the chart' wrap='1' 
                  wrapWidth='100' color='453269'/>
                 <annotation type='text' x='70' y='250' label='7. Chart is finally rendered' wrap='1' wrapWidth='100' 
                  color='453269'/>
              </annotationGroup>

      <!--Group containing all the arrows--> 
             <annotationGroup id='Grp4'>

         <!--arrow for process 2-->
                 <annotation type='line' x='120' y='160' toX='220' color='453269' />
                 <annotation type='line' x='215' y='155' toX='220' toY='160' color='453269' />
                 <annotation type='line' x='215' y='165' toX='220' toY='160' color='453269' />

         <!--arrow for process 6-->
                 <annotation type='line' x='120' y='175' toX='220' color='453269' />
                 <annotation type='line' x='125' y='170' toX='120' toY='175' color='453269' />
                 <annotation type='line' x='125' y='180' toX='120' toY='175' color='453269' />

         <!--arrow for process 3-->
                 <annotation type='line' x='325' y='155' toX='435' color='453269' />
                 <annotation type='line' x='430' y='150' toX='435' toY='155' color='453269' />
                 <annotation type='line' x='430' y='160' toX='435' toY='155' color='453269' />

         <!--arrow for process 4-->
                 <annotation type='line' x='325' y='170' toX='435' color='453269' />
                 <annotation type='line' x='330' y='165' toX='325' toY='170' color='453269' />
                 <annotation type='line' x='330' y='175' toX='325' toY='170' color='453269' />
              </annotationGroup>

      <!--Group containing the header-->
                     <annotationGroup id='Grp5'>
                        <annotation type='text' label='Data URL method' fontSize='16' fontColor='666666' 
                         bold='1' x='280' y='20'/>
                     </annotationGroup>
           </annotations>
           <styles>
              <definition>

         <!--Shadow for the rectangles-->
                 <style name='Shadow1' type='shadow' distance='7'/>

         <!--Shadow for the labels inside the rectangles--> 
                 <style name='Shadow2' type='shadow' strength='3'/>

         <!--Shadow for the description text but with alpha 0 so that the text gets converted into bitmap and can be animated then--> 
                 <style name='Shadow3' type='shadow' alpha='0'/>
                 <style name='AnimX' type='animation' param='_x' start='-50' wait='0' duration='1' easing='Bounce'/>
                 <style name='AnimY' type='animation' param='_y' start='-30' wait='1' duration='1' easing='Bounce'/>
                 <style name='AnimXScale' type='animation' param='_xScale' start='0' end='100' wait='2' duration='0.5'/>
                 <style name='AnimAlpha' type='animation' param='_alpha' start='0' wait='2' duration='1'/>
                 <style name='AnimY2' type='animation' param='_y' start='-50' wait='2' duration='1'/>
            </definition>

      <application>
                 <apply toObject='Grp1' styles='Shadow1, AnimX'/>
                 <apply toObject='Grp2' styles='Shadow2, AnimY'/>
                 <apply toObject='Grp3' styles='Shadow3,AnimY2'/>
                 <apply toObject='Grp4' styles='AnimXScale, AnimAlpha'/>
              </application>
           </styles>
</chart>
{
  "chart": {
    "bgcolor": "E1F5FF"
  },
  "annotations": {
   /* Group containing the rectangles */
    "groups": [
      {
        "id": "Grp1",
        "items": [
          {
            "type": "rectangle",
            "x": "30",
            "y": "100",
            "tox": "110",
            "toy": "220",
            "radius": "5",
            "color": "453269"
          },
          
          {
            "type": "rectangle",
            "x": "235",
            "y": "100",
            "tox": "315",
            "toy": "220",
            "radius": "5",
            "color": "453269"
          },
          {
            "type": "rectangle",
            "x": "440",
            "y": "100",
            "tox": "520",
            "toy": "220",
            "radius": "5",
            "color": "453269"
          }
        ]
      },
      /* Group containing the text inside the rectangles */
      {
        "id": "Grp2",
        "items": [
          {
            "type": "text",
            "x": "70",
            "y": "155",
            "fontsize": "12",
            "bold": "1",
            "label": "Chart",
            "color": "FFFFFF"
          },
          {
            "type": "text",
            "x": "275",
            "y": "140",
            "fontsize": "12",
            "bold": "1",
            "label": "Scripts",
            "color": "FFFFFF"
          },
          {
            "type": "text",
            "x": "275",
            "y": "170",
            "label": "ASP/PHP/.NET/.. pages",
            "color": "EFEBF5",
            "wrap": "1",
            "wrapwidth": "60"
          },
          {
            "type": "text",
            "x": "480",
            "y": "155",
            "fontsize": "12",
            "bold": "1",
            "label": "Database",
            "color": "FFFFFF"
          }
        ]
      },
      /* Group containing all the description text */
      {
        "id": "Grp3",
        "items": [
          {
            "type": "text",
            "x": "70",
            "y": "65",
            "label": "1. HTML provides the URL of XML/JSON data to chart",
            "wrap": "1",
            "wrapwidth": "100",
            "color": "453269"
          },
          {
            "type": "text",
            "x": "170",
            "y": "130",
            "label": "2. Chart sends a request to the specified URL for XML data",
            "wrap": "1",
            "wrapwidth": "100",
            "color": "453269"
          },
          {
            "type": "text",
            "x": "380",
            "y": "130",
            "label": "3. These pages now interact with the database",
            "wrap": "1",
            "wrapwidth": "100",
            "color": "453269"
          },
          {
            "type": "text",
            "x": "380",
            "y": "200",
            "label": "4. Data returned back to the scripts in native objects",
            "wrap": "1",
            "wrapwidth": "100",
            "color": "453269"
          },
          {
            "type": "text",
            "x": "275",
            "y": "255",
            "label": "5. Scripts convert it into XML and finally output it",
            "wrap": "1",
            "wrapwidth": "100",
            "color": "453269"
          },
          {
            "type": "text",
            "x": "170",
            "y": "200",
            "label": "6. XML data is returned to the chart",
            "wrap": "1",
            "wrapwidth": "100",
            "color": "453269"
          },
          {
            "type": "text",
            "x": "70",
            "y": "250",
            "label": "7. Chart is finally rendered",
            "wrap": "1",
            "wrapwidth": "100",
            "color": "453269"
          }
        ]
      },
     /* Group containing all the arrows */
      {
        "id": "Grp4",
       /* arrow for process 2 */
        "items": [
          {
            "type": "line",
            "x": "120",
            "y": "160",
            "tox": "220",
            "color": "453269"
          },
          {
            "type": "line",
            "x": "215",
            "y": "155",
            "tox": "220",
            "toy": "160",
            "color": "453269"
          },
/* arrow for process 6 */
          {
            "type": "line",
            "x": "215",
            "y": "165",
            "tox": "220",
            "toy": "160",
            "color": "453269"
          },
          {
            "type": "line",
            "x": "120",
            "y": "175",
            "tox": "220",
            "color": "453269"
          },
          {
            "type": "line",
            "x": "125",
            "y": "170",
            "tox": "120",
            "toy": "175",
            "color": "453269"
          },
          {
            "type": "line",
            "x": "125",
            "y": "180",
            "tox": "120",
            "toy": "175",
            "color": "453269"
          },
   /* arrow for process 3 */
          {
            "type": "line",
            "x": "325",
            "y": "155",
            "tox": "435",
            "color": "453269"
          },
          {
            "type": "line",
            "x": "430",
            "y": "150",
            "tox": "435",
            "toy": "155",
            "color": "453269"
          },
          {
            "type": "line",
            "x": "430",
            "y": "160",
            "tox": "435",
            "toy": "155",
            "color": "453269"
          },
/* arrow for process 4 */
          {
            "type": "line",
            "x": "325",
            "y": "170",
            "tox": "435",
            "color": "453269"
          },
          {
            "type": "line",
            "x": "330",
            "y": "165",
            "tox": "325",
            "toy": "170",
            "color": "453269"
          },
          {
            "type": "line",
            "x": "330",
            "y": "175",
            "tox": "325",
            "toy": "170",
            "color": "453269"
          }
        ]
      },
      /* Group containing the header */
      {
        "id": "Grp5",
        "items": [
          {
            "type": "text",
            "label": "Data URL method",
            "fontsize": "16",
            "fontcolor": "666666",
            "bold": "1",
            "x": "280",
            "y": "20"
          }
        ]
      }
    ]
  },
  /* Shadow for the rectangles */
  "styles": {
    "definition": [
      {
        "name": "Shadow1",
        "type": "shadow",
        "distance": "7"
      },
     /* Shadow for the labels inside the rectangles */
      {
        "name": "Shadow2",
        "type": "shadow",
        "strength": "3"
      },
     /* Shadow for the description text but with the alpha 0 so that the text gets converted into bitmap and can be animated then */
      {
        "name": "Shadow3",
        "type": "shadow",
        "alpha": "0"
      },
      {
        "name": "AnimX",
        "type": "animation",
        "param": "_x",
        "start": "-50",
        "wait": "0",
        "duration": "1",
        "easing": "Bounce"
      },
      {
        "name": "AnimY",
        "type": "animation",
        "param": "_y",
        "start": "-30",
        "wait": "1",
        "duration": "1",
        "easing": "Bounce"
      },
      {
        "name": "AnimXScale",
        "type": "animation",
        "param": "_xScale",
        "start": "0",
        "end": "100",
        "wait": "2",
        "duration": "0.5"
      },
      {
        "name": "AnimAlpha",
        "type": "animation",
        "param": "_alpha",
        "start": "0",
        "wait": "2",
        "duration": "1"
      },
      {
        "name": "AnimY2",
        "type": "animation",
        "param": "_y",
        "start": "-50",
        "wait": "2",
        "duration": "1"
      }
    ],
    "application": [
      {
        "toobject": "Grp1",
        "styles": "Shadow1, AnimX"
      },
      {
        "toobject": "Grp2",
        "styles": "Shadow2, AnimY"
      },
      {
        "toobject": "Grp3",
        "styles": "Shadow3,AnimY2"
      },
      {
        "toobject": "Grp4",
        "styles": "AnimXScale, AnimAlpha"
      }
    ]
  }
}

The process flow diagram can be divided into the following elements:

  • The rectangular boxes, each with their starting and ending co-ordinates, color and rounding radius. These boxes are created in Grp1.
  • The label inside the boxes (Chart, Scripts etc.) with its font properties. These labels are created in Grp2.
  • The process description text with its font properties defined in Grp3.
  • The arrows, each with their starting and ending co-ordinates and color defined in Grp4.
  • The header of the entire diagram defined in Grp5.

After that, we have used Styles to apply shadow effects and animate the entire diagram. For more details on how to use Styles, please check the Using Styles section.