SpagoBI Lesson 3: Highchart Dashboards

Business Intelligence dashboards

Every car comes with a dash board which has several gauges that alerts the driver when an important event have occurred. It might be that the car is running low on fuel or the engine oil is getting low. It might be also that the battery is nor charging or you are driving with handbrake on! An automobile dashboard need to be easy to understand and should not take time to read, remember you are driving. A good dashboard should be easy to understand and should portray relevant information. The business community copied this dashboard idea from the automobile industry. Business dashboards show at a glance the state of the business at any given time. As an example, a chart might show a comparison between sales between current quarter and the last quarter. If all sales for previous quarters are greater than current quarter, then something is definitely wrong.

Since a dashboard should be easy to read, normally only summaries are shown in dashboards. Dashboards also show trends and comparisons.

We will create our first dashboard to compare sales between current year against sales for previous year. The dashboard will be built using the highcharts library. First, we will write the Sql that will help us get the sales comparisons between current year and previous year for the Nairobi store.

Here is the result of the query:

image0011
image0031

And here is the query:

You can find the query under the dashboard folder in the CD that came with this book. It is called dash1.txt. In case you are reading this at spagolabs blog, then you can get the mysql dump and other files needed for this tutorial by writing the author at the email xogutu at gmail dot com for a small fee.

Now that we have the query, we will create the xml template that will be used by highcharts. We have included the xml below, it can be found under the dashboard folder in the CD that came with this book. The xml file is called sales_comparison.xml.

<HIGHCHART width=’80%’ height=’80%’>

<CHART zoomType=’xy’ />

<TITLE text=’Nairobi sales comparison, current year vs previous year.’ />

<SUBTITLE text=’Detail for 2011, 2010′ />

<X_AXIS alias=’current_month’ />

<Y_AXIS_LIST>

<Y_AXIS alias=’sales_previous_year’ opposite=’true’>

<LABELS>

<STYLE color=’#89A54E’ />

</LABELS>

<TITLE text=’Sales Previous Year (2010)’>

<STYLE color=’#89A54E’ />

</TITLE>

</Y_AXIS>

<Y_AXIS alias=’sales_current_year’ gridLineWidth=’0′>

<LABELS>

<STYLE color=’#4572A7′ />

</LABELS>

<TITLE text=’Sales Current Year (2011)’>

<STYLE color=’#4572A7′ />

</TITLE>

</Y_AXIS>

</Y_AXIS_LIST>

<LEGEND layout=’vertical’

align=’left’

verticalAlign=’top’

x=’120′

y=’40′

floating=’true’

borderWidth=’1′

backgroundColor=’#FFFFFF’

shadow=’true’/>

<SERIES_LIST allowPointSelect=’true’>

<SERIES name=’Sales Previous Year (2010)’ color=’#89A54E’ type=’spline’ alias=’sales_previous_year’ />

<SERIES name=’Sales Current Year (2011)’ color=’#4572A7′ type=’spline’ alias=’sales_current_year’ dashstyle=’shortdot’>

</SERIES>

</SERIES_LIST>

</HIGHCHART>

Now login to SpagoBI as the biadmin user and follow these steps to create the dash board.

1. Create a folder in SpagoBI, call it Dash Boards.

2. Click on Resources -> dataset.

3. Click on the add button.

4. On the Label, write “SalesComparisonNairobi”

5. On Name, write “SalesComparisonNairobi”

6. On Description, write “Sales comparison for Nairobi store between between current year and previous year.”

7. You should have the following once you are done.

8. Click on the Type TAB.

9. Under DataSet Type, select Query.

10. Under data source select “Sapgo BI Mysql Training”. Remember we had created this datasource previously.

11. Under Query, Paste the query in the file dash.txt on the folder dashboard.

12. You should have this once you are done.

13. Click on preview button. You should have the output shown below.

14. Save the data set.

15. Click on Analytical Model -> Documents Development.

16. Click on Insert. Add create the document as shown below.

17. Click on browse and select the sales_comparison.xml file we created previously. The file can be found on the CD that came with this book under dashboard folder.

18. Under documents template, select “Dash Boards” and click Save.

19. Click on “Home Page”

20. Navigate to “Dash Boards” folder. Click on “Sales Comparison” document to run it.

You should have your first chart!

Now let us look at sales_comparison.xml file to better understand it.

A. Chart Size.

The first element must be HIGHCHART. You can also specify the size of the chart in this element.

<HIGHCHART width=’80%’ height=‘80 %’>

B. TITLE and SUBTITLE.

The TITLEand SUBTITLE elements are the title and subtitle of the charts.

<TITLE text=’Nairobi sales comparison, current year vs previous year.’ />

<SUBTITLE text=’Detail for 2011, 2010′ />

C. The X_AXIS element.

The element <X_AXIS alias=’current_month’ /> is the label of the X axis. In Spago Bi, this can come from a column in your data set query.

In our chart, the labels come from the database column current_month from the dataset SalesComparisonNairobi we created previously.

The contents of current_ month column in the data set SalesComparisonNairobi through the xml element <X_AXIS alias=’current_month’ /> is used to label the x axis with January up to December on our chart.

D.

Y_AXIS_LIST Element.

The <Y_AXIS_LIST> element defines the items that appear on the Y axis. Normally they come from database tables or views through the SpagoBi data set. For example, in the block of xml code below:

1. Alias element.
alias=’sales_previous_year’ – This defines which column in the dataset query the data comes from.

opposite=’true’ – When opposite is true, the label will appear on the right. When false it appears on the left.

As an example, if we say opposite is false as shown below,

The Y axis elements will be on the left.

Change it to opposite=true and the Y axis items will appear on right.

gridLineWidth=’1′ – Use 0 if you do not need a grid line.

2. The <TITLE text=’Sales Current Year (2011)’> element.

This element is used to set the labels of the items on the Y axis.

E. The LEGEND element determines the position, color and other properties of the legend.

The above block of code produces the legend below.

F.

The SERIES_LIST element is the main contents of the chart. It can be line or column.

Since our chart has two lines, it therefore will have two series. The contents of the series come from a table column through the Spago BI dataset. For example, the dottet series (Sales for 2011) comes from the column sales_current_year and the element dashstyle=’shortdot’ makes it dotted. The element type=’spline’ means a line chart, if we change it to type=’column’ , we will end up with a bar graph as shown:

SpagoBI 教程 Lesson 3: Highchart Dashboards的更多相关文章

  1. SpagoBI 教程 Lesson 2: OLAP with JPIVOT

    SpagoBI Lesson 2: OLAP with JPIVOT Online Analytical Processing Online Analytical Processing (OLAP) ...

  2. SpagoBI 教程 Lesson 5: Creating a dashboard with BIRT and SpagoBI

    SpagoBI Lesson 5: Creating a dashboard with BIRT and SpagoBI Creating a dashboard with BIRT and Spag ...

  3. SpagoBI 教程 Lesson 4: BIRT Reports

    SpagoBI Lesson 4: BIRT Reports BIRT BIRT is the acronym for Business Intelligence and Reporting Tool ...

  4. SpagoBI 教程 Lesson 1:Introduction and Installation

    SapgoBI Lesson 1: Introduction and Installation Downloading and installing SpagoBI. Download SpagoBI ...

  5. 教程:SpagoBI开源商业智能之XML Template 图表模板

    SpagoBI offers a variety of widgets' examples realized with the Highcharts library, that can be divi ...

  6. 教程:Spagobi开源BI系统 Console报表设计教程

    Console Designer 1 Console Designer Console Designer 1.1 Introduction 1.2 Dataset Tab 1.3 Summary Pa ...

  7. Lazy的SDL教程 翻译----Lesson 22 Timing

    原文:http://lazyfoo.net/tutorials/SDL/22_timing/index.php Timing 计时 Last Updated 3/10/14 Another impor ...

  8. Highchart基础教程-图表配置

    一.图表容器: Highcharts 实例化中绑定容器的两种方式: 1.通过 dom 调用 highcharts() 函数的方式 $("#container").highchart ...

  9. Highchart基础教程-图表的主要组成

    一.Highchar图表的主要组成 1.图表标题(Title):图表包含标题和副表题(subTitle,可选). 2.坐标轴(Axis):包括x轴(xAxis)和y轴(yAxis).多个数据列可以共同 ...

随机推荐

  1. .net core 调用数字证书 使用X509Certificate2

    .NET下面的 .netfromwork使用和asp.net core下使用方式不一样 配置文件中代码: public const string API_URL = "https://api ...

  2. VirtualBox虚拟机网络环境解析和搭建-NAT、桥接、Host-Only、Internal、端口映射

    一.NAT模式 特点: 1.如果主机可以上网,虚拟机可以上网 2.虚拟机之间不能ping通 3.虚拟机可以ping通主机(此时ping虚拟机的网关,即是ping主机) 4.主机不能ping通虚拟机 应 ...

  3. YGC和FGC发生时间

    1.YGC和FGC是什么 YGC :对新生代堆进行gc.频率比较高,因为大部分对象的存活寿命较短,在新生代里被回收.性能耗费较小. FGC :全堆范围的gc.默认堆空间使用到达80%(可调整)的时候会 ...

  4. Python爬取猫眼top100排行榜数据【含多线程】

    # -*- coding: utf-8 -*- import requests from multiprocessing import Pool from requests.exceptions im ...

  5. RAID常见问题集锦+底部案例

    磁盘阵列(Redundant Arrays of Inexpensive Disks,RAID),有“价格便宜具有冗余能力的磁盘阵列”之意.原理是利用数组方式来作磁盘组,配合数据分散排列的设计,提升数 ...

  6. Python调用jar包中的方法

    [本文出自天外归云的博客园] 需求 最近在后台项目代码中一段自定义的AES加解密的程序在平时的测试工作中应用频繁.因为写脚本经常会需要使用,而经过各种尝试,比如jpype等,都不尽如人意.最后转换思路 ...

  7. iOS录制视频

    随着每一代 iPhone 处理能力和相机硬件配置的提高,使用它来捕获视频也变得更加有意思.它们小巧,轻便,低调,而且与专业摄像机之间的差距已经变得非常小,小到在某些情况下,iPhone 可以真正替代它 ...

  8. Cpu表现出正弦曲线

    #include <windows.h> #include <math.h> int main(void) { SetThreadAffinityMask(GetCurrent ...

  9. vue前后分离动态路由和权限管理方案

    需求 需要根据不同的角色来显示不同的菜单 问题 系统是前后分离模式开发的,出现了后端接口和前端路由都需要权限管理. 思路 后端的接口肯定得验证权限 在前端做好组件名和组件的映射 前端的路由通过后端发回 ...

  10. 迭代器模式和组合模式(head first设计模式——8)

    把迭代器模式和组合模式放在同一篇的原因是其联系比较紧密. 一.迭代器模式 1.1迭代器模式定义 迭代器模式提供一种方法顺序访问一个聚合对象中的各个元素,而不是暴露其内部的表示. 这个模式提供了一种方法 ...