Show / Hide Table of Contents

Getting Started

Information!
Adding Flow Chart JS to your project is very simple, it will only take you few minutes, then your users will be able to create flow charts in seconds.

System requirements

  • Flow Chart JS runs on any server that supports HTML. You can even run BALKAN FlowChartJS locally from a filesystem.
  • Flow Chart JS does not depend on any third party JavaScript library
  • Flow Chart JS works in all modern browsers and uses SVG for the graphics rendering

Installation

  1. Download BALKAN FlowChartJS file form here.
  2. Unzip the file and add it to you root directory.
  3. In your html document between the head tags include the code bellow, and then Flow Chart JS will be installed.
     
                
    <script src="www.[yourdomain].com/FlowChart.js"></script>
                

Your first BALKAN FlowChartJS project

With BALKAN FlowChartJS included in your webpage you are ready to create your first Flow Chart JS.

  1. Add a div in your webpage. Give it an id and set a specific width and height which will be the width and height of your Flow Chart JS.
     
                
    <div id="chart"></div>
    
  2. Add script tags anywhere in a webpage, containing the following code:
        
                
    <script>
    
    let chart = new FlowChart('#chart', {
        startPosition: FlowChart.startPosition.centerTop
    });
    
    chart.onChanged(function(){
        var data = chart.json();
        //post data to server
    });
    
    chart.load(
        {
            nodes: [
                { id: 1, templateId: 'process', x: 400, y: 150, text: "Lamp doesn't work", fill: "#FFCA28" },
                { id: 2, templateId: 'decision', x: 400, y: 350, text: "Lamp plugged in?", fill: "#F57C00" },
                { id: 3, templateId: 'decision', x: 400, y: 600, text: "Bulb burned out?", fill: "#F57C00" },
                { id: 4, templateId: 'process', x: 700, y: 600, text: "Change bulb" },
                { id: 5, templateId: 'process', x: 700, y: 350, text: "Plug the cable" },
                { id: 6, templateId: 'process', x: 400, y: 800, text: "Repair lamp" }
            ],
            links: [
                { from: 1, to: 2 },
                { from: 2, to: 3 },
                { from: 3, to: 4 },
                { from: 2, to: 5 },
                { from: 3, to: 6 },
            ],
            labels: [
                { from: 3, to: 4, position: 50, text: 'Yes' },
                { from: 2, to: 3, position: 50, text: 'Yes' },
                { from: 2, to: 5, position: 50, text: 'No' },
                { from: 3, to: 6, position: 50, text: 'No' },
            ]
        }
    );
    
    </script> 
                
  3. You should now see the following Flow Chart JS on your webpage:

Components

Below are the Flow Chart JS components and how you can access them through the API:


TypeScript Declaration File

The download package includes .d.ts file.
If you don't use any frameworks, in order to have intellisense for your .js file in Visual Studio Code, you need to inclide this refference in the top of the file:


        
/// <reference path="FlowChart.d.ts" />

Update the database

Use onChanged method to save changes in the database.

Here we have an example on how to update the database. For more details, see our Server Side examples doc page.

License

We believe in a simple, transparent and flexible licensing and pricing model that is aligned with the business value BALKAN App delivers to you. All licenses include one year of maintenance and technical support and are available on perpetual base.