Overview

Callimachus' Chart Wizard exists to make visualizations of your data easy to explore, develop, and include in other documents. No JavaScript to write or frameworks to learn - the Chart Wizard provides a friendly user interface that allows you to create and customize a wide variety of charts and visualizations for any properly structured queries contained within Callimachus.

Interface

Visualizations are based on data and data is surfaced and organized via queries. For that reason, the Chart Editor is only available when you are on the ?view template for an existing query. Once there, the Chart Editor is opened by clicking the Main Menu (top right) in the top right of the screen and selecting "Edit visualization". 

At this point the Wizard is opened in a dialog box in front of whatever Named Query you were previously viewing. The dialog box is intentionally minimal to allow you to test multiple visualizations and see the results in real-time in the query view page. This allows for rapid iteration and testing of potential visualizations without having to compile or embed unsuccessful attempts. 

The Wizard is composed of two sections: the Visualization Selector and the Chart Options pane. 

Visualization Selector

When you select "Edit visualization" from the main menu the dialog box will appear. From here try selecting different visualizations and take notice of how the query view page (behind the dialog box) which was once a simple table, changes to reflect the selections made in the chart wizard.

Callimachus' chart wizard also offers the ability to create Google Charts via an integration of the Google Charts Editor. To see what options are available via Google Charts select "More... (Google Charts)" from the bottom of the menu to open the editor. Documentation on the Google Charts Editor is below.

Chart Options pane

Many of the Visualizations can be further customized once they are selected. For some visualizations, X and Y axes or label and value settings will need to be specified. Once the mandatory configuration is completed, many optional configurations exist. Attributes such as color, gradient scaling, and legends can be added with ease. Just as with changing visualization types, any changes to the attributes are reflected in the actual query view behind the chart wizard. Try out some of the different options and see what works best before saving the final product.

Here you can see we have taken a basic line chart and assigned the following configurations:

  • Assigned the key column to represent the results of the ?label variable returned in the query
  • Assigned the value column to represent the results of the ?count variable returned in the query
  • Set the chart to display the labels from the key column
  • Set the chart to display a legend of all key column values

Google Charts Editor

Start tab

This tab is simple yet powerful. Callimachus' Chart Wizard will actually introspect the structure of the Named Query's results and suggest charts that may make the most sense for the underlying data. Also, if applicable, this tab allows users to set the first column of results as labels for any resulting charts.

Charts tab

The Charts tab houses the full collection of available charts and visualizations (full list below). Simply click a chart option to populate the preview area to the right. If a chart would not render properly based on the underyling data the option is greyed out and the preview area offers some guidance on how the data must be structured in order for that chart to be used.

Customize tab

The Customize tab gives you the ability to fine-tune your chart to whatever level of granularity you desire. Each specific chart has it's own respective set of configuration options available under the "Customize" tab in the Chart Wizard. Some are more configurable than others but in general you will be able to edit aspects such as color, font, title, legend, and more. Just as in the Charts tab, any changes made here are immediately reflected in the preview pane to the right.

Chart Types

  • Table
    • Bootstrap
    • Datatable
    • Google Charts
  • Bar 
    • Dimple
    • Google Charts -> Basic
    • Google Charts -> Stacked
  • Line
    • Dimple
    • Google Charts -> Basic
    • Google Charts -> Smooth
    • Google Charts -> Combo
    • Google Charts -> Radar
  • Area
    • Dimple
    • Google Charts -> Basic
    • Google Charts -> Stacked
    • Google Charts -> Stepped
  • Pie
    • NVD3
    • Google Charts -> Basic
    • Google Charts -> Three dimensional
    • Google Charts -> Donut
  • Map
    • Google Charts -> Region
    • Google Charts -> Marker
  • Column
    • Google Charts -> Basic
    • Google Charts -> Stacked
  • Scatter 
    • Google Charts -> Basic
    • Google Charts -> Bubble
  • Trend
    • Google Charts -> Spark
    • Google Charts -> Time
    • Google Charts -> Motion
    • Google Charts -> Candlestick
  • Other
    • Google Charts -> Gauge
    • Google Charts -> Org Chart
    • Google Charts -> Tree map
    • Google Charts -> Table

Integration into Applications

There are two ways in which these charts can be integrated into Callimachus pages and applications. The first is via the @view template notation on Named Query templates and the second is through embedded iFrames.

Named Query View Template

If you click "Save settings..." at the bottom of the Chart Editor and save the chart, that chart's new URL is set as the @view template for the Named Query the chart is based on. If you create another visualization for that same Named Query, the @view template will be updated to the most recent visualization.

Note: Previously created visualizations have not been deleted, they are just not assigned as the @view template for the Named Query. The visualization itself still exists.

If you want to keep the visualization but do not want it applied as the @view template for the Named Query, simply edit the Named Query and remove the URL following @view at the top of the page.

iFrame

Another way to integrate the visualizations into different pages and applications is via iFrames. This allows for ultimate flexibility since iFrames can be independetly styled and layed out on the page. Use the URL of the visualization as the @src attribute for the iFrame and you're done!

<iframe src="/my-first-chart.xhtml?view" />

Sample Query

Want to try out the Chart Editor quickly? Upload this sample query which lends itself well to a large number of the chart options. 

#
# @Cache-Control: 
# @infer true
# @view
#
PREFIX rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#>
PREFIX rdfs: <http://www.w3.org/2000/01/rdf-schema#>

SELECT ?label (COUNT(?type) AS ?count) {

    ?resource a ?type .

    ?type rdfs:label ?label .
} GROUP BY ?label ORDER BY DESC(?count) LIMIT 30