Skip to main content

Custom Charts

Definition​

In Veezoo, you can define custom maps using the custom_chart configuration. This allows you to create visualizations that extend beyond the default chart types provided by Veezoo. One such example is a custom map visualization using GeoJSON data.

We plan to extend custom_chart to other charts in the future that are not maps.

Example​

Here is a realistic example of how to define a custom chart for visualizing sales performance by region:

custom_chart Region_Map {
    name: "Region Map"

    show_for_class: kb.Region

    // needs to match the entities of the class with the values for the given property
    // in this example "US-NY" needs to be an entity of kb.Region in the KG as well
    geojson_join_by: "region_code"
    
    geojson: """
        {
            "type": "FeatureCollection",
            "features": [
                {
                    "type": "Feature",
                    "properties": {
                        "region_code": "US-NY"
                    },
                    "geometry": {
                        "type": "Polygon",
                        "coordinates": [[[...]]]
                    }
                }
            ]
        }
    """
}

Properties​

name​

  • The name of the custom chart that will be displayed in the UI.
  • Example: "My Custom Map"

show_for_class​

  • Specifies the class for which the custom chart should be displayed.
  • This ensures that the chart is only available when querying data related to the specified class.
  • Example: kb.Region

geojson_join_by​

  • Defines the key in the GeoJSON data that corresponds to values in the show_for_class class.
  • This allows the system to match entities in your dataset to regions in the GeoJSON data.
  • Example: "region_code"

geojson​

  • Contains the GeoJSON data that defines the shapes and regions for the custom map.
  • The GeoJSON format should be properly structured to include features with corresponding properties that align with the geojson_join_by key.
  • Example:
geojson: """
{
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "properties": {
                "region_code": "123"
            },
            "geometry": {
                "type": "Polygon",
                "coordinates": [[[...]]]
            }
        }
    ]
}
"""

match_pattern (Optional)​

  • The match_pattern specifies the VQL pattern that needs to be matched for the custom chart to be considered.
  • This is useful when you want to display a custom chart only when certain conditions are met.
  • Example:
custom_chart Map_of_Rio_de_Janeiro {
    ... // other attributes of custom_chart

    // only show this for answers involving cities
    show_for_class: kb.City

    // make sure that we have a filter for Rio de Janeiro
    match_pattern: """
        var order: kb.Orders
        order.located_in = kb.State.Rio_de_Janeiro
    """
}

Usage​

Once defined, the custom chart will be available when querying the specified show_for_class in Veezoo. Users can visualize data mapped to the geographic regions defined in the geojson property.

Example Use Case​

If you have sales data categorized by region, you can define a custom map that highlights regions with different colors based on sales performance. By setting geojson_join_by to the appropriate region identifier, the map will dynamically adjust based on the queried data.

Additionally, you can use match_pattern to ensure that the chart is only displayed when specific filters are applied, making the visualization context-aware.

Considerations​

  • Ensure that the GeoJSON data is correctly formatted to prevent rendering issues.
  • The geojson_join_by key must match exactly with values in your dataset.
  • match_pattern should be carefully crafted to align with the intended VQL logic.
  • Custom charts provide a way to enhance visualization options within Veezoo while maintaining a seamless user experience.