Default Image

Months format

Show More Text

Load More

Related Posts Widget

Article Navigation

Contact Us Form

404

Sorry, the page you were looking for in this blog does not exist. Back Home

How To Create A Flow Chart In HTML And JavaScript

, , ,   

 

flowchart in html and javascript



If you’re looking for an easy method for creating and visualizing a flow chart in JavaScript and HTML, then look no more. We have created a simple step-by-step guide for you to follow.

This guide will show five easy steps to build a Javascript flow chart. To keep things simple, we’ll create only a single HTML file and include all the JavaScript code. 

Next, we’ll add different node shapes in the flow chart to help you get started. The result looks as follows:

flow chart in html and javascript.png


 

    What is a drag node chart in FusionCharts, the JavaScript flow chart library?


    The JavaScript flow chart library FusionCharts incorporates a drag node chart. A drag node chart is a special chart that represents data using nodes. 

    All flow chart symbols can also be created using nodes. Next, you can connect these symbols using arrows.

    Using the drag node chart, you can add different shapes for nodes, including rectangles, circles, polygons, and more. Moreover, you can enable users to drag around these nodes anywhere on the screen. 

    All this functionality is pre-built in FusionCharts, and you don’t have to write a single line of code to incorporate these features.

    What are the steps for creating a flow chart in HTML and JavaScript?


    We’ll write the entire code for creating a flow chart in JavaScript in one single HTML file. First, create a new HTML file called flowchart.html. Next, follow these steps to create a flowchart using the FusionCharts library.

    #1. Import Libraries


    As a first step towards creating a JavaScript flow chart, you must import the FusionCharts Core Library and FusionThemes. Add the following code anywhere in the HTML file:

    script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
    <script type=    "text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>


    #2. Render the Flow Chart


    As a second step, create a div container in the body of the HTML file. The JavaScript flow chart will be rendered in this container.

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


    #3. Write the Chart Key in DataSource JSON


    The third step for creating a flow chart in JavaScript is to specify a dataSource using JSON. The dataSource has three important keys, namely, chart, dataset, and connectors. Declare a data source constant as:

    const dataSource = {
         chart: {},
         dataset: [],
         connectors: []
    }


    We’ll fill out the three keys in the text that follows. Here is the chart JSON that specifies the caption, theme, font and more:

    chart: {
      caption:     "Steps for Creating Flow Chart in Html and Javascript",
      yaxismaxvalue:     "1100",
      yaxisminvalue:     "0",
      theme:     "fusion",
      valuefontsize:     "12",
      viewmode:     "1",
      valuefontcolor:     "#FFFFFF",
      plotfillhovercolor:     "#1A237E",
      divlinealpha:     "0"
    }


    #4. Create the Shapes and Connectors


    The shapes are specified using the dataset key in dataSource JSON, and the connecting arrows can be defined using the connectors key. Here are the two JSON keys. You can paste them into the dataSource JSON.


    dataset: [
        {
          data: [
            {
              id:     "01",
              x:     "5",
              y:     "1000",
              label:     "start",
              shape:     "circle",
              color:     "#5D62B5",
              radius:     "20",
              hovercolor:     "#1A237E"
            },
            {
              id:     "02",
              x:     "5",
              y:     "800",
              label:     "Import FusionCharts {br} library",
              color:     "#29C3BE",
              shape:     "rectangle",
              width:     "100",
              height:     "60"
            },
            {
              id:     "03",
              x:     "5",
              y:     "600",
              label:     "Import Fusion {br}Themes",
              color:     "#29C3BE",
              shape:     "rectangle",
              width:     "100",
              height:     "60"
            },
            {
              id:     "04",
              x:     "5",
              y:     "350",
              label:     "Create div {br} HTML body",
              color:     "#FFC533",
              shape:     "polygon",
              radius:     "60"
            },
            {
              id:     "05",
              x:     "5",
              y:     "100",
              label:     "Create charts key {br} in DataSource JSON",
              color:     "#BC95DF",
              shape:     "rectangle",
              width:     "120",
              height:     "60"
            },
            {
              id:     "06",
              x:     "15",
              y:     "100",
              label:     "Create dataset key {br} in DataSource JSON",
              color:     "#BC95DF",
              shape:     "rectangle",
              width:     "120",
              height:     "60"
            },
            {
              id:     "07",
              x:     "25",
              y:     "100",
              label:     "Create connectors key {br}  in DataSource JSON",
              color:     "#BC95DF",
              shape:     "rectangle",
              width:     "120",
              height:     "60"
            },
            {
              id:     "08",
              x:     "25",
              y:     "350",
              label:     "Write the Ready {br} Function",
              color:     "#B30100",
              shape:     "rectangle",
              width:     "100",
              height:     "60"
            },
            {
              id:     "09",
              x:     "25",
              y:     "600",
              label:     "View in Browser",
              color:     "#FFC533",
              shape:     "polygon",
              radius:     "60",
            },
            {
              id:     "10",
              x:     "25",
              y:     "800",
              label:     "end",
              color:     "#5D62B5",
              shape:     "circle",
              radius:     "20",
            }     
          ]
        }
      ],
      connectors: [
        {
          connector: [
            {
              from:     "01",
              to:     "02",
              strength:     "2",
              arrowatstart:     "0",
              arrowatend:     "1",
              alpha:     "50"
            },
            {
              from:     "02",
              to:     "03",
              strength:     "2",
              arrowatstart:     "0",
              arrowatend:     "1",
              alpha:     "50"
            },
            {
              from:     "03",
              to:     "04",
              strength:     "2",
              arrowatstart:     "0",
              arrowatend:     "1",
              alpha:     "50"
            },
            {
              from:     "04",
              to:     "05",
              strength:     "2",
              arrowatstart:     "0",
              arrowatend:     "1",
              alpha:     "50"
            },
            {
              from:     "05",
              to:     "06",
              strength:     "2",
              arrowatstart:     "0",
              arrowatend:     "1",
              alpha:     "50"
            },
            {
              from:     "06",
              to:     "07",
              strength:     "2",
              arrowatstart:     "0",
              arrowatend:     "1",
              alpha:     "50"
            },
            {
              from:     "07",
              to:     "08",
              strength:     "2",
              arrowatstart:     "0",
              arrowatend:     "1",
              alpha:     "50"

            },
            {
              from:     "08",
              to:     "09",
              strength:     "2",
              arrowatstart:     "0",
              arrowatend:     "1",
              alpha:     "50"
            },
            {
              from:     "09",
              to:     "10",
              strength:     "2",
              arrowatstart:     "0",
              arrowatend:     "1",
              alpha:     "50"
            }                    
          ]
        }
      ]


    #5. Write the FusionCharts Ready Function



    As a last step, add the following FusionCharts ready() function to the JavaScript code. This function renders the flow chart and hence, it is necessary for JavaScript flow chart visualization.

    FusionCharts.ready(function() {
          var myChart = new FusionCharts({
        type:     "dragnode",
        renderAt:     "flowchart-container",
        width:     "100%",
        height:     "100%",
        dataFormat:     "json",
        dataSource
        }).render();
    });


    How do I view my created flow chart in HTML and JavaScript?


    That’s it! We just created an awesome flow chart in five very easy steps. You can easily view the FusionCharts flow chart by opening the HTML file in your browser. 

    Once you open this file, you can go ahead and move around the flow chart nodes and change their placement.

    Where is the consolidated code for a flow chart in HTML and JavaScript?


    Here is the consolidated code. Paste it in an empty HTML file and view it in your browser.

    <html>
    <head>
    <title>Javscript Flow Chart in FusionCharts</title>
    <!-- Include fusioncharts core library -->
    <script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
    <!-- Include fusion theme -->
    <script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
    <script type="text/javascript">
    const dataSource = {
      chart: {
        caption:     "Steps for Creating Flow Chart in Html and Javascript",
        yaxismaxvalue:     "1100",
        yaxisminvalue:     "0",
        theme:     "fusion",
        valuefontsize:     "12",
        viewmode:     "1",
        valuefontcolor:     "#FFFFFF",
        plotfillhovercolor:     "#1A237E",
        divlinealpha:     "0"
      },
      dataset: [
        {
          data: [
            {
              id:     "01",
              x:     "5",
              y:     "1000",
              label:     "start",
              shape:     "circle",
              color:     "#5D62B5",
              radius:     "20",
              hovercolor:     "#1A237E"
            },
            {
              id:     "02",
              x:     "5",
              y:     "800",
              label:     "Import FusionCharts {br} library",
              color:     "#29C3BE",
              shape:     "rectangle",
              width:     "100",
              height:     "60"
            },
            {
              id:     "03",
              x:     "5",
              y:     "600",
              label:     "Import Fusion {br}Themes",
              color:     "#29C3BE",
              shape:     "rectangle",
              width:     "100",
              height:     "60"
            },
            {
              id:     "04",
              x:     "5",
              y:     "350",
              label:     "Create div {br} HTML body",
              color:     "#FFC533",
              shape:     "polygon",
              radius:     "60"
            },
            {
              id:     "05",
              x:     "5",
              y:     "100",
              label:     "Create charts key {br} in DataSource JSON",
              color:     "#BC95DF",
              shape:     "rectangle",
              width:     "120",
              height:     "60"
            },
            {
              id:     "06",
              x:     "15",
              y:     "100",
              label:     "Create dataset key {br} in DataSource JSON",
              color:     "#BC95DF",
              shape:     "rectangle",
              width:     "120",
              height:     "60"
            },
            {
              id:     "07",
              x:     "25",
              y:     "100",
              label:     "Create connectors key {br}  in DataSource JSON",
              color:     "#BC95DF",
              shape:     "rectangle",
              width:     "120",
              height:     "60"
            },
            {
              id:     "08",
              x:     "25",
              y:     "350",
              label:     "Write the Ready {br} Function",
              color:     "#B30100",
              shape:     "rectangle",
              width:     "100",
              height:     "60"
            },
            {
              id:     "09",
              x:     "25",
              y:     "600",
              label:     "View in Browser",
              color:     "#FFC533",
              shape:     "polygon",
              radius:     "60",
            },
            {
              id:     "10",
              x:     "25",
              y:     "800",
              label:     "end",
              color:     "#5D62B5",
              shape:     "circle",
              radius:     "20",
            }              ]
        }
      ],
      connectors: [
        {
          connector: [
            {
              from:     "01",
              to:     "02",
              strength:     "2",
              arrowatstart:     "0",
              arrowatend:     "1",
              alpha:     "50"
            },
            {
              from:     "02",
              to:     "03",
              strength:     "2",
              arrowatstart:     "0",
              arrowatend:     "1",
              alpha:     "50"
            },
            {
              from:     "03",
              to:     "04",
              strength:     "2",
              arrowatstart:     "0",
              arrowatend:     "1",
              alpha:     "50"
            },
            {
              from:     "04",
              to:     "05",
              strength:     "2",
              arrowatstart:     "0",
              arrowatend:     "1",
              alpha:     "50"
            },
            {
              from:     "05",
              to:     "06",
              strength:     "2",
              arrowatstart:     "0",
              arrowatend:     "1",
              alpha:     "50"
            },
            {
              from:     "06",
              to:     "07",
              strength:     "2",
              arrowatstart:     "0",
              arrowatend:     "1",
              alpha:     "50"
            },
            {
              from:     "07",
              to:     "08",
              strength:     "2",
              arrowatstart:     "0",
              arrowatend:     "1",
              alpha:     "50"
            },
            {
              from:     "08",
              to:     "09",
              strength:     "2",
              arrowatstart:     "0",
              arrowatend:     "1",
              alpha:     "50"
            },
            {
              from:     "09",
              to:     "10",
              strength:     "2",
              arrowatstart:     "0",
              arrowatend:     "1",
              alpha:     "50"
            }                    
          ]
        }
      ]
    };
    FusionCharts.ready(    function() {
          var myChart = new FusionCharts({
        type:     "dragnode",
        renderAt:     "flowchart-container",
        width:     "100%",
        height:     "100%",
        dataFormat:     "json",
        dataSource
      }).render();
    });
    </script>
    </head>
    <body>
         <div id="flowchart-container"></div>
    <    /body>
    </    html>

    author-img

    No comments:

    Post a Comment