The SDON Cookbook

12/17 Page

Using Shape Data to Simplify Diagrams

Sometimes a shape may represent a item that has lots of data. For example a position in an organizational chart may represent a person with lots data beyond his or her name and title:

  • Date of Hire
  • Phone extension
  • Email
  • Office location

and so on. Showing all of this information in the shape can be accomplished with a table.

SDON table data

Showing this information in each shape makes the chart larger and more difficult to follow, The script for this example is also very detailed:

{
    "Shape": {
        "MinWidth": "300",
        "Table": {
            "Rows": "6",
            "Columns": "2",
            "Cells": [{
                "Row": "1",
                "Column": "1",
                "Label": "Name"
            }, {
                "Row": "1",
                "Column": "2",
                "Label": "Richard Szabo"
            }, {
                "Row": "2",
                "Column": "1",
                "Label": "Position"
            }, {
                "Row": "2",
                "Column": "2",
                "Label": "Director of R&D"
            }, {
                "Row": "3",
                "Column": "1",
                "Label": "Date of Hire"
            }, {
                "Row": "3",
                "Column": "2",
                "Label": "5/1/2008"
            }, {
                "Row": "4",
                "Column": "1",
                "Label": "Phone"
            }, {
                "Row": "4",
                "Column": "2",
                "Label": "x123"
            }, {
                "Row": "5",
                "Column": "1",
                "Label": "Email"
            }, {
                "Row": "5",
                "Column": "2",
                "Label": "Richards@acme.com"
            }, {
                "Row": "6",
                "Column": "1",
                "Label": "Office"
            }, {
                "Row": "6",
                "Column": "2",
                "Label": "Room 1132"
            }]
        },
        "ShapeConnector": [{
            "Shapes": [{
                "Table": {
                    "Cells": [{
                        "Row": "1",
                        "Column": "2",
                        "Label": "Heather Allison"
                    }, {
                        "Row": "2",
                        "Column": "2",
                        "Label": "Senior Programmer"
                    }, {
                        "Row": "3",
                        "Column": "2",
                        "Label": "1/1/2010"
                    }, {
                        "Row": "4",
                        "Column": "2",
                        "Label": "x104"
                    }, {
                        "Row": "5",
                        "Column": "2",
                        "Label": "heathera@acme.com"
                    }, {
                        "Row": "6",
                        "Column": "2",
                        "Label": "Room 1141"
                    }]
                }
            }, {
                "Table": {
                    "Cells": [{
                        "Row": "1",
                        "Column": "2",
                        "Label": "Hugo Ramirez"
                    }, {
                        "Row": "2",
                        "Column": "2",
                        "Label": "QA Engineer"
                    }, {
                        "Row": "3",
                        "Column": "2",
                        "Label": "11/1/2011"
                    }, {
                        "Row": "4",
                        "Column": "2",
                        "Label": "x105"
                    }, {
                        "Row": "5",
                        "Column": "2",
                        "Label": "hramirez@acme.com"
                    }, {
                        "Row": "6",
                        "Column": "2",
                        "Label": "Room 1142"
                    }]
                }
            }]
        }]
    }
}

Compare this with the same example using shape data:

SDON shape data

Hovering over the small "i" icon on each shape displays a tool tip that shows the additional data:

SDON shape data hover

The result is a much cleaner looking diagram that still provides access to the full data record represented by the shape.

There are two steps required to incorporate shape data into SDON:

  1. Defining a data table
  2. Adding rows of data and assigning them to a shape.

Defining a Data Table

SmartDraw's model for shape data is modeled on the rows and columns of a database (or spreadsheet). The columns specify the fields of the database (the "schema"). The rows represent data records or sets of values for the fields. A shape may be mapped to a one row in a data table.

The data table is defined using the "DataTable" property of the SDON object with the following structure:

"DataTable": [{
    "ID": "1",
    "Name": "HRInfo",
    {
        "Columns": [{
            "Name": "Date of Hire",
            "Type": "Date"
        }, {
            "Name": "Phone",
            "Type": "String"
        }, {
            "Name": "Email",
            "Type": "String"
        }, {
            "Name": "Office"
        }]
    }
}]

The "DataTable" is an array since you can define multiple tables in the same script.

  • The ID property for a table object is used to refer to this table in shape definitions and is optional. By default, the tables defined in the array have ID=1, 2, 3 etc.
  • The "Name" property is the name of the table that will show in the SmartDraw UI. It too is optional: Tables are named "Table-1", "Table-2"... by default.
  • The "Columns" property is an array of column definition objects that specify the name of a column and its type. Type is optional and defaults to string. Other choices are "Int", "Float" and "Date".

Adding a Row of Data and Assigning it to a Shape

Using the Shape

You can define shape data in-line using the "Data":{} object inside the Shape object.

"Shape": {
    "Data": {
        "TabledID": "1",
        "Fields": [{
            "Name": "Date of Hire",
            "Value": "5/1/2008"
        }, {
            "Name": "Phone",
            "Value": "x123"
        }, {
            "Name": "Email",
            "Value": "Richards@acme.com"
        }, {
            "Name": "Office",
            "Value": "Room 1132"
        }]
    }
}

The Data object has an array of field name/value pairs in "Fields". It also has an optional "TableID" to indicate which of the tables defined by the "DataTable" object to use. If no TableID is defined,the first table is used.

Using the DataTable

The DataTable object may have a Rows array that defines rows of data and shapes may be mapped to these rows using the "RowID" for each row.

{
    "DataTable": [{
        "Columns": [{
            "Name": "Date of Hire"
        }, {
            "Name": "Phone"
        }, {
            "Name": "Email"
        }, {
            "Name": "Office"
        }],
        "Rows": [{
            "RowID": "1",
            "Fields": [{
                "Name": "Date of Hire",
                "Value": "5/1/2008"
            }, {
                "Name": "Phone",
                "Value": "x123"
            }, {
                "Name": "Email",
                "Value": "Richards@acme.com"
            }, {
                "Name": "Office",
                "Value": "Room 1132"
            }]
        }, {
            "RowID": "2",
            "Fields": [{
                "Name": "Date of Hire",
                "Value": "1/1/2010"
            }, {
                "Name": "Phone",
                "Value": "x104"
            }, {
                "Name": "Email",
                "Value": "heathera@acme.com"
            }, {
                "Name": "Office",
                "Value": "Room 1141"
            }]
        }, {
            "RowID": "3",
            "Fields": [{
                "Name": "Date of Hire",
                "Value": "11/1/2011"
            }, {
                "Name": "Phone",
                "Value": "x105"
            }, {
                "Name": "Email",
                "Value": "hramirez@acme.com"
            }, {
                "Name": "Office",
                "Value": "Room 1142"
            }]
        }]
    }],
    "Shape": {
        "Label": "Richard Szabo\nDirector of R&D",
        "Data": {
            "RowID": "1"
        },
        "ShapeConnector": [{
            "Shapes": [{
                "Label": "Heather Allison\nSenior Programmer",
                "Data": {
                    "RowID": "2"
                }
            }, {
                "Label": "Hugo Ramirez\nQA Engineer",
                "Data": {
                    "RowID": "3"
                }
            }]
        }]
    }
}

The inline definition of data rows with each shape is easier to use if you discover the shape data as you add each shape to the diagram. Including the data rows in the DataTable is easier if you know the full table of data before you start adding shapes.

12/17 Page