Apache Zeppelin 0.10.0 Documentation: Transformations in Zeppelin Visualization

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Apache Zeppelin 0.10.0 Documentation: Transformations in Zeppelin Visualization</title> <meta name="description" content="Description for Transformations"> <meta name="author" content="The Apache Software Foundation">  <meta name="viewport" content="width=device-width, initial-scale=1.0">   <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">  <link href="/docs/0.10.0/assets/themes/zeppelin/bootstrap/css/bootstrap.css" rel="stylesheet"> <link href="/docs/0.10.0/assets/themes/zeppelin/css/style.css?body=1" rel="stylesheet" type="text/css"> <link href="/docs/0.10.0/assets/themes/zeppelin/css/syntax.css" rel="stylesheet" type="text/css" media="screen" />    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script> <script src="/docs/0.10.0/assets/themes/zeppelin/bootstrap/js/bootstrap.min.js"></script> <script src="/docs/0.10.0/assets/themes/zeppelin/js/docs.js"></script> <script src="/docs/0.10.0/assets/themes/zeppelin/js/anchor.min.js"></script> <script src="/docs/0.10.0/assets/themes/zeppelin/js/toc.js"></script> <script src="/docs/0.10.0/assets/themes/zeppelin/js/lunr.min.js"></script> <script src="/docs/0.10.0/assets/themes/zeppelin/js/search.js"></script>  <link href="/docs/0.10.0/atom.xml" type="application/atom+xml" rel="alternate" title="Sitewide ATOM Feed"> <link href="/docs/0.10.0/rss.xml" type="application/rss+xml" rel="alternate" title="Sitewide RSS Feed"> </head> <body> <div id="menu" class="navbar navbar-inverse navbar-fixed-top" role="navigation"> <div class="container navbar-container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> Toggle navigation </button> <div class="navbar-brand"> <a class="navbar-brand-main" href="http://zeppelin.apache.org"> <img src="/docs/0.10.0/assets/themes/zeppelin/img/zeppelin_logo.png" width="50" style="margin-top: -2px;" alt="I'm zeppelin"> Zeppelin <a class="navbar-brand-version" href="/docs/0.10.0" style="font-size: 15px; color: white;"> 0.10.0 </a> </a> </div> </div> <nav class="navbar-collapse collapse" role="navigation"> <ul class="nav navbar-nav"> <li> <a href="#" data-toggle="dropdown" class="dropdown-toggle">Quick Start </a> <ul class="dropdown-menu"> <li class="title">Getting Started</li> <li><a href="/docs/0.10.0/quickstart/install.html">Install</a></li> <li><a href="/docs/0.10.0/quickstart/explore_ui.html">Explore UI</a></li> <li><a href="/docs/0.10.0/quickstart/tutorial.html">Tutorial</a></li> <li role="separator" class="divider"></li> <li class="title">Run Mode</li> <li><a href="/docs/0.10.0/quickstart/kubernetes.html">Kubernetes</a></li> <li><a href="/docs/0.10.0/quickstart/docker.html">Docker</a></li> <li><a href="/docs/0.10.0/quickstart/yarn.html">Yarn</a></li> <li role="separator" class="divider"></li> <li><a href="/docs/0.10.0/quickstart/spark_with_zeppelin.html">Spark with Zeppelin</a></li> <li><a href="/docs/0.10.0/quickstart/flink_with_zeppelin.html">Flink with Zeppelin</a></li> <li><a href="/docs/0.10.0/quickstart/sql_with_zeppelin.html">SQL with Zeppelin</a></li> <li><a href="/docs/0.10.0/quickstart/python_with_zeppelin.html">Python with Zeppelin</a></li> <li><a href="/docs/0.10.0/quickstart/r_with_zeppelin.html">R with Zeppelin</a></li> </ul> </li> <li> <a href="#" data-toggle="dropdown" class="dropdown-toggle">Usage</a> <ul class="dropdown-menu scrollable-menu"> <li class="title">Dynamic Form</li> <li><a href="/docs/0.10.0/usage/dynamic_form/intro.html">What is Dynamic Form?</a></li> <li role="separator" class="divider"></li> <li class="title">Display System</li> <li><a href="/docs/0.10.0/usage/display_system/basic.html#text">Text Display</a></li> <li><a href="/docs/0.10.0/usage/display_system/basic.html#html">HTML Display</a></li> <li><a href="/docs/0.10.0/usage/display_system/basic.html#table">Table Display</a></li> <li><a href="/docs/0.10.0/usage/display_system/basic.html#network">Network Display</a></li> <li><a href="/docs/0.10.0/usage/display_system/angular_backend.html">Angular Display using Backend API</a></li> <li><a href="/docs/0.10.0/usage/display_system/angular_frontend.html">Angular Display using Frontend API</a></li> <li role="separator" class="divider"></li> <li class="title">Interpreter</li> <li><a href="/docs/0.10.0/usage/interpreter/overview.html">Overview</a></li> <li><a href="/docs/0.10.0/usage/interpreter/interpreter_binding_mode.html">Interpreter Binding Mode</a></li> <li><a href="/docs/0.10.0/usage/interpreter/user_impersonation.html">User Impersonation</a></li> <li><a href="/docs/0.10.0/usage/interpreter/dependency_management.html">Dependency Management</a></li> <li><a href="/docs/0.10.0/usage/interpreter/installation.html">Installing Interpreters</a></li>  <li><a href="/docs/0.10.0/usage/interpreter/execution_hooks.html">Execution Hooks (Experimental)</a></li> <li role="separator" class="divider"></li> <li class="title">Other Features</li> <li><a href="/docs/0.10.0/usage/other_features/publishing_paragraphs.html">Publishing Paragraphs</a></li> <li><a href="/docs/0.10.0/usage/other_features/personalized_mode.html">Personalized Mode</a></li> <li><a href="/docs/0.10.0/usage/other_features/customizing_homepage.html">Customizing Zeppelin Homepage</a></li> <li><a href="/docs/0.10.0/usage/other_features/notebook_actions.html">Notebook Actions</a></li> <li><a href="/docs/0.10.0/usage/other_features/cron_scheduler.html">Cron Scheduler</a></li> <li><a href="/docs/0.10.0/usage/other_features/zeppelin_context.html">Zeppelin Context</a></li> <li role="separator" class="divider"></li> <li class="title">REST API</li> <li><a href="/docs/0.10.0/usage/rest_api/interpreter.html">Interpreter API</a></li> <li><a href="/docs/0.10.0/usage/rest_api/zeppelin_server.html">Zeppelin Server API</a></li> <li><a href="/docs/0.10.0/usage/rest_api/notebook.html">Notebook API</a></li> <li><a href="/docs/0.10.0/usage/rest_api/notebook_repository.html">Notebook Repository API</a></li> <li><a href="/docs/0.10.0/usage/rest_api/configuration.html">Configuration API</a></li> <li><a href="/docs/0.10.0/usage/rest_api/credential.html">Credential API</a></li> <li><a href="/docs/0.10.0/usage/rest_api/helium.html">Helium API</a></li> <li class="title">Zeppelin SDK</li> <li><a href="/docs/0.10.0/usage/zeppelin_sdk/client_api.html">Client API</a></li> <li><a href="/docs/0.10.0/usage/zeppelin_sdk/session_api.html">Session API</a></li> </ul> </li> <li> <a href="#" data-toggle="dropdown" class="dropdown-toggle">Setup</a> <ul class="dropdown-menu scrollable-menu"> <li class="title">Basics</li> <li><a href="/docs/0.10.0/setup/basics/how_to_build.html">How to Build Zeppelin</a></li> <li><a href="/docs/0.10.0/setup/basics/hadoop_integration.html">Hadoop Integration</a></li> <li><a href="/docs/0.10.0/setup/basics/multi_user_support.html">Multi-user Support</a></li> <li role="separator" class="divider"></li> <li class="title">Deployment</li>  <li><a href="/docs/0.10.0/setup/deployment/spark_cluster_mode.html#spark-standalone-mode">Spark Cluster Mode: Standalone</a></li> <li><a href="/docs/0.10.0/setup/deployment/spark_cluster_mode.html#spark-on-yarn-mode">Spark Cluster Mode: YARN</a></li> <li><a href="/docs/0.10.0/setup/deployment/spark_cluster_mode.html#spark-on-mesos-mode">Spark Cluster Mode: Mesos</a></li> <li><a href="/docs/0.10.0/setup/deployment/flink_and_spark_cluster.html">Zeppelin with Flink, Spark Cluster</a></li> <li><a href="/docs/0.10.0/setup/deployment/cdh.html">Zeppelin on CDH</a></li> <li><a href="/docs/0.10.0/setup/deployment/virtual_machine.html">Zeppelin on VM: Vagrant</a></li> <li role="separator" class="divider"></li> <li class="title">Security</li> <li><a href="/docs/0.10.0/setup/security/authentication_nginx.html">HTTP Basic Auth using NGINX</a></li> <li><a href="/docs/0.10.0/setup/security/shiro_authentication.html">Shiro Authentication</a></li> <li><a href="/docs/0.10.0/setup/security/notebook_authorization.html">Notebook Authorization</a></li> <li><a href="/docs/0.10.0/setup/security/datasource_authorization.html">Data Source Authorization</a></li> <li><a href="/docs/0.10.0/setup/security/http_security_headers.html">HTTP Security Headers</a></li> <li role="separator" class="divider"></li> <li class="title">Notebook Storage</li> <li><a href="/docs/0.10.0/setup/storage/storage.html#notebook-storage-in-local-git-repository">Git Storage</a></li> <li><a href="/docs/0.10.0/setup/storage/storage.html#notebook-storage-in-s3">S3 Storage</a></li> <li><a href="/docs/0.10.0/setup/storage/storage.html#notebook-storage-in-azure">Azure Storage</a></li> <li><a href="/docs/0.10.0/setup/storage/storage.html#notebook-storage-in-oss">OSS Storage</a></li> <li><a href="/docs/0.10.0/setup/storage/storage.html#notebook-storage-in-zeppelinhub">ZeppelinHub Storage</a></li> <li><a href="/docs/0.10.0/setup/storage/storage.html#notebook-storage-in-mongodb">MongoDB Storage</a></li> <li role="separator" class="divider"></li> <li class="title">Operation</li> <li><a href="/docs/0.10.0/setup/operation/configuration.html">Configuration</a></li> <li><a href="/docs/0.10.0/setup/operation/proxy_setting.html">Proxy Setting</a></li> <li><a href="/docs/0.10.0/setup/operation/upgrading.html">Upgrading</a></li> <li><a href="/docs/0.10.0/setup/operation/trouble_shooting.html">Trouble Shooting</a></li> </ul> </li> <li> <a href="#" data-toggle="dropdown" class="dropdown-toggle">Interpreter </a> <ul class="dropdown-menu scrollable-menu"> <li class="title">Interpreters</li> <li><a href="/docs/0.10.0/usage/interpreter/overview.html">Overview</a></li> <li role="separator" class="divider"></li> <li><a href="/docs/0.10.0/interpreter/spark.html">Spark</a></li> <li><a href="/docs/0.10.0/interpreter/flink.html">Flink</a></li> <li><a href="/docs/0.10.0/interpreter/jdbc.html">JDBC</a></li> <li><a href="/docs/0.10.0/interpreter/python.html">Python</a></li> <li><a href="/docs/0.10.0/interpreter/r.html">R</a></li> <li role="separator" class="divider"></li> <li><a href="/docs/0.10.0/interpreter/alluxio.html">Alluxio</a></li> <li><a href="/docs/0.10.0/interpreter/beam.html">Beam</a></li> <li><a href="/docs/0.10.0/interpreter/bigquery.html">BigQuery</a></li> <li><a href="/docs/0.10.0/interpreter/cassandra.html">Cassandra</a></li> <li><a href="/docs/0.10.0/interpreter/elasticsearch.html">Elasticsearch</a></li> <li><a href="/docs/0.10.0/interpreter/geode.html">Geode</a></li> <li><a href="/docs/0.10.0/interpreter/groovy.html">Groovy</a></li> <li><a href="/docs/0.10.0/interpreter/hazelcastjet.html">Hazelcast Jet</a></li> <li><a href="/docs/0.10.0/interpreter/hbase.html">HBase</a></li> <li><a href="/docs/0.10.0/interpreter/hdfs.html">HDFS</a></li> <li><a href="/docs/0.10.0/interpreter/hive.html">Hive</a></li> <li><a href="/docs/0.10.0/interpreter/ignite.html">Ignite</a></li> <li><a href="/docs/0.10.0/interpreter/influxdb.html">influxDB</a></li> <li><a href="/docs/0.10.0/interpreter/java.html">Java</a></li> <li><a href="/docs/0.10.0/interpreter/jupyter.html">Jupyter</a></li> <li><a href="/docs/0.10.0/interpreter/kotlin.html">Kotlin</a></li> <li><a href="/docs/0.10.0/interpreter/ksql.html">KSQL</a></li> <li><a href="/docs/0.10.0/interpreter/kylin.html">Kylin</a></li> <li><a href="/docs/0.10.0/interpreter/lens.html">Lens</a></li> <li><a href="/docs/0.10.0/interpreter/livy.html">Livy</a></li> <li><a href="/docs/0.10.0/interpreter/mahout.html">Mahout</a></li> <li><a href="/docs/0.10.0/interpreter/markdown.html">Markdown</a></li> <li><a href="/docs/0.10.0/interpreter/mongodb.html">MongoDB</a></li> <li><a href="/docs/0.10.0/interpreter/neo4j.html">Neo4j</a></li> <li><a href="/docs/0.10.0/interpreter/pig.html">Pig</a></li> <li><a href="/docs/0.10.0/interpreter/postgresql.html">Postgresql, HAWQ</a></li> <li><a href="/docs/0.10.0/interpreter/sap.html">SAP</a></li> <li><a href="/docs/0.10.0/interpreter/scalding.html">Scalding</a></li> <li><a href="/docs/0.10.0/interpreter/scio.html">Scio</a></li> <li><a href="/docs/0.10.0/interpreter/shell.html">Shell</a></li> <li><a href="/docs/0.10.0/interpreter/sparql.html">Sparql</a></li> <li><a href="/docs/0.10.0/interpreter/submarine.html">Submarine</a></li> </ul> </li> <li> <a href="#" data-toggle="dropdown" class="dropdown-toggle">More</a> <ul class="dropdown-menu scrollable-menu" style="right: 0; left: auto;"> <li class="title">Extending Zeppelin</li> <li><a href="/docs/0.10.0/development/writing_zeppelin_interpreter.html">Writing Zeppelin Interpreter</a></li> <li role="separator" class="divider"></li> <li class="title">Helium (Experimental)</li> <li><a href="/docs/0.10.0/development/helium/overview.html">Overview</a></li> <li><a href="/docs/0.10.0/development/helium/writing_application.html">Writing Helium Application</a></li> <li><a href="/docs/0.10.0/development/helium/writing_spell.html">Writing Helium Spell</a></li> <li><a href="/docs/0.10.0/development/helium/writing_visualization_basic.html">Writing Helium Visualization: Basics</a></li> <li><a href="/docs/0.10.0/development/helium/writing_visualization_transformation.html">Writing Helium Visualization: Transformation</a></li> <li role="separator" class="divider"></li> <li class="title">Contributing to Zeppelin</li> <li><a href="/docs/0.10.0/setup/basics/how_to_build.html">How to Build Zeppelin</a></li> <li><a href="/docs/0.10.0/development/contribution/useful_developer_tools.html">Useful Developer Tools</a></li> <li><a href="/docs/0.10.0/development/contribution/how_to_contribute_code.html">How to Contribute (code)</a></li> <li><a href="/docs/0.10.0/development/contribution/how_to_contribute_website.html">How to Contribute (website)</a></li> <li role="separator" class="divider"></li> <li class="title">External Resources</li> <li><a target="_blank" href="https://zeppelin.apache.org/community.html">Mailing List</a></li> <li><a target="_blank" href="https://cwiki.apache.org/confluence/display/ZEPPELIN/Zeppelin+Home">Apache Zeppelin Wiki</a></li> <li><a target="_blank" href="http://stackoverflow.com/questions/tagged/apache-zeppelin">Stackoverflow Questions about Zeppelin</a></li> </ul> </li> <li> <a href="/docs/0.10.0/search.html" class="nav-search-link"> </a> </li> </ul> </nav> </div> </div> <div class="content">  <div class="row"> <div class="col-md-12">  <h1>Transformations for Zeppelin Visualization</h1> <div id="toc"></div> <h2>Overview</h2> Transformations <ul> <li>renders setting which allows users to set columns and </li> <li>transforms table rows according to the configured columns.</li> </ul> Zeppelin provides 4 types of transformations. <h2>1. PassthroughTransformation</h2> <code>PassthroughTransformation</code> is the simple transformation which does not convert original tabledata at all. See <a href="https://github.com/apache/zeppelin/blob/master/zeppelin-web/src/app/tabledata/passthrough.js">passthrough.js</a> <h2>2. ColumnselectorTransformation</h2> <code>ColumnselectorTransformation</code> is uses when you need <code>N</code> axes but do not need aggregation. See <a href="https://github.com/apache/zeppelin/blob/master/zeppelin-web/src/app/tabledata/columnselector.js">columnselector.js</a> <h2>3. PivotTransformation</h2> <code>PivotTransformation</code> provides group by and aggregation. Every chart using <code>PivotTransformation</code> has 3 axes. <code>Keys</code>, <code>Groups</code> and <code>Values</code>. See <a href="https://github.com/apache/zeppelin/blob/master/zeppelin-web/src/app/tabledata/pivot.js">pivot.js</a> <h2>4. AdvancedTransformation</h2> <code>AdvancedTransformation</code> has more detailed options while providing existing features of <code>PivotTransformation</code> and <code>ColumnselectorTransformation</code> <ul> <li>multiple sub charts</li> <li>configurable chart axes</li> <li>parameter widgets: <code>input</code>, <code>checkbox</code>, <code>option</code>, <code>textarea</code></li> <li>parsing parameters automatically based on their types</li> <li>expand / fold axis and parameter panels</li> <li>multiple transformation methods while supporting lazy converting </li> <li>re-initialize the whole configuration based on spec hash.</li> </ul> <h3>Spec</h3> <code>AdvancedTransformation</code> requires <code>spec</code> which includes axis and parameter details for charts. Let's create 2 sub-charts called <code>line</code> and <code>no-group</code>. Each sub chart can have different axis and parameter depending on their requirements. <div class="highlight"><pre><code class="js language-js" data-lang="js">class AwesomeVisualization extends Visualization { constructor(targetEl, config) { super(targetEl, config) const spec = { charts: { 'line': { transform: { method: 'object', }, sharedAxis: false, /** set if you want to share axes between sub charts, default is `false` */ axis: { 'xAxis': { dimension: 'multiple', axisType: 'key', description: 'serial', }, 'yAxis': { dimension: 'multiple', axisType: 'aggregator', description: 'serial', }, 'category': { dimension: 'multiple', axisType: 'group', description: 'categorical', }, }, parameter: { 'xAxisUnit': { valueType: 'string', defaultValue: '', description: 'unit of xAxis', }, 'yAxisUnit': { valueType: 'string', defaultValue: '', description: 'unit of yAxis', }, 'lineWidth': { valueType: 'int', defaultValue: 0, description: 'width of line', }, }, }, 'no-group': { transform: { method: 'object', }, sharedAxis: false, axis: { 'xAxis': { dimension: 'single', axisType: 'key', }, 'yAxis': { dimension: 'multiple', axisType: 'value', }, }, parameter: { 'xAxisUnit': { valueType: 'string', defaultValue: '', description: 'unit of xAxis', }, 'yAxisUnit': { valueType: 'string', defaultValue: '', description: 'unit of yAxis', }, }, }, } this.transformation = new AdvancedTransformation(config, spec) } ... // `render` will be called whenever `axis` or `parameter` is changed render(data) { const { chart, parameter, column, transformer, } = data if (chart === 'line') { const transformed = transformer() // draw line chart } else if (chart === 'no-group') { const transformed = transformer() // draw no-group chart } } } </code></pre></div> <h3>Spec: <code>axis</code></h3> <table><thead> <tr> <th>Field Name</th> <th>Available Values (type)</th> <th>Description</th> </tr> </thead><tbody> <tr> <td><code>dimension</code></td> <td><code>single</code></td> <td>Axis can contains only 1 column</td> </tr> <tr> <td><code>dimension</code></td> <td><code>multiple</code></td> <td>Axis can contains multiple columns</td> </tr> <tr> <td><code>axisType</code></td> <td><code>key</code></td> <td>Column(s) in this axis will be used as <code>key</code> like in <code>PivotTransformation</code>. These columns will be served in <code>column.key</code></td> </tr> <tr> <td><code>axisType</code></td> <td><code>aggregator</code></td> <td>Column(s) in this axis will be used as <code>value</code> like in <code>PivotTransformation</code>. These columns will be served in <code>column.aggregator</code></td> </tr> <tr> <td><code>axisType</code></td> <td><code>group</code></td> <td>Column(s) in this axis will be used as <code>group</code> like in <code>PivotTransformation</code>. These columns will be served in <code>column.group</code></td> </tr> <tr> <td><code>axisType</code></td> <td>(string)</td> <td>Any string value can be used here. These columns will be served in <code>column.custom</code></td> </tr> <tr> <td><code>maxAxisCount</code> (optional)</td> <td>(int)</td> <td>The max number of columns that this axis can contain. (unlimited if <code>undefined</code>)</td> </tr> <tr> <td><code>minAxisCount</code> (optional)</td> <td>(int)</td> <td>The min number of columns that this axis should contain to draw chart. (<code>1</code> in case of single dimension)</td> </tr> <tr> <td><code>description</code> (optional)</td> <td>(string)</td> <td>Description for the axis.</td> </tr> </tbody></table> Here is an example. <div class="highlight"><pre><code class="js language-js" data-lang="js">axis: { 'xAxis': { dimension: 'multiple', axisType: 'key', }, 'yAxis': { dimension: 'multiple', axisType: 'aggregator'}, 'category': { dimension: 'multiple', axisType: 'group', maxAxisCount: 2, valueType: 'string', }, }, </code></pre></div> <h3>Spec: <code>sharedAxis</code></h3> If you set <code>sharedAxis: false</code> for sub charts, then their axes are persisted in global space (shared). It's useful for when you creating multiple sub charts sharing their axes but have different parameters. For example, <ul> <li><code>basic-column</code>, <code>stacked-column</code>, <code>percent-column</code></li> <li><code>pie</code> and <code>donut</code></li> </ul> Here is an example. <div class="highlight"><pre><code class="js language-js" data-lang="js"> const spec = { charts: { 'column': { transform: { method: 'array', }, sharedAxis: true, axis: { ... }, parameter: { ... }, }, 'stacked': { transform: { method: 'array', }, sharedAxis: true, axis: { ... } parameter: { ... }, }, </code></pre></div> <h3>Spec: <code>parameter</code></h3> <table><thead> <tr> <th>Field Name</th> <th>Available Values (type)</th> <th>Description</th> </tr> </thead><tbody> <tr> <td><code>valueType</code></td> <td><code>string</code></td> <td>Parameter which has string value</td> </tr> <tr> <td><code>valueType</code></td> <td><code>int</code></td> <td>Parameter which has int value</td> </tr> <tr> <td><code>valueType</code></td> <td><code>float</code></td> <td>Parameter which has float value</td> </tr> <tr> <td><code>valueType</code></td> <td><code>boolean</code></td> <td>Parameter which has boolean value used with <code>checkbox</code> widget usually</td> </tr> <tr> <td><code>valueType</code></td> <td><code>JSON</code></td> <td>Parameter which has JSON value used with <code>textarea</code> widget usually. <code>defaultValue</code> should be <code>""</code> (empty string). This</td> </tr> <tr> <td><code>description</code></td> <td>(string)</td> <td>Description of this parameter. This value will be parsed as HTML for pretty output</td> </tr> <tr> <td><code>widget</code></td> <td><code>input</code></td> <td>Use <a href="https://developer.mozilla.org/en/docs/Web/HTML/Element/input">input</a> widget. This is the default widget (if <code>widget</code> is undefined)</td> </tr> <tr> <td><code>widget</code></td> <td><code>checkbox</code></td> <td>Use <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox">checkbox</a> widget.</td> </tr> <tr> <td><code>widget</code></td> <td><code>textarea</code></td> <td>Use <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea">textarea</a> widget.</td> </tr> <tr> <td><code>widget</code></td> <td><code>option</code></td> <td>Use <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select">select + option</a> widget. This parameter should have <code>optionValues</code> field as well.</td> </tr> <tr> <td><code>optionValues</code></td> <td>(Array<string>)</td> <td>Available option values used with the <code>option</code> widget</td> </tr> </tbody></table> Here is an example. <div class="highlight"><pre><code class="js language-js" data-lang="js">parameter: { // string type, input widget 'xAxisUnit': { valueType: 'string', defaultValue: '', description: 'unit of xAxis', }, // boolean type, checkbox widget 'inverted': { widget: 'checkbox', valueType: 'boolean', defaultValue: false, description: 'invert x and y axes', }, // string type, option widget with `optionValues` 'graphType': { widget: 'option', valueType: 'string', defaultValue: 'line', description: 'graph type', optionValues: [ 'line', 'smoothedLine', 'step', ], }, // HTML in `description` 'dateFormat': { valueType: 'string', defaultValue: '', description: 'format of date (<a href="https://docs.amcharts.com/3/javascriptcharts/AmGraph#dateFormat">doc</a>) (e.g YYYY-MM-DD)', }, // JSON type, textarea widget 'yAxisGuides': { widget: 'textarea', valueType: 'JSON', defaultValue: '', description: 'guides of yAxis ', }, </code></pre></div> <h3>Spec: <code>transform</code></h3> <table><thead> <tr> <th>Field Name</th> <th>Available Values (type)</th> <th>Description</th> </tr> </thead><tbody> <tr> <td><code>method</code></td> <td><code>object</code></td> <td>designed for rows requiring object manipulation</td> </tr> <tr> <td><code>method</code></td> <td><code>array</code></td> <td>designed for rows requiring array manipulation</td> </tr> <tr> <td><code>method</code></td> <td><code>array:2-key</code></td> <td>designed for xyz charts (e.g bubble chart)</td> </tr> <tr> <td><code>method</code></td> <td><code>drill-down</code></td> <td>designed for drill-down charts</td> </tr> <tr> <td><code>method</code></td> <td><code>raw</code></td> <td>will return the original <code>tableData.rows</code></td> </tr> </tbody></table> Whatever you specified as <code>transform.method</code>, the <code>transformer</code> value will be always function for lazy computation. <div class="highlight"><pre><code class="js language-js" data-lang="js">// advanced-transformation.util#getTransformer if (transformSpec.method === 'raw') { transformer = () => { return rows; } } else if (transformSpec.method === 'array') { transformer = () => { ... return { ... } } } </code></pre></div> Here is actual usage. <div class="highlight"><pre><code class="js language-js" data-lang="js">class AwesomeVisualization extends Visualization { constructor(...) { /** setup your spec */ } ... // `render` will be called whenever `axis` or `parameter` are changed render(data) { const { chart, parameter, column, transformer, } = data if (chart === 'line') { const transformed = transformer() // draw line chart } else if (chart === 'no-group') { const transformed = transformer() // draw no-group chart } } ... } </code></pre></div> </div> </div> <hr> <footer>  </footer> </div> <script type="text/javascript"> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-45176241-5', 'zeppelin.apache.org'); ga('require', 'linkid', 'linkid.js'); ga('send', 'pageview'); </script> </body> </html>

CINXE.COM

Apache Zeppelin 0.10.0 Documentation: Transformations in Zeppelin Visualization