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> { "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:
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. |