ZoomCharts Documentation

Specifying multiple chart layers in a geochart

As described in section "data" layers can reference data via it's ID.

In order to create a GeoChart with multiple layers, one would simply specify an array of the desired layers. The following example illustrates the available layer types

    var options = {
      /* ... */
      layers: [
        {
          id: "shapes",
          type: "shapes",
          /* ... */
        },
        {
          id: "items",
          type: "items",
          aggregation: {/* ... */},
          layout: {/* ... */},
          /* ... */
        },
        {
          id: "shape aggregation",
          type: "aggregateOnShapes",
          shapesLayer: "shapes",
          data: {id: /* ... */},
          aggregationFunction: function (nodes) {/* ... */}
          /* ... */
        },
        {
          id: "charts on geochart",
          type: "charts",
          shapesLayer: "items", // ID of the layer used for chart positions
          chartType: "piechart", // 'piechart' | 'timechart' | 'facetchart'
          settingsFunction: function (node, data) {
            /* return settings for each specific chart here */
            return {};
          }
          /* ... */
        }
      ]
    };

As you can see multiple layers have been supplied in an array, and will be rendered in the order they have been supplied - last layer in the array will be rendered on top of other layers.

Layer types

Shapes

Shapes layer is most useful for displaying boundaries of regions.
If you specify a layer with type: "shapes", the supplied data should contain a collection of coordinates as described in Chart basics.
Styling the shapes is similar to styling the nodes in Net Chart.

Items

Items layer differs from shapes in the sense that each item has only one coordinate. Useful to display coordinates of any kind of events or locations.
Since items have only one coordinate, they can be easily aggregated, when user zooms out. Explore the examples and Api reference to find out more about item aggregation.

Aggregate on shapes

This is a helper layer that allows you to aggregate information that happens to be inside shapes defined in a referenced shapesLayer. In data pass a reference to a data source that holds a collection of items with point based coordinates. Within the aggregationFunction you will gain access to every processed shape, and all the items that are positioned within that shape. Thus you will be able to aggregate information of the underlying items, and adjust style or other properties of the shape. Have a look at the twitter example to see it in action.

Charts

Other ZoomChart components can be rendered inside the Geo Chart.
If you intend to visualize data linked to the shape (or items) layer, you can specify the id of the shapes layer witin shapesLayer property, and specify the contents of settingsFunction that would construct the settings for each chart linked to the respective shape.