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.