Showing Charts for Neo4j Query Results using amCharts and Structr
By: Dana Canzano
Tags: Bi, How To, JavaScript, Data Visualization, Cypher

Showing Charts for Neo4j Query Results using amCharts and Structr

Learn how to render a bar chart based upon the example movies graph

Over my last 2 blog posts, Zendesk to Neo4j Integration and Zendesk to Neo4j Integration : Better control over your reporting needs and building a UI, I have detailed a project I have been working on to export data from Zendesk and then build a dashboard using Structr. To date most of the output is displayed with a number of traditional sortable HTML tables. This in itself provides access to the data, but has a very raw look to the the data.

The next step is to enhance the display to add useful charts by using components developed by amCharts. This document will describe the steps taken to build a very simple vertical bar chart based upon the :play movies database provided with Neo4j.

And although the example below is constructed within the Structr framework, if you are not using Structr, one could have just as easily done this using the Neo4j Bolt Javascript driver.

The examples provided below are built using the following software and respective versions

Neo4j 3.5.3

Structr 3.0.2

amCharts4

And to which the final result is a chart similar to

This bar chart is representing the Top 5 years when movies were released. Both the chart and the table are produced by running the Cypher query

MATCH (n:Movie) WITH toString(n.released) as yr, count(n) as MovieCount ORDER BY MovieCount DESC LIMIT 5 RETURN {year: yr, NumOfMovies: MovieCount}

amCharts is is an open source Javascript library for data visualization and provides many charts (bar charts, pie charts, line and area charts, etc). Their website has numerous demos which show the Javascript code used to populate the charts.

Once you find the chart type you want to embed into your website or application, it’s simply a matter of understanding the format of their chart.data object and then constructing a Cypher statement that can produce similar results.

For example, for a Simple Pie Chart the chart.data is of the form

[{<property name>:<property value>,<property aggregate name>:<value of property aggregate>}]

for example

chart.data=[{‘country’: ‘USA’, ‘param1’: 42 }, {‘country’:’Canada’, ‘param1’: 33 }]

And this would produce a Pie Chart with 2 slices where the slice for USA would represent 56% and Canada would represent 44%.

If you know Cypher, generating the necessary data sets is trivial.

For the chart of the Top 5 Years in which movies were released, the following steps were performed:

Install and start an instance of Neo4j and create the Movie graph/dataset with the create script in the :play movies guide. Install and start Structr. Download amCharts4. For my install I choose to download the amcharts_4.2.1.zip from Download a standalone Javascript Version . I then unzipped the file to c:\amcharts

Connect to Structr at http://localhost:8082/structr and a choose menu choice Files . Under the File Explore View, and under the top level directory of assets , click [Add Folder] and name the folder amcharts . Click the amcharts folder. Drag the following files (core.js, charts.js maps.js) from the amcharts install path into the Structr UI and the amchart folder. The results should then appear as

Repeat the process and under the assets/amcharts folder structure click [Add Folder] and name the folder themes . Click the themes folder. Drag all of the files from the amCharts install path, themes subdirectory into the Structr UI. This should then result in the following UI

Using the Structr UI, click menu choice Pages and click the Import Template

I then choose to ..or fetch Page from URL and entered https://getbootstrap.com/docs/4.0/examples/dashboard/. This then creates a page in Structr that appeared as

This was done to establish the base look and feel for the page I wanted. From here if you click on an HTML object in the right frame the tree view structure on the left will open to the raw HTML object. For the most part I then deleted many of the objects (i.e. the line graph, and the menu choices on the left frame of the right frame.

To the remaining table, I made edits such that it would only have 2 column headers like this

The tr element is then defined a

The 2 td HTML objects are defined with a content element and defined as ${Results.year} and ${Results.NumOfMovie} respectively. At this point showing the page will submit the Cypher statement and display its results in a table.

The next step is to include the bar chart. In this case we will define, a vertical bar chart, or as amCharts refers to it a XY Chart. To do so, within Structr create a new div HTML element like this

The name of the id is used in the next step.