saiku+kettle整合（十四）saiku embed framework-优快云博客

本文介绍如何使用SaikuEmbedFramework实现Saiku与外部应用的深度整合，包括参数传递及图表展示等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

title: saiku+kettle整合（十四）saiku embed framework tags:

olap categories: saiku date: 2016-08-25 18:18:54

saiku embed framework

Saiku can be embedded in a number of ways. Because of its restful nature, the server can be completely decoupled and used as a standalone service. If you just need Analytics in your webapp, then you have two choices.

IFrame Embedding

You can embed the Saiku UI within an IFrame and default to either a Table or Chart view. This is good when simple embedding within a wiki or webpage is required and no interaction between application and report is required. You could also change the CSS on the saiku server to mimic the target webpage so they look similar.

Saiku Embed Framework

Saiku Embed Framework is ideal for use cases when you require deeper embedding and interaction between source and target. For example you might want to create an application in which is passes parameters to Saiku reports to render the output, to do this Saiku Embed Framework is ideal.

通过js直接获取远程图片或者数据

修改代码太多，就不贴diff了 https://github.com/qixiaobo/saiku-self/commit/b72b5424e893638b8c911d513833211eb76bfd2c

    <!DOCTYPE html>
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
            <title>Saiku Embedded - Next Generation Open Source Analytics in your App!</title>
            <link rel="shortcut icon" href="favicon.ico">
     
            <style>
            body {
                background: none repeat scroll 0 0 #FFFFFF;
                color: #222222;
                font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;
                font-size: 68.75%;
            }
            </style>
     
        </head>
        <body>
     
            <!--  jQuery 1.7.2 , jQuery UI 1.8.14-->
            <script src="../js/jquery/jquery.min.js" type="text/javascript"></script>
            <script src="../js/jquery/jquery-ui.min.js" type="text/javascript"></script>
     
            <!-- BACKBONE -->
            <script type="text/javascript" src="../js/backbone/underscore.js"></script>
            <script type="text/javascript" src="../js/backbone/json2.js"></script>
            <script type="text/javascript" src="../js/backbone/backbone.js"></script>
     
            <!-- CCC2 -->
            <script type="text/javascript" src="../js/saiku/plugins/CCC_Chart/def.js"></script>
            <script type="text/javascript" src="../js/saiku/plugins/CCC_Chart/protovis.js"></script>
            <script type="text/javascript" src="../js/saiku/plugins/CCC_Chart/protovis-msie.js"></script>
            <script type="text/javascript" src="../js/saiku/plugins/CCC_Chart/cdo.js"></script>
            <script type="text/javascript" src="../js/saiku/plugins/CCC_Chart/pvc.js"></script>
            <script type="text/javascript" src="../js/saiku/plugins/CCC_Chart/jquery.tipsy.js"></script>
            <script type="text/javascript" src="../js/saiku/plugins/CCC_Chart/tipsy.js"></script>
            <link type="text/css" href="../js/saiku/plugins/CCC_Chart/tipsy.css" rel="stylesheet"/>
     
            <!-- SAIKU EMBEDDED LIBRARIES -->
            <!-- <link rel="stylesheet" href="../css/saiku/src/saiku.table.css" type="text/css"> -->
            <link rel="stylesheet" href="saiku.css" type="text/css">
            <script type="text/javascript" src="../js/saiku/render/SaikuRenderer.js"></script>
            <script type="text/javascript" src="../js/saiku/render/SaikuTableRenderer.js"></script>
            <script type="text/javascript" src="../js/saiku/render/SaikuChartRenderer.js"></script>
            <script type="text/javascript" src="../js/saiku/embed/SaikuEmbed.js"></script>
     
            <div id='saiku' class='workspace_results' style="height:600px;float:left;">
            </div>
     
            <div id='saiku2' class='workspace_results' style="height:600px;float:left;">
            </div>
     
     
    <script type="text/javascript">
     
    var myClient = new SaikuClient({
        server: "",
        path: "/rest/saiku/embed",
        user: "admin",
        password: "admin"
    });
     
    myClient.execute({
       file: "/homes/aaa.saiku",
       htmlObject: "#saiku",
       render: "table",
       params: {
          family: "testparameter"
       }
    });
    myClient.execute({
       file: "/homes/bbb.saiku",
       htmlObject: "#saiku2",
       render: "chart",
       mode: "line",
       chartDefinition: {
          width: 900,
          colors: ['grey','red','blue'],
          extensionPoints: {
             xAxisLabel_textAngle: - Math.PI/3,
             panel_fillStyle: "#EAEAEA"
          }
       },
       zoom: true
    });
     
     
    </script>
        </body>
    </html>
复制代码

https://github.com/qixiaobo/saiku-self