Apache Zeppelin - Highcharts

问题

I am trying Apache zeppelin . I wanted to have highcharts. So I thought of using %html interpreter. I have done this

print("%html <h3> Hello World!! </h3>")

It perfectly works. Know I have the code for highcharts

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://www.highcharts.com/js/highcharts.js"></script>
<script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script>


<script type="text/javascript">

    $(function () {
        $('#container').highcharts({
            chart: {
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false
            },
            title: {
                text: 'Browser market shares at a specific website, 2010'
            },
            tooltip: {
                pointFormat: '{series.name}: <b>{point.percentage}%</b>',
                percentageDecimals: 1
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: true,
                        color: '#000000',
                        connectorColor: '#000000',
                        formatter: function() {
                            return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
                        }
                    }
                }
            },
            series: [{
                type: 'pie',
                name: 'Browser share',
                data: [
                    ['Firefox',   45.0],
                    ['IE',       26.8],
                    {
                        name: 'Chrome',
                        y: 12.8,
                        sliced: true,
                        selected: true
                    },
                    ['Safari',    8.5],
                    ['Opera',     6.2],
                    ['Others',   0.7]
                ]
            }]
        });
    });
</script>
</head>

<body>
    <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</body>
</html>

But How could I put both together. I tried searching for samples but no help. Kindly someone help.

回答1:

using %angular should be the easiest.

One prerequisite is the highcharts.js should be loaded into the page.

It could loaded in the notebook with jQuery

It could be loaded by simple modification in Zeppelin

git clone https://github.com/apache/zeppelin.git
cd zeppelin
mvn clean package -DskipTests

cd zeppelin-web
bower install highcharts -S
mvn clean package -DskipTests

Though it is very straight forward to using %angular to create a static chart. While there is a gap to convert from Spark model to Highcharts.

So I create a project try to fill this gap. spark-highcharts can be used in Zeppelin, spark-shell, or other spark application.

%spark
import com.knockdata.spark.highcharts._
import com.knockdata.spark.highcharts.model._

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

And got a chart

回答2:

Zeppelin also supports pluggable packages at run-time through the Helium framework. There are a handful of highcharts charts with published packages.

来源：https://stackoverflow.com/questions/37209276/apache-zeppelin-highcharts

标签

Highcharts

apache-zeppelin