Footer 1

logo

198 West 21th Street, Suite 721, New York NY

5109 Pacific Coast Highway, Los Angeles CA

Email: youremail@yourdomain.com

Phone: +88 (0) 101 0000 000

Fax: +88 (0) 202 0000 001

Top Bar Siga-nos ícones

Últimos Artigos

    Não foram encontrados artigos.

 

Características HTML/Javascript

Características HTML/Javascript

Siga estas etapas para integrar análises e consultas criadas nos seus próprios sites/aplicações, juntamente com os recursos interativos Unique Dashboard.

Incluir pré-requisitos JavaScript/CSS no seu ambiente

01Primeiro requisito é copiar/colar arquivo de integração Javascript/CSS no seu ambiente (site).
Pré-requisitos estão localizados na pasta de instalação Javascripts / Kyubit
(Normalmente, C: \ Program Files \ Kyubit \ BusinessIntelligence \ Javascripts \ Integration)

 

02Inclua libraries de javascript ‘JQuery’, ‘KineticJS’ e ‘JVectormap’, somente se ainda não estiver a usar no seu site.

 

03A libraries javascript ‘JVectorMap’ deve ser incluída, somente se você usar ‘Geo Maps’ dentro da sua integração

Exemplo em como arquivos incluídos podem aparecer no seu código HTML:

<script type="text/javascript" src="/Javascripts/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="/Javascripts/kinetic.min.js"></script>

<script type="text/javascript" src="/Javascripts/jquery-jvectormap-2.0.3.min.js"></script>
<link rel="stylesheet" type="text/css" href="/Style/jquery-jvectormap-2.0.3.css" />

<script type="text/javascript" src="/Javascripts/Integration/UniqueDashboardDataVisualization.js"></script>
<script type="text/javascript" src="/Javascripts/Integration/UniqueDashboardConfig.js"></script>
<link rel="stylesheet" type="text/css" href="/Javascripts/Integration/UniqueDashboardIntegration.css" />

Configurar o arquivo 'Config' de integração (KyubitConfig.js)

Edite o arquivo de configuração para definir atributos partilhados comuns de visualizações integradas no seu site:

01Definir URL de aplicação Unique Dashboard no seu ambiente.

 

02Editar fontes e atributos de aparência comum.

 

03Editar paletas de cor usadas em visualizações integradas.

 

04Edite ‘Ícones’ usados ​​em visualizações integradas.

 

05. Se necessário, editar frases usadas por visualizações integradas para melhor atender às suas necessidades ou para fins multilingues.

$kyu.globalConfig =
{
    URL: "http://YourUniqueDashboardSiteURL/",
    font: "Calibri",
    fontColor: "#333333",
    fontSize: "14px",
    titleFontSize: "24px",
    chartFontColor: "#333333",
    chartFontSize: "12px",
    mainColor: "Red",

    ...
}

Configurar atributos base para visualização única

Decidir que elemento ‘DIV’ HTML será usado para visualização e definir atributos base dentro da função $ kyu.initVisualization, que deve ser chamado dentro da função document.ready JQuery:

01Definir analysisId ou queryId para análise existente ou consulte na versão Unique Dashboard Business Intelligence.

 

02Definir nome e descrição (opcional) para visualização integrada.

 

03Decidir qual o tipo de gráfico que será utilizado para a visualização

 

04Decidir quais as dimensões de visualização usando atributos de largura e altura.

 

05Se a visualização é baseada num conjunto GeoMap, que GeoMap você irá usar.

$(document).ready(function ()
{
    $kyu.initVisualization("testDiv", {
        analysisId: 2053,
        name: "My Visualization",
        description: "Data Visualization description text that will be displayed above visualization",
        chartType: "Column_Chart",
        geoMap: "world",
        width: "50%",
        height: "400px",
        ...

Configurar atributos opcionais para visualização única

Utilize outros atributos para adicionalmente alterar o comportamento e a aparência da visualização integrada, dependendo dos dados e da natureza da integração:

01Definir patela de cor, de paletas de cor existentes definidas no ficheiro “config”.

 

02Decidir mostrar ícone de análise para continuar a análise com atributo openAnalysisIcon.

 

03Decidir permitir ‘View Large’ da visualização com atributo allowLargeView.

 

04Posição da legenda (Topo/Direito/Nenhum).

 

05Mostrar ícone que irá abrir dashboard existente, usando atributo dashboardID.

 

06Definir RefreshTimeem minutos, que irá atualizar automaticamente os dados de visualização.

 

07. Para armazenar dados na aplicação Unique Dashboard e não recorrer às suas bases de dados a cada visualização integrada, defina os atributos CacheKey e cacheMinutes que irão manter os dados na memória no lado do servidor Unique Dashboard por determinado período de tempo.

 

08Configurar rótulos de valor para visualizações integradas.
Definir atributo rótulo de valor (All | None | Top1 | Top2 | Top3 | Top5 | Top10 | Last). Opcionalmente, defina os nomes de categorias ou séries que adicionalmente filtrarão os rótulos dos valores exibidos.

 

09Se a análise ou consulta de dados retornar mais valores do que está interessado, filtre e exiba valores através dos atributos specificCategories e specificSeries.

 

10. Para abrir nova página quando você clicar em determinado valor de visualização, defina atributo clickURL para URL de sua preferência. Nova página será aberta juntamente com os valores clicados dentro de URL querystring.

 

11Gráfico de linhas pode ser definido com valores máximos e mínimos com atributos minYOnChart e maxYOnChart.

 

12Gráfico de tabela aceita atributo tableDataBarpara exibir barras de valor.

 

13. Gráfico de combinação pode exibir comparação, análise ou consulta usando secondaryQueryAnalysisID, usando a linha ou gráfico de coluna (secondaryChart), e opcionalmente, exibindo comparação análise/consulta sobre um eixo Y separado (separateAxis). Se a comparação é a análise, use caracteres “#” antes id análise.

 

14Use gráfico pivot para mudar categorias e posições na visualização integrada.

 

15. Use atributo averageLine para mostrar a linha média de uma ou mais séries, separados pelo caracter ‘;’.

 

16. Use atributo Trendline para mostrar linha de tendência de uma ou mais séries, separados caracter ‘;’.

...

colorPallete: 0,
openAnalysisIcon: true,
allowLargeView: true,
legend: "Top",
dashboardID: 1,

refreshTime: 5,
cacheMinutes: 5,
cacheKey: "Key1",

valueLabels: "All",
valueLabelsFilterCategory: "California",
valueLabelsFilterSeries: "Accessories;Bikes",

specificCategories: "Canada;France;Germany",
specificSeries: "Accessories;Bikes",

clickURL: "http://www.rcrbusinessintelligence.com",

minYOnChart: 2000000,
maxYOnChart: 6000000,
tableDataBar: 1,
secondaryQueryAnalysisID: "#2055",
secondaryChart: "Line_Chart",
separateAxis: 1,

pivotChart: false,
averageLine: null,
trendLine: "Bikes"

...

Autenticação

Para aceder a análises ou consultas Unique Dashboard a partir de fonte de dados definida, é usado ‘Windows Integrated Authentication’. As credenciais de utilizador do browser são passadas para o IIS e para a aplicação Unique Dashboard e, novamente, para aceder a fontes de dados de análise ou consulta. Cada utilizador visualizará dados de fontes de dados com conjunto de permissões definido para ele ou para o grupo ao qual pertence. Esse cenário é automaticamente apropriado para ser usado quando a integração estiver na intranet, onde as credenciais do Windows são partilhadas entre a aplicação “Host” e a aplicação Unique Dashboard.

Se a integração for destinada a ser utilizada em sites públicos (Internet), a aplicação Unique Dashboard deverá ser publicamente exposta na Internet, a autenticação “Anónima” deverá ser definida para a versão Unique Dashboard utilizando uma conta de utilizador apropriada que represente o acesso público com as permissões apropriadas à base de dados. A qualquer momento você pode configurar a versão adicional da aplicação Unique Dashboard no IIS que é executado com a autenticação “Anônima” que estará ativa junto com a versão da aplicação original usando “Autenticação do Windows” ou “Autenticação de login”.

SAMPLES

Simple Pie Chart based on OLAP analysis, with Drill-Down features and value labels.

$(document).ready(function () {
    $kyu.initVisualization("analysisDiv", {
        name: "Bike Sales Analysis",
        analysisId: 2038,
        chartType: "Pie_Chart",
        width: "100%",
        height: "400px",
        valueLabels: "All"
    });
});

Column Chart based on OLAP analysis, with value labels only for Top 5 values, automatic Refresh Time and Caching set to 5 minutes. Data will be automatically refresh within 5 minutes, but in the meantime data will be cached and request will render chart from data in memory and not retrieve from data source.

$(document).ready(function () {
    $kyu.initVisualization("analysisDiv", {
        name: "Bike Sales Analysis",
        analysisId: 2038,
        chartType: "Column_Chart",
        width: "100%",
        height: "400px",
        colorPallete: 0,
        openAnalysisIcon: true,
        allowLargeView: true,
        valueLabels: "Top5",
        refreshTime: 5,
        cacheMinutes: 5,
        cacheKey: "BikeSales"
    });
});

Line Chart based on OLAP analysis, with value labels only for Top 3 values in ‘Female’ series.

function showDetails( productKey )
{
    $(document).ready(function () {
        $kyu.initVisualization("analysisDiv", {
            name: "Analysis",
            analysisId: 2042,
            chartType: "Line_Chart",
            width: "100%",
            height: "400px",
            openAnalysisIcon: true,
            allowLargeView: true,
            valueLabels: "Top3",
            valueLabelsFilterSeries: "Female"
        });
    });
}

Same Line Chart but this time with Trend and Average line for ‘Female’ series.

function showDetails( productKey )
{
    $(document).ready(function () {
        $kyu.initVisualization("analysisDiv", {
            name: "Analysis",
            analysisId: 2042,
            chartType: "Line_Chart",
            width: "100%",
            height: "500px",
            openAnalysisIcon: true,
            allowLargeView: true,
            trendLine: "Female",
            averageLine: "Female"
        });
    });
}
Zoom Line Chart, with definition for Min and Max value on the Y axis. Click URL ensures that click on the chart value will open new tab with URL and point data as parameter.
function showDetails(productKey) {
    $(document).ready(function () {
        $kyu.initVisualization("analysisDiv", {
            name: "Analysis",
            analysisId: 2042,
            chartType: "Line_Chart",
            width: "100%",
            height: "400px",
            openAnalysisIcon: true,
            allowLargeView: true,
            minYOnChart: 100000,
            maxYOnChart: 400000,
            clickURL: "http://www.rcrbusinessintelligence.com"
        });
    });
}
Bubble Chart, shows two measures at the same time. One measure is presented position of the bubble, other is presented with size of the bubble.
function showDetails( productKey )
{
    $(document).ready(function () {
        $kyu.initVisualization("analysisDiv", {
            name: "Analysis",
            analysisId: 24,
            chartType: "Bubble_Chart",
            width: "100%",
            height: "400px",
            openAnalysisIcon: true,
            allowLargeView: true
        });
    });
}
Geo Chart, display values across countries, states and counties, for whole world, particular continents or specific countries.
$(document).ready(function () {
    $kyu.initVisualization("analysisDiv", {
        name: "Geo Analysis",
        analysisId: 1,
        chartType: "Geo_Map",
        width: "100%",
        height: "400px",
        openAnalysisIcon: true,
        allowLargeView: true,
        valueLabels: "All",
        geoMap: "world"
    });
});
Table Chart displays data in any number of rows and column with slider (if necessary). This chart is based on SQL query results. Queries could MDX statements as well. Table data bar renders visual bar for all numeric values.
function showDetails( productKey )
{
    $(document).ready(function () {
        $kyu.initVisualization("analysisDiv", {
            name: "Query",
            queryId: 2020,
            chartType: "Table",
            width: "100%",
            height: "400px",
            allowLargeView: true,
            tableDataBar: 1
        });
    });
}
Gauge Meter displays metrics of the defined KPI value between ‘Success’ and ‘Fail’ status.
$(document).ready(function () {
    $kyu.initVisualization("kpiDiv", {
        name: "Gauge",
        kpiId: 3,
        chartType: "Gauge_Meter",
        width: "100%",
        height: "300px",
        openAnalysisIcon: true,
        allowLargeView: true
    });
}
KPI with current status icon, value, last change and line chart presenting KPI history data.
$(document).ready(function () {
    $kyu.initVisualization("analysisDiv", {
        name: "KPI",
        kpiId: 3,
        chartType: "KPI",
        width: "100%",
        height: "70px",
        openAnalysisIcon: true,
        allowLargeView: true
    });
}