Search code examples
apache-sparkhighchartsapache-zeppelin

Are there better interface to add Highcharts support to Zeppelin

Apache Zeppelin has good support for AngularJS. While there is a gap between Scala and Javascript.

I am trying to add Highcharts support to Zeppelin to fill in this gap. The main goal is to plot it simply directly from Spark DataFrame.

After couple round refactor, I come up with the following interface.

github.com/knockdata/zeppelin-highcharts

Here are two options. Which option is better?

Option A

This is an example to plot highcharts.

highcharts(bank,
  "marital",
  List("name" -> "age", "y" -> avg(col("balance")), "orderBy" -> col("age")),
  new Title("Marital Job Average Balance").x(-20),
  new Subtitle("Source: Zeppelin Tutorial").x(-20),
  new XAxis("Age").typ("category"),
  new YAxis("Balance(¥)").plotLines(Map("value"->0, "width"->1)),
  new Tooltip().valueSuffix("¥"),
  new Legend().layout("vertical").align("right").verticalAlign("middle")
)

Here is the code without extra option.

highcharts(bank,
           "marital",
           List("name" -> "age", 
           "y" -> avg(col("balance")), 
           "orderBy" -> col("age")))

Option B

I come up this option with inspiring by @honnix's answer. It has more syntactic sugar. 

highcharts(bank).series("marital")
  .data("name" -> "age", "y" -> avg(col("balance")))
  .orderBy(col("age"))
  .title(Title("Marital Job Average Balance").x(-20))
  .subtitle(Subtitle("Source: Zeppelin Tutorial").x(-20))
  .xAxis(XAxis("Age").typ("category"))
  .yAxis(YAxis("Balance(¥)").plotLines("value"->0, "width"->1))
  .tooltip(Tooltip().valueSuffix("¥"))
  .legend(Legend().layout("vertical").align("right").verticalAlign("middle"))
  .plot

A simple plot without option will be

highcharts(bank).series("marital")
  .data("name" -> "age", "y" -> avg(col("balance")))
  .orderBy(col("age"))
  .plot

It will generate a chart here.

Marital Job Average Balance

Solution

  • It would be good to have some kind of chaining methods to pass in those parameters, because putting a few lists together in one apply() method is a little bit hard to read.