Report Studio with Echart

[linbai]

what's Echart?
http://echarts.baidu.com/echarts2/doc/example-en.html
https://ecomfe.github.io/echarts-examples/public/index.html

RS use echart
https://ask.hellobi.com/blog/bailin0007/5067

use echart in report studio ,it's can to be this:



it's easy and fun to use echart in cognos.



1 import echart

Code Select Expand

<script src="../Amyjs/echarts.js"></script>

2

Code Select Expand

<div id='table1'>

3 js get the report object

Code Select Expand

</div>
<script type="text/javascript">
//cognos自带的dojo框架也能方便的获取对象 但是兼容性不好
var tableObj1 = document.getElementById('table1').getElementsByTagName("table");
//行数
var lines=tableObj1[0].rows.length-1;
//获取最后一个单元格的值
var allpercent=tableObj1[0].rows[lines].cells[5].innerText.substring(-1,5);
</script

4 brush on bar chart

Code Select Expand

   <div id="main" style="width: 700px;height:400px;"></div>
<script type="text/javascript">
//定义echart中需要的数组
var xAxisData = [];
var data1 = [];
var data2 = [];
var data3 = [];
var rose =[];
//遍历列表 按照echart要求的格式初始化数组
for(var i=1,j=0;i< tableObj1[0].rows.length-1;i++,j++)
{
xAxisData.push(tableObj1[0].rows[i].cells[0].textContent);
data1.push(-tableObj1[0].rows[i].cells[3].innerText);
data2.push(tableObj1[0].rows[i].cells[2].innerText);
data3.push(tableObj1[0].rows[i].cells[4].innerText);
rose[j]={value: tableObj1[0].rows[i].cells[2].innerText,name:tableObj1[0].rows[i].cells[0].textContent};
}

var itemStyle = {
    normal: {
    },
    emphasis: {
        barBorderWidth: 1,
        shadowBlur: 10,
        shadowOffsetX: 0,
        shadowOffsetY: 0,
        shadowColor: 'rgba(0,0,0,0.5)'
    }
};

option = {
    backgroundColor: '#eee',
    legend: {
        data: ['成本', '收入','毛利润'],
        align: 'left',
        left: 10
    },
    brush: {
        toolbox: ['rect', 'polygon', 'lineX', 'lineY', 'keep', 'clear'],
        xAxisIndex: 0
    },
    toolbox: {
        feature: {
            magicType: {
                type: ['stack', 'tiled']
            },
            dataView: {}
        }
    },
    tooltip: {},
    xAxis: {
        data: xAxisData,
        name: '产品分类',
        silent: false,
        axisLine: {onZero: true},
        splitLine: {show: false},
        splitArea: {show: false}
    },
    yAxis: {
        splitArea: {show: false}
    },
    grid: {
        left: 100
    },
    visualMap: {
        type: 'continuous',
        dimension: 1,
        text: ['收入高', '收入低'],
        itemHeight: 200,
        calculable: true,
          max: 15,
        min: 0,
     
        top: 60,
        left: 10,
        inRange: {
            colorLightness: [0.4, 0.8]
        },
        outOfRange: {
            color: '#bbb'
             
        },
        controller: {
            inRange: {
               color: '#2f4554'
            }
        }
    },
    series: [
        {
            name: '成本',
            type: 'bar',
            stack: 'one',
            itemStyle: itemStyle,
            data: data1
        },
        {
            name: '收入',
            type: 'bar',
            stack: 'one',
            itemStyle: itemStyle,
            data: data2
        },
        {
            name: '毛利润',
            type: 'bar',
            stack: 'two',
            itemStyle: itemStyle,
            data: data3
        }
    ]
};
       // 使用刚指定的配置项和数据显示图表。
var myChart = echarts.init(document.getElementById('main'));
        myChart.setOption(option);

</script>

5 gauge

Code Select Expand

  <div id="main1" style="width: 400px;height:400px;"></div>
<script src="../Amyjs/echarts.js"></script>
    <script type="text/javascript">

        var myChart1 = echarts.init(document.getElementById('main1'));
        var  option1 ={
    tooltip : {
        formatter: "{a} <br/>{b} : {c}%"
    },
    toolbox: {
        feature: {
            restore: {},
            saveAsImage: {}
        }
    },
    series: [
        {   radius : '80%',
            name: '总利润率',
            type: 'gauge',
            detail: {formatter:'{value}%'},
axisLine: { //仪表盘轴线样式
                lineStyle: {
                    color:[[0.3,"#FF0000"],[0.7,"#FFD700"],[1,"#00FF00"]],
                    width: 40
                   
                }
            },
            splitLine: { //分割线样式
                length: 45
            },
            data: [{value: allpercent, name: '总利润率'}]
        }
    ]
};

        // 使用刚指定的配置项和数据显示图表。
        myChart1.setOption(option1);
    </script>

6 Nightingale's Rose Diagram

Code Select Expand

<div id="main3" style="width: 550px;height:460px;"></div>
    <script type="text/javascript">
var myChart3= echarts.init(document.getElementById('main3'));
console.log(rose);
option3=  {
    title : {
        text: '产品线收入占比',
        subtext: '单位：万元',
        x:'center'
    },
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
        x : 'center',
        y : 'bottom',
        data: xAxisData
    },
    toolbox: {
        show : true,
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            magicType : {
                show: true,
                type: ['pie', 'funnel']
            },
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    calculable : true,
    series : [
       
        {
            name:'收入及占比',
            type:'pie',
            radius : [30, 110],
            roseType : 'area',
            data: rose}
    ]
};
console.log(option3);
  myChart3.setOption(option3);


    </script>

[Yasser]

That will be great, But will it work when we export to PDF?

[Invisi]

Gauges and Rose diagrams are heresy according to Few. The bar chart has some appeal.

Anyway, why use Cognos when basically you propose a different charting engine? Basically the core of a BI tool is the charting engine. If you so dislike Cognos, why bother using it?

[linbai]

unlucky,when export to PDF or Excel,the javascript code display and the charts is disappeared.Echarts just for web browser,it's can be saved as picture as signle charts.
The resaon to use echarts in cognos is:
1.  In special case,clients bought Cognos and  make a special charts requests. but base Cognos cannot meet it
2.  It's fun to use something new in Cognos.

[Invisi]

To me it sounds that during the selection process, the client made a mistake when checking for 'has exotic chart types'. Cognos has some fairly different chart types, but not the more exotic types. What worries me most is that the regular chart engines of Cognos lack a box plot as far as I know.

For me fun is getting Cognos to do something within its own capabilities that fits the method I use. Using a different chart engine falls outside of this category. When my client would insist on using charts alien to Cognos, I would advise them to look for another BI tool for it.

[pricter]

Could you attach a report specifitaction with English description as also echarts.js?