Creating Diagrams From Structured Data
Easily create a diagram from various data sources like JSON, Excel, XML, CSV, etc.
Many companies store digital data in a structured form. The storage format ranges from databases, XML files, or Excel sheets to raw data storage formats, like CSV (comma-separated values) or JSON (JavaScript Object Notation) files. These tabular representations are hard to grasp, and specific dependencies often get lost without a graphical representation. A well-structured, interactive diagram provides an easy way to understand and represent the data.
It enables users to visually explore the stored data, identify significant structures, and get a better understanding of relationships. Besides the visual exploration, it is also possible to interactively edit the stored data by modifying the diagram without any in-depth knowledge of the underlying storage technology.
How to Create Diagrams From Data
Creating diagrams from textual data may sound unusual or even impossible at first. However, most data have inherent relationships that connect separate entries. Typical examples are transactions between persons in an economic context, a team hierarchy in an employee list, a workflow in a manufacturing process, or just shared properties between different data entries.
These relationships form a diagram that is easier to understand than a textual representation.
Transforming Your Data Into Diagrams
yFiles is a commercial programming library explicitly designed for diagram visualization and provides a built-in mechanism that can transform given data sets into interactive diagrams. It also provides an easy to use diagram creation interface to build a diagram from any data source programmatically.
yFiles does not impose a particular structure on the input data. It does not matter whether the data is provided as separate lists for entities and relationships or whether the relationships are stored implicitly by deeply nested data or as an additional property.
Transform JSON Data Into Diagrams
Structured JSON data can be directly transformed into a diagram with yFiles’ built-in GraphBuilder class. This convenient builder class can be adapted to various structured JSON objects.
The business data is attached to each item visualization, such that it can be accessed and used to enhance the item visualization further. For example, specific data can be shown on its graphical representation or as a tooltip.
Try the interactive Graph Builder Sample Application that lets you build and modify a graph from business data. It is part of yFiles for HTML package.
Transform CSV Files Into Diagrams
Creating diagrams from CSV files is all about parsing the file for which there are different approaches. The most straight forward one is to split the file by newlines and the separating character to extract the data rows and cells. Different platforms also provide more sophisticated means to handle CSV files.
id,name,title,department,email,phone,fax,status,superiorId,isAssistant
0,Eric Joplin,Chief Executive Officer,Executive Unit,ejoplin@yoyodyne.com,555-0100,555-0101,present,
1,Gary Roberts,Chief Executive Assistant,Executive Unit,groberts@yoyodyne.com,555-0100,555-0101,present,0,true
2,Alexander Burns,Senior Executive Assistant,Executive Unit,aburns@yoyodyne.com,555-0102,555-0103,present,1,
3,Linda Newland,Junior Executive Assistant,Executive Unit,lnewland@yoyodyne.com,555-0112,555-0113,present,1,
4,Amy Kain,Vice President of Production,Production,akain@yoyodyne.com,555-0106,555-0107,unavailable,0,
5,Richard Fuller,Vice President of Sales,Sales,rfuller@yoyodyne.com,555-0134,555-0135,present,0,
6,Mildred Shark,Vice President of Engineering,Engineering,mshark@yoyodyne.com,555-0156,555-0157,present,0,
7,Martha Barnes,Engineering Manager,Engineering,mbarnes@yoyodyne.com,555-0158,555-0159,busy,6,Once the data is extracted and available in memory, it can be hooked up with the GraphBuilder which transforms it into a diagram. Although the GraphBuilder can cope with many different data structures, there may also be input data to which it cannot be adapted. In these cases, yFiles’ item factory methods can be used to easily create graph model elements while iterating over the data.
Transform Excel Sheets Into Diagrams
Excel sheets, similar to CSV files, can also be transformed into diagrams if there are relationships between the entries. Due to the more complex file format, loading and parsing the data is more complex and requires additional software solutions to handle these files. However, most platforms provide open-source solutions for this. There is SheetJS for the web or Apache POI for Java, for example.
When the data is loaded and parsed, it can be managed the same way as any JSON or CSV data. Thus, from the above Excel sheet, the same diagram as in the CSV data sectionCSV data section can be created.
Transform XML Files Into Diagrams
On platforms where XML files are more commonly in use like the WPF, .NET (Forms), or Java (Swing) and JavaFX platforms, a diagram can also be easily created by hooking up the platform-specific GraphBuilder class of yFiles.
<?xml version="1.0" encoding="utf-8" ?>
<staff xmlns="">
<employee position="Chief Executive Officer" name="Eric Joplin" email="ejoplin@yoyodyne.com" phone="555-0100" fax="555-0101" businessUnit="Executive Unit" status="present" icon="usericon_male1">
<employee position="Chief Executive Assistant" name="Gary Roberts" layout="leftHanging" email="groberts@yoyodyne.com" phone="555-0100" fax="555-0101" businessUnit="Executive Unit" status="present" icon="usericon_male2" assistant="true">
<employee position="Senior Executive Assistant" name="Alexander Burns" email="aburns@yoyodyne.com" phone="555-0102" fax="555-0103" businessUnit="Executive Unit" status="present" icon="usericon_male3" />
<employee position="Junior Executive Assistant" name="Linda Newland" email="lnewland@yoyodyne.com" phone="555-0112" fax="555-0113" businessUnit="Executive Unit" status="present" icon="usericon_female1" />
</employee>
...
</employee>
</staff>Some of the example applications listed below show how to create diagrams from XML.
Example and Source Code
On all yFiles platforms, yFiles diagrams can be created from arbitrary data sources. yFiles for HTML comes with several sample applications that demonstrate the various forms of JSON data that are supported by the graph builder class. On the other platforms, yFiles comes with similar examples.
The source code of all of these sample applications is part of the yFiles packages and available on the yWorks GitHub repository:
The Simple Graph Builder Sample Application provides a very nice blueprint for developers for creating their very own customized white-label data visualizing applications.
Creating Diagrams from Data Sources in Your Own Application
Test how yFiles diagrams can be created from arbitrary data sources with a fully-functional trial package of yFiles. In all platforms, diagram creation from arbitrary data sources requires only a few lines of code.