Introducing New Chart Library and Types for Apache Zeppelin

Why Charts are important in zeppelin?
Zeppelin is mostly used for data analysis and visualization. Depending on the user requirements and datasets the types of charts needed could differ. So Zeppelin let user to add different chart libraries and chart types.

 

Add New Chart Library
When needed a new JS chart library than D3 (nvd3) which is included in zeppelin, a new JS library for zeppelin-web is added by adding name in zeppelin-web/bower.json

eg: Adding map visualization to Zeppelin using leaflet

"leaflet": "~0.7.3" for dependencies

 

Add New Chart Type

Firstly add a button to view the new chart. Append to paragraph.html (zeppelin-web/src/app/notebook/paragraph/paragraph.html) the following lines depending on the chart you use.

1 <button type="button" class="btn btn-default btn-sm"
2   ng-class="{'active': isGraphMode('mapChart')}"
3   ng-click="setGraphMode('mapChart', true)"><i class="fa fa-globe"></i>
4 </button>

After successful addition the zeppelin user will be able to see a new chart button added to the button group as follows.

Defining the chart area

Defining the chart area of the new chart type.
To define the chart view of the new chart type add the following lines to paragraph.html

1 <div ng-if="getGraphMode()=='mapChart'"
2   id="p{{paragraph.id}}_mapChart">
3     <leaflet></leaflet>
4 </div>

Setup the chart data

Different charts have different attributes and features. To handle such features of the new chart type map those behaviors and features in the function `setGraphMode()` in the file paragraph.controller.js as follows.

1 if (!type || type === 'mapChart') {
2   //setup new chart type
3 }

The current Dataset can be retrieved by `$scope.paragraph.result` inside the `setGraphMode()` function.

Best Practices for setup a new chart.

A new function can be used to setup the new chart types. Afterwards that function could be called inside the `setMapChart()` function.

Here is sample code setting map chart type

 1 var setMapChart = function(type, data, refresh) {
 2   //adding markers for map
 3   newmarkers = {};
 4   for (var i = 0; i < data.rows.length; i++) {
 5     var row = data.rows[i];
 6     var rowMarker = mapChartModel(row);
 7     newmarkers = $.extend(newmarkers, rowMarker);
 8   }
 9   $scope.markers = newmarkers;
10   // adding map bounds
11   var bounds = leafletBoundsHelpers.createBoundsFromArray([
12     [Math.max.apply(Math, latArr), Math.max.apply(Math, lngArr)],
13     [Math.min.apply(Math, latArr), Math.min.apply(Math, lngArr)]
14   ]);
15   $scope.bounds = bounds;
16 }