Custom chart example - Google Maps
eazyBI for Jira
eazyBI for Confluence
This example will describe how to add a Google Maps based custom chart type to eazyBI.
eazyBI by default includes similar OpenStreetMap and MapQuest interactive maps in the Map chart.
This is just an example of how to add custom charts to eazyBI.
This example will use Google Maps API and additional MarkerClusterer library. At first, create the directory
Then download https://github.com/googlemaps/js-marker-clusterer and save it in this directory as
custom_charts.js file in this directory with the following implementation of Google Maps based chart type:
This chart assumes that you have selected events or objects on the rows and you would like to show them as markers on Google Maps. The first two columns should contain latitude and longitude of these markers, other column values will be shown in the popup when clicking on the marker. The Google Maps API library will be dynamically loaded from
during the first rendering of the chart.
In the beginning of this file, you can see how you can add custom chart types to the list of available report and charts types in
namewill be the display name of the chart type in the Analyze tab.
keyis the internal key that will be saved in the report definition. It is recommended to use the prefix
custom_to avoid conflicts with the standard chart type keys.
iconspecifies the CSS classes that will be used for the chart type icon. You can use Font Awesome icon names there.
You can also modify the
Eazy.resultsViews array if you would like to remove any of the standard chart types that you do not need.
Include custom assets
include_custom_report_assets? will return
true when it is necessary to load assets for custom charts (when showing reports and dashboards).
Test and debug
After each change of the
custom_charts.js you can reload the browser page and the new version of the files will be loaded. You can use