Cognos Analytics

 View Only

Echarts/Echarts-gl Customs visualization 3D Scatter

  • 1.  Echarts/Echarts-gl Customs visualization 3D Scatter

    Posted Fri June 03, 2022 05:40 AM
      |   view attached
    Hello All,

    Has anyone has implemented echarts-gl library  with Cognos ?
    Has anyone tried to develop a 3D Scatter visualization like this one with Cognos Customvis tool  ?

    Examples - Apache ECharts  

    When i developped a chart Combining a line and a pie  (with only echarts which is available both in TS ans JS)  it was ok with an external link.

    But now i want to develop a scatter 3D and it needs a new library echarts-gl  (available only in JS)   and i don't see how to add/define it correctly.


    First test with npm echarts & echarts-gl installed :

    Main.ts

    import { RenderBase, UpdateInfo } from "@businessanalytics/customvis-lib";
    import * as echarts from 'echarts';
    import 'echarts-gl';
    export default class extends RenderBase
    {
        private _chart : any;
        protected create( _node: HTMLElement ): HTMLElement
        {
             _node.textContent = "Basic VizBundle";
             this._chart = echarts.init(_node);
             return _node;
        }
        protected update( _info: UpdateInfo ): void
        {
            const self = this;
            var option : any;
             var symbolSize = 2.5;
    ....


    Throw me this message when i want to test my visualization with customvis start :

    ReferenceError : process is not defined

    2nd test with external definition :

    Main.ts

    import { RenderBase, UpdateInfo } from "@businessanalytics/customvis-lib";
    import { init, use } from "https://cdn.jsdelivr.net/npm/echarts@5.3.2/dist/echarts.min.js"; // Loading ECharts library
    import {Grid3DComponent, Scatter3DChart}  from "https://cdn.jsdelivr.net/npm/echarts-gl@2.0.9/dist/echarts-gl.min.js";
    export default class extends RenderBase
    {
        private _chart : any;
        protected create( _node: HTMLElement ): HTMLElement
        {
            _node.textContent = "Basic VizBundle";
            use([Grid3DComponent]) ;
            use([Scatter3DChart]) ;    
            this._chart = init(_node);
            return _node;
        }

        protected update( _info: UpdateInfo ): void
        {
            const self = this;
            var option : any;
            var symbolSize = 2.5;
    ....


    Throw me this message when i want to test my visualization with customvis start :
    GET : http:// cognos server /bi/pat/echarts.js net::ERR_ABORTED 404 (Not Found)

    3rd test with external definition : 

    Mains.ts

    import { RenderBase, UpdateInfo } from "@businessanalytics/customvis-lib";
    import { init, use } from "https://cdn.jsdelivr.net/npm/echarts@5.3.2/dist/echarts.min.js"; // Loading ECharts library
    import {Grid3DComponent}  from "https://cdn.jsdelivr.net/npm/echarts-gl@2.0.9/components.min.js";
    import {Scatter3DChart} from "https://cdn.jsdelivr.net/npm/echarts-gl@2.0.9/charts.min.js";

    export default class extends RenderBase
    {
        private _chart : any;
        protected create( _node: HTMLElement ): HTMLElement
        {
            _node.textContent = "Basic VizBundle";
            use([Grid3DComponent]) ;
            use([Scatter3DChart]) ;    
            this._chart = init(_node);
            return _node;
        }

        protected update( _info: UpdateInfo ): void
        {
            const self = this;
            var option : any;
    .....

    Throw me this message when i want to test my visualization with customvis start  :

    Uncaught SyntaxError: Unexpected token 'export' (at components.min.js:7:1)      (  export * from './lib/export/components'; )
    Uncaught SyntaxError: Unexpected token 'export' (at charts.min.js:7:1)  ( export * from './lib/export/charts';) 


    Any help would be appreciated !

    Best regards





    ------------------------------
    LOIC POTIN
    ------------------------------

    #CognosAnalyticswithWatson

    Attachment(s)

    txt
    main.ts (example).txt   2 KB 1 version