what's Echart?
http://echarts.baidu.com/echarts2/doc/example-en.html (http://echarts.baidu.com/echarts2/doc/example-en.html)
https://ecomfe.github.io/echarts-examples/public/index.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:
(https://o6v7e1w4j.qnssl.com/uploads/article/20160927/7240446bfcc59345e65f0d03d496db97.gif)
it's easy and fun to use echart in cognos.
(https://o6v7e1w4j.qnssl.com/uploads/article/20160927/e7ba3cab5df10bbe50b38d54a07583f4.png)
1 import echart
<script src="../Amyjs/echarts.js"></script>
2
<div id='table1'>
3 js get the report object
</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
<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
<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
<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>
That will be great, But will it work when we export to PDF?
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?
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.
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.
Could you attach a report specifitaction with English description as also echarts.js?