Dashboard Report Renderer

Adds additional output types for dashboard items that define a report or item.configuration.report.

There are several built-in renderers defined in reportRenderers.js.


For this tutorial, we'll create a new JSON renderer that simply takes the result, formats it, then prints it.

Create Web Plugin

Register the resources to define the extension and the referenced component.

public void init(WebApp app, ServletContext servletContext, Handler authenticationHandler) {
    app.registerJavaScript("/org/visallo/examples/dashboard_reportrenderer/plugin.js", true);
    app.registerJavaScript("/org/visallo/examples/dashboard_reportrenderer/renderer.js", false);

Register the Extension

Register the new report renderer. It will accept any response.

visallo.registry.registerExtension('org.visallo.web.dashboard.reportrenderer', {
    identifier: 'org-visallo-examples-dashboard-reportrenderer',
    label: i18n('org.visallo.examples.dashboard_reportrenderer.label'),
    supportsResponse: function(data) {
        return true;
    componentPath: 'org/visallo/examples/dashboard_reportrenderer/renderer'

Define the Renderer

Create the renderer component and include the mixin.

], function(api, withReportRenderer) {

    return api.defineComponent(JSONStringRenderer, withReportRenderer)

    function JSONStringRenderer() {

Now, implement the processData and render functions

this.processData = function(data) {
    return JSON.stringify(data, null, 2);

this.render = function(d3, node, data) {
            'white-space': 'pre',
            'font-family': 'menlo',
            'font-size': '8pt'

Renderer Mixin

The custom report renderer can mixin dashboard/reportRenderers/withReportRenderer.js which provides:

  • Automatically requesting data using endpoint configuration
  • Handling refresh and reflow events
  • Basic click handling if aggregations found
  • Error handling

If the renderer uses the mixin, the only function required is render. Optionally, a processData function can be defined to transform the raw server results. It's better to process the data in processData function instead of render because it will run once on refreshData events, instead of on every reflow event.

Built-In Report Renderers


Horizontal bar chart, also supports stacked bars if two aggregations provided.


Vertical bar chart, also supports stacked bars if two aggregations provided.


A classic pie chart.


Text cards that show number and text.


Standard list of elements, used in search results.

results matching ""

    No results matching ""