Neo4j

dana_canzano · ‎03-13-2019

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.dataobject and then constructing a Cypher statement that can produce similar results.

For example, for a Simple Pie Chart the chart.datais 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/amchartsfolder structure click [Add Folder] and name the folder themes. Click the themesfolder. Drag all of the files from the amCharts install path, themessubdirectory into the Structr UI. This should then result in the following UI

Using the Structr UI, click menu choice Pagesand click the Import Template

I then choose to ..or fetch Page from URLand 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 trelement is then defined a

The 2 tdHTML 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 idis used in the next step.

Under the divcreate a new HTML script element and define its content as

Note most of this code is similar to what is described at https://www.amcharts.com/demos/stacked-column-chart/.

This line creates the chart

var chart=am4core.create("chart-container",am4charts.XYChart);

The first arguement refers to the id of the div element created in the prior step, and the second describes the chart type.

Further down, we define and submit the Cypher query. It should be noted that with Javascript if you have a multi-line Cypher statement you need to end each line with a \. Also if you need to include a where clause which qualifies on a string then you need to escape the single quote character with a leading \. Thus where n.status='deleted' needs to be written as where n.status=\'deleted\'

Finally define 4 script HTML elements and with their srcattribute respectively defined as

/assets/amcharts/core.js
/assets/amcharts/charts.js
/assets/amcharts/maps.js
/assets/amcharts/themes/animated.js

The first should appear similar to

The treeview structure in the Structr UI should now appear as

Now that this is complete your page in Structr should now display as

In summary, this is but a very simple example to add a chart to your webpage and have it constructed from the results of a Cypher statement.

One of the benefits of using amCharts is that it provides a number of different chart types and provides for animation whereby hovering over a bar will show more details. Further I can define multiple stacked charts in a single view and then toggle on/off each stack.

Showing Charts for Neo4j Query Results using amCharts and Structr was originally published in neo4j on Medium, where people are continuing the conversation by highlighting and responding to this story.