Creating Charts from your Graphs

Over the past few years I’ve spent a lot of time trying to define the difference between a Graph and a Chart. But I’m here today to muddy the waters once again.

I’d like to introduce a Graph App that I’ve been working on for the past few weeks, simply called Charts. I’ve designed the app to be useful to both beginners to Neo4j or more experienced users who would like to make their graph-shaped data more understandable to the people around them.

As the name suggests, Charts allows you to create sets of charts from the data held in a Neo4j Database. The Graph App will take the raw results from a Cypher query and convert them into the correct format for the applicable chart, meaning you only have to do a minimal amount of manipulation to the data within your query.

For example, the Metric report will take the first value of the first row and display it in on screen, treating it as a number.

The range of Bar reports (either horizontal or vertical orientation, and stacked or unstacked) all require a set of results with a key, x value and y value and are converted into the correct format by the underlying React component.

Visual Query Builder

For those that aren’t so familiar with the Cypher query language, or those that aren’t interested in writing code at all, the app includes a Visual Query Builder. The query builder inspects your graph structure and provides links to build up a graph pattern without writing a line of code.

After selecting the starting label for the pattern (eg. Person or Movie), the right hand panel will display a list of relationships going into or out of that label. You can continue to click through the graph pattern until you have built up your pattern.

As you build the query, the raw Cypher query will show up in the bottom left hand corner of the screen. You can copy and paste this into Neo4j Browser to preview the results as you go.

Once you have built up the graph pattern, you can click the Where Tab on the right hand panel to add predicates to your where clause. You can select from a range of conditions including equals, starts with, ends with, greater than or less than, and if it’s a negative predicate, tick the NOT checkbox.

As you add these, a set of :param statements will be appended to the top of the query — you should copy these one by one into Neo4j Browser before running your query.

After you have built up the query, you can use the Return Tab to select which properties you would like to return. You can provide an alias to the field and also select from a number of aggregate functions including sum(), count(), and collect().

You’ll end up with a generated cypher query similar to the following:

MATCH (n1:Actor)-[r1:ACTED_IN]->(n2:Movie)-[r2:IN_GENRE]->(n3:Genre)
WHERE (n1.name = $n1_name AND NOT r1.role = $r1_role)
RETURN n2.title AS title, collect(n3.name)

Dashboards

Dashboards are a way of grouping and displaying data. You can create as many dashboards as you need to group different pieces of information together.

You can click Add Dashboard to create a new Dashboard, then click the Add Report button in the top right hand corner to start adding data to the dashboard.

Each dashboard can then contain a number of Reports. Reports use the current Neo4j Connection to return data in a number of formats — signified by the report Type. These can range from simple displays like a Metric (a single figure) or a Table of results to more complex Chart types including Line, Bar and Radar charts.

The Source of each report can either be a Raw Cypher Query that you type directly into the box, or a Query that has been built in the query builder.

If the should be run on any database other than the default database (either the default as configured in neo4j.conf or as specified at login), you can define this in the Database field. You can also choose how many columns (between 1 and 4) the report spans visually in the dashboard.

Help Tab

If you get stuck at any point, you can click the Help link in the top right hand corner of the screen. This page provides a list of the available chart types and an example cypher query for populating the chart.

Sharing Dashboards and Reports

As you start to create queries, dashboards, and reports in the charts graph app, you may notice a couple of json files appear in the Files section of your current active project — graphpanel-dashboards.json and graphpanel-queries.json. As you make changes to queries or dashboards, the changes will be saved into these files ready for the next time you open the graph app.

You can share these files with your friends and colleagues so they see the same view of the data as you have created.

Technical Information

If you’re not interested in the technical aspects of this graph app, you can skip straight to the Install Now section.

The graph app is built using React, taking advantage of the use-neo4j hooks for React. This provides the login form you see when you first open the app, and the useSchema hook to build a picture of the current data model in the query builder. The useReadCypher hook is used by the report components to query the database.

The @neode/querybuilder package is used to convert the query tree into a working Cypher query.

The charts themselves are all provided by Nivo, a set of responsive dataviz components built on top of React and D3.

If you are interested in building your own Graph App using React, you can use this repository to get started.

Install Now…

If you would like to use this graph app today, you can visit charts.graphapp.io to try the app or install it straight to Neo4j Desktop from install.graphapp.io.

If you have any comments or feedback, feel free to get in touch on Twitter. You can also use the feedback form in the bottom right hand corner of the Graph App or create a GitHub issue in the repository.

Happy Charting!