SpagoBI offers a variety of widgets' examples realized with the Highcharts library, that can be divided according to the characteristics, in the following categories:

一、Bar

XML Template

<HIGHCHART>

  <CHART  type='bar'/>

  <TITLE text='Sales by Region'/>

  <SUBTITLE text='USA Countries' />

  <X_AXIS title='States' alias='sales_state'/>

  <Y_AXIS min='0'>

	   <TITLE text='Sales - Cost Amount' align='high'/>

  </Y_AXIS>

  <LEGEND layout='vertical'

         align='right'

         verticalAlign='top'

         x='-100'

         y='100'

         floating='true'

         borderWidth='1'

         backgroundColor='#FFFFFF'

         shadow='true'/>

  <PLOT_OPTIONS>

  	<BAR>

  	   <DATA_LABELS enable='true'/>

  	</BAR>

  </PLOT_OPTIONS>

  <SERIES_LIST>

  	<SERIES name="Store sales" alias="store_sales" />

  	<SERIES name="Store cost" alias="store_cost" />

  </SERIES_LIST>

</HIGHCHART>

二、Pies

1 Simple Pie
- 1.1 Template
2 Double Pie
- 2.1 Template
3 Pie with legend
- 3.1 Template

1 Simple Pie

1.1 Template

<HIGHCHART  width='100%' height='100%'>

  <CHART  type='pie' defaultSeriesType='pie'/>

  <TITLE text='Browser market shares at a specific website, 2010' />

  <SUBTITLE text='Simple subtitle' />

  <PLOT_OPTIONS >

  	<PIE allowPointSelect='true' cursor='pointer' >

  		<DATA_LABELS enabled='true' color='#000000' connectorColor='#000000'/>

  	</PIE>

  </PLOT_OPTIONS>

  <SERIES_LIST>

	<SERIES type='pie' name='Browser share' alias='MEDIA,VALUE'/>

  </SERIES_LIST>

  <LEGEND layout='vertical'

         align='right'

         verticalAlign='top'

         x='-100'

         y='100'

         floating='true'

         borderWidth='1'

         backgroundColor='#FFFFFF'

         shadow='true'/>

</HIGHCHART>

2 Double Pie

Note: It shows two different series values and it's usefull to compare their. For example the same data about two different years.

2.1 Template

<HIGHCHART  width='100%' height='100%'>

  <CHART  margin='[50, 0, 0, 0]' plotBackgroundColor='none' plotBorderWidth='0'  plotShadow='false' />

  <TITLE text='Sales and Costs - Market Shares for Product Departments' />

  <SUBTITLE text='Sales and Costs of ${ProdFamily} in ${State}' />

  <!-- defines a personal palette of colors -->

  <COLORS_LIST>

        <COLORS color="#058DC7, #50B432, #ED561B, #DDDF00, #24CBE5, #64E572, #FF9655, #FFF263, #6AF9C4"/>

  </COLORS_LIST>

  <SERIES_LIST>

			<SERIES name='Sales' type='pie' size='45%' innerSize='20%'  alias='DEPARTMENT,SALES' >

			   <DATA_LABELS enabled='false'/>

			</SERIES>

			<SERIES name='Costs' type='pie' innerSize='45%'  alias='DEPARTMENT,COSTS' >

			   <DATA_LABELS enabled='true' color='#000000' connectorColor='#000000'/>

			</SERIES>

	</SERIES_LIST>

  <TOOLTIP  backgroundColor='#FCFFC5' crosshairs='true' enabled='true'  shadow='true' />

</HIGHCHART>

3 Pie with legend

3.1 Template

<HIGHCHART  width='100%' height='100%'>

  <CHART  type='pie' defaultSeriesType='pie'/>

  <TITLE text='Browser market shares at a specific website, 2010'/>

  <SUBTITLE text='Simple subtitle' />

  <PLOT_OPTIONS >

  	<PIE allowPointSelect='true' cursor='pointer' showInLegend='true'>

  		<DATA_LABELS enabled='false'/>

  	</PIE>

  </PLOT_OPTIONS>

  <SERIES_LIST>

  	<SERIES type='pie' name='Browser share' alias='MEDIA,VALUE'/>

  </SERIES_LIST>

  <LEGEND layout='vertical'

         align='right'

         verticalAlign='top'

         x='-100'

         y='100'

         floating='true'

         borderWidth='1'

         backgroundColor='#FFFFFF'

         shadow='true'/>

</HIGHCHART>

三、Scatter（散点图）

Template

<HIGHCHART  width='100%' height='100%'>

  <CHART type='scatter' defaultSeriesType='scatter' zoomType='xy' backgroundColor='white'/>

  <TITLE text='Sales versus Costs' />

  <SUBTITLE text='Detail for month' />

  <X_AXIS startOnTick='true' endOnTick='true' showLastLabel='true'>

  	<TITLE text='Sales' enabled='true'/>

  </X_AXIS>

  <Y_AXIS>

  	<TITLE text='Costs'/>

  </Y_AXIS>

  <LEGEND layout='vertical'

         align='right'

         verticalAlign='top'

         x='-100'

         y='100'

         floating='true'

         borderWidth='1'

         backgroundColor='#FFFFFF'

         shadow='true'/>

  <PLOT_OPTIONS >

	<SCATTER>

		<MARKER radius='5'>

			<STATES>

				<HOVER enabled='true' lineColor='rgb(100,100,100)'/>

			</STATES>

		</MARKER>

	</SCATTER>

  </PLOT_OPTIONS>

  <SERIES_LIST allowPointSelect='true'>

			<SERIES name='Sales' color='rgba(223, 83, 83, .5)' alias='THE_MONTH,SALES' />

			<SERIES name='Costs' color='rgba(119, 152, 191, .5)' alias='THE_MONTH,COSTS' />

	</SERIES_LIST>

</HIGHCHART>

四、Lines

1 Simple Line
- 1.1 Template
2 Area Line
- 2.1 Template
3 Dual Axis Line
- 3.1 Template
4 Multi Axis Line
- 4.1 Template

1 Simple Line

1.1 Template

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

  <CHART type='line' zoomType='x'/>

  <TITLE text='Monthly Average Temperature' />

  <SUBTITLE text='Source: WorldClimate.com' />

  <PLOT_OPTIONS >

    <LINE enableMouseTracking='true'>

  	<DATA_LABELS enabled='true'/>

    </LINE>

  </PLOT_OPTIONS>

  <SERIES_LIST>

	<SERIES name='London' alias='VALUE' />

  </SERIES_LIST>

  <X_AXIS/>

  <Y_AXIS>

       <TITLE text='Temperature (¶øC)'/>

  </Y_AXIS>

  <LEGEND enabled='false'/>

</HIGHCHART>

2 Area Line

2.1 Template

<HIGHCHART>

  <CHART type='line' defaultSeriesType='line' zoomType='x' spacingRight='20'/>

  <TITLE text='USD to EUR exchange rate from 2006 through 2008' />

  <SUBTITLE text='Click and drag in the plot area to zoom in' />

  <PLOT_OPTIONS >

     <AREA lineWidth='1' shadow='false'>

	 <FILL_COLOR linearGradient='[0, 0, 0, 300]'>

	    <STOPS_LIST>

		  <STOPS>[0, 'rgb(69, 114, 167)']</STOPS>

		  <STOPS>[1, 'rgba(2,0,0,0)']</STOPS>

	    </STOPS_LIST>

	 </FILL_COLOR>

      </AREA>

  </PLOT_OPTIONS>

  <SERIES_LIST>

    <SERIES name='USD to EUR' type='area' pointInterval='8640000' pointStart='1123459200000' alias='VALUE' />

  </SERIES_LIST>

  <X_AXIS maxZoom='8640000' type='datetime'/>

  <Y_AXIS  min='0.6' startOnTick='false' showFirstLabel='false'>

  	<TITLE text='Exchange rate'/>

  </Y_AXIS>

  <LEGEND enabled='false'/>

</HIGHCHART>

Note: pay your attention to the category axis (x) settings. Its values are created automatically by the Highcharts library using the configuration setted into the SERIES tag (pointInterval and pointStart configure the X_AXIS that is defined as 'datetime' type). So the xAxis value aren't got by a dataset column. It's usefull when you are sure that the data follow the regular datetime values generated.

3 Dual Axis Line

3.1 Template

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

  <CHART zoomType='xy' />

  <TITLE text='Sales vs Costs' />

  <SUBTITLE text='Detail for month' />

  <X_AXIS   alias='THE_MONTH' />

  <Y_AXIS_LIST>

    <Y_AXIS alias='SALES'>

        <LABELS>

            <STYLE  color='#89A54E' />

        </LABELS>

        <TITLE text='Sales'>

          <STYLE  color='#89A54E' />

        </TITLE>

    </Y_AXIS>

    <Y_AXIS alias='COSTS' opposite='true'>

        <LABELS>

            <STYLE  color='#4572A7' />

        </LABELS>

        <TITLE text='Costs'>

          <STYLE  color='#4572A7' />

        </TITLE>

    </Y_AXIS>

  </Y_AXIS_LIST>

    <LEGEND layout='vertical'

         align='left'

         verticalAlign='top'

         x='120'

         y='100'

         floating='true'

         borderWidth='1'

         backgroundColor='#FFFFFF'

         shadow='true'/>

  <SERIES_LIST allowPointSelect='true'>

	<SERIES name='Sales' color='#4572A7' type='column' yAxis='1' alias='SALES' />

	<SERIES name='Costs' color='#89A54E' type='spline' alias='COSTS' />

  </SERIES_LIST>

</HIGHCHART>

4 Multi Axis Line

4.1 Template

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

  <CHART zoomType='xy' />

  <TITLE text='Sales, Costs and Unit sales' />

  <SUBTITLE text='Detail for month' />

  <X_AXIS   alias='THE_MONTH' />

  <Y_AXIS_LIST>

    <Y_AXIS alias='SALES' opposite='true'>

        <LABELS>

            <STYLE  color='#89A54E' />

        </LABELS>

        <TITLE text='Sales'>

          <STYLE  color='#89A54E' />

        </TITLE>

    </Y_AXIS>

    <Y_AXIS alias='COSTS' gridLineWidth='0'>

        <LABELS>

            <STYLE  color='#4572A7' />

        </LABELS>

        <TITLE text='Costs'>

          <STYLE  color='#4572A7' />

        </TITLE>

    </Y_AXIS>

     <Y_AXIS alias='UNIT_SALES' gridLineWidth='0' opposite='true'>

        <LABELS>

            <STYLE  color='#AA4643' />

        </LABELS>

        <TITLE text='Unit Sales'>

          <STYLE  color='#AA4643' />

        </TITLE>

    </Y_AXIS>

  </Y_AXIS_LIST>

  <LEGEND layout='vertical'

         align='left'

         verticalAlign='top'

         x='120'

         y='80'

         floating='true'

         borderWidth='1'

         backgroundColor='#FFFFFF'

         shadow='true'/>

  <SERIES_LIST allowPointSelect='true'>

	<SERIES name='Sales' color='#89A54E' type='column' yAxis='1' alias='SALES' />

	<SERIES name='Costs' color='#4572A7' type='spline' alias='COSTS' dashStyle='shortdot' yAxis='2'>

	   <MARKER enabled="false"/>

	</SERIES>

	<SERIES name='Unit Sales' color='#AA4643' type='spline' alias='UNIT_SALES' />

  </SERIES_LIST>

</HIGHCHART>

五、Master Detail

This is a particular chart, different by the standard. It's composed by two charts: the summary (below) and the detail (top).
They show the same data but with different aggregation levels. All informations are got by the dataset. The engine doesn't make operation of aggregation.
In this example the summary or master shows data monthly while the detail shows the daily detail.
Is possible to use a slider (zoom) on the master to change the range of the detail chart.

At the moment, this type of chart is available with line charts on simple xy axis. Multiserie are managed.

Template

<HIGHCHART  width='80%' height='60%'>

  <CHART type='line' subType='MasterDetail' zoomType='x'/>

  <TITLE text=' ' />

  <SUBTITLE text=' ' />

  <PLOT_OPTIONS >

  	<AREA lineWidth='1' shadow='false'>

  		<FILL_COLOR linearGradient='[0, 0, 0, 300]'>

  			<STOPS_LIST>

  				<STOPS>[0, '#4572A7']</STOPS>

  				<STOPS>[1, 'rgba(0,0,0,0)']</STOPS>

  			</STOPS_LIST>

  		</FILL_COLOR>

  	</AREA>

  </PLOT_OPTIONS>

  <SERIES_LIST allowPointSelect='true' >

        <SERIES name='Store sales' type='area' alias='month_utc,sales_for_month' />

        <SERIES name='Store costs' type='area' alias='month_utc,costs_for_month' />

  </SERIES_LIST>

  <X_AXIS type='datetime'  endOnTick='true' showLastTickLabel='false' maxZoom='2678400000' >

    <PLOT_BANDS_LIST  >

  	  <PLOT_BANDS id='mask-before' from='Date.UTC(1998,0,1)' to='Date.UTC(1998,7,1)' defaultMax='Date.UTC(1998,11,31)' color='rgba(0, 0, 0, 0.2)' />

    </PLOT_BANDS_LIST>

   </X_AXIS>

  <Y_AXIS >

     <LABELS enabled='true'/>

     <TITLE text=' '/>

  </Y_AXIS>

  <TOOLTIP enabled='true'/>

  <LEGEND enabled='false'/>

  <DETAIL_CHART>

    <CHART type='line' zoomType='x'/>

    <TITLE text='Store costs vs Store sales' />

    <SUBTITLE text='Select an area by dragging across the lower chart' />

    <PLOT_OPTIONS >

    	<LINE enableMouseTracking='true'>

    		<DATA_LABELS enabled='false'/>

    	</LINE>

    </PLOT_OPTIONS>

    <X_AXIS type='datetime'  maxZoom='0.1'>

       <LABELS enabled='true'/>

  	   <TITLE text=' '/>

    </X_AXIS>

    <Y_AXIS maxZoom='0.1'>

        <LABELS enabled='true'/>

  	   <TITLE text=' '/>

    </Y_AXIS>

    <LEGEND layout='vertical'

         align='left'

         verticalAlign='top'

         floating='true'

         borderWidth='1'

         backgroundColor='#FFFFFF'

         shadow='true'/>

    <TOOLTIP enabled='true'/>

    <SERIES_LIST allowPointSelect='false'   >

  	<SERIES name='Store costs' color='rgba(223, 83, 83, .5)' alias='the_date,store_cost' type='line' >

  	   <MARKER enabled='false'>

  	       <HOVER enabled='true' radius='3' />

  	   </MARKER>

  	</SERIES>

  	<SERIES name='Store sales' color='rgba(119, 152, 191, .5)' alias='the_date,store_sales' type='line' >

  	   <MARKER enabled='false'>

  	       <HOVER enabled='true' radius='3' />

  	   </MARKER>

  	</SERIES>

      </SERIES_LIST>

  </DETAIL_CHART>

</HIGHCHART>

Pay attention to 'subType' property. It's necessary set it to 'MasterDetail' to create a master-detail chart.

Also the 'height' property is important. It specifies the detail height. The master height is calculated as 1/3 of the summary.

Dataset

For this example is very important that the dataset returns the date values in milliseconds format because in this way is possible to use the 'datetime' type for the axis X.

Here an example of the data returned for this document (pay attention to month_utc and the_date values: they are in milliseconds!):

六、Waterfall

Dataset

XML Template

<HIGHCHART width="100%" height="100%" >

	<CHART type="waterfall" />

	<TITLE text="Unit sales" color="#325072"/>

	<SUBTITLE text= "" />

	<COLORS_LIST>

        <COLORS color="#058DC7" upColor="#8bbc21" downColor="#492970" sumColor="#0d233a"/>

    </COLORS_LIST>

	<LEGEND enabled='false'/>

	<X_AXIS alias='state' type='category' >

		<TITLE text= "" />

	</X_AXIS>

	<Y_AXIS_LIST>

		<Y_AXIS min="0" lineWidth="1" alias='value' >

			<TITLE text= "Values" />

			<PLOT_LINES_LIST>

				<PLOT_LINES color="#8bbc21" width="2" value="51" />

			</PLOT_LINES_LIST>

		</Y_AXIS>

	</Y_AXIS_LIST>

	<PLOT_OPTIONS>

		<WATERFALL enableMouseTracking='true'>

		   <DATA_LABELS enabled='false' >

				<STYLE color='#FFFFFF'  fontWeight='bold' fontSize='12px'  padding='2px' />

		   </DATA_LABELS>

		</WATERFALL>

	 </PLOT_OPTIONS>

	<SERIES_LIST>

		<SERIES alias="state,store_sales" isIntSumAlias="isintermediatesum" isSumAlias="issum"  colorAlias="color"  />

	</SERIES_LIST>

	<TOOLTIP  backgroundColor='#FCFFC5'  enabled='true' shadow='true'  text=' {CATEGORY} - {SERIE_NAME} : {SERIE}' >

		<STYLE  color='#4572A7' fontSize='12px' padding='2px' />

	</TOOLTIP>

</HIGHCHART>

Details:

In the detail of the SERIES, you can specify more attributes than the other types of graphic:

isIntSumAlias: defines the column label of the dataset for define if the value must be an intermediate sum. Possible value for this column are true or false.
isSumAlias: defines the column label of the dataset for define if the value must be a total sum. Possible value for this column are true or false.
colorAlias: defines the column label of the dataset for define specific color for the value. It can be usefull for point out some informations.

For the COLORS, instead, you can specify:

upColor: a color for positive values
downColor: a color for negative values
sumColor: a color for sum values

************************************************************************************************

联系我：

博客：http://www.cnblogs.com/mybi

邮箱：vba-master@outlook.com

QQ:2118917071

微信：Excel_Cortana

Q群：275725345

Hi，I'm Cortana,Can I help you? wechat：Excel_Cortana;QQ群: 303625469

教程：SpagoBI开源商业智能之XML Template 图表模板的更多相关文章

《开源网店系统iWebShop2.0模板开发教程》的说明
<开源网店系统iWebShop2.0模板开发教程>是网上广为流传的一个文档,有点问题. 其中的第4章: ========================================== ...
hadoop/etc/hadoop 下没有mapred-site.xml，只有mapred.xml.template
默认情况下,/usr/local/hadoop/etc/hadoop/文件夹下有mapred.xml.template文件,我们要复制该文件,并命名为mapred.xml,该文件用于指定MapRedu ...
struts2官方中文教程系列十一：使用XML进行表单验证
在本教程中,我们将讨论如何使用Struts 2的XML验证方法来验证表单字段中用户的输入.在前面的教程中,我们讨论了在Action类中使用validate方法验证用户的输入.使用单独的XML验证文件让 ...
Atitit.eclipse comment template注释模板
Atitit.eclipse comment template注释模板 1. Code templet1 1.1. Settpath1 1.2. 设置存储1 1.3. 导出设置1 2. Java d ...
art template前端模板引擎
偶然看到后台有一段代码采用的是art template的模板引擎地址为 http://aui.github.io/artTemplate/ 这段代码很简洁 var html = template( ...
Template Method 模板设计模式
什么是模板设计模式对于不了解的模板设计模式的来说,可以认为如同古代的造纸术一样,纸所以成型,取决于用了模板的形状,形状又由镂空的木板组成,而你想要造什么纸,又取决于你使用什么材料. 上面提到了两个关 ...
JBOSS 中oracle-ds.xml的配置模板
http://blog.csdn.net/bo_hai/article/details/6076979 JBOSS 中oracle-ds.xml的配置模板. 代码模版: <?xml vers ...
vue-learning：12-1- HTML5的<template>内容模板元素
HTML5的<template>内容模板元素 HTML内容模板<template>元素将它其中的内容存储在页面文档中,以供后续使用,该内容的DOM结构在加载页面时会被解析器处理 ...
Vue2.0 【第二季】第5节 Template制作模板
目录 Vue2.0 [第二季]第5节 Template制作模板第5节 Template制作模板一.直接写在选项里的模板二.写在template标签里的模板三.写在script标签里的模板 Vu ...

随机推荐

window10 还原精灵破解版冰点
韩梦飞沙韩亚飞 313134555@qq.com yue31313 han_meng_fei_sha=======
[POI2018]Pionek
[POI2018]Pionek 题目大意: 在无限大的二维平面的原点放置着一个棋子.你有\(n(n\le2\times10^5)\)条可用的移动指令,每条指令可以用一个二维整数向量表示.请你选取若干条 ...
JVM调优总结 -Xms -Xmx -Xmn -Xss（转）
堆大小设置JVM 中最大堆大小有三方面限制:相关操作系统的数据模型(32-bt还是64-bit)限制:系统的可用虚拟内存限制:系统的可用物理内存限制.32位系统下,一般限制在1.5G~2G:64为操作 ...
Java基础-多线程-②多线程安全问题
什么是线程的安全问题? 上一篇 Java基础-多线程-①线程的创建和启动我们说使用实现Runnable接口的方式来创建线程,可以实现多个线程共享资源: class Dog implements Ru ...
ArcGIS Pro 中不可用的工具
有些可用于 ArcMap 之类的其他 ArcGIS Desktop 应用程序的地理处理工具在 ArcGIS Pro 中不可用.用于处理 ArcGIS Pro 所不支持的数据格式的地理处理工具已被移除, ...
解决Cordova开发的iOS的app界面被状态栏覆盖
解决方法如下: 一:在MainViewController.m中添加如下代码: -(void)viewWillDisappear:(BOOL)animated { if([[[UIDevice cur ...
【.NET线程--进阶（一）】--线程方法详解
上篇博客从线程的基本概况开始着重讨论了线程,进程,程序之间的区别,然后讨论了线程操作的几个类,并通过实例来说明了线程的创建方法.本篇博客将会带大家更深入的了解线程,介绍线程的基本方法,并通过一个Dem ...
iOS开发-UIImageView高效设置Radius
圆角的设置在iOS中随处可见,开发的时候也很方便,但是有的时候如果一个页面有大量的需要设置圆角的图片,容易产生性能问题,UIImageView ios9.0之前设置圆角是会产生离屏渲染的,9.0之后不 ...
三种方法教你如何用PHP模拟post提交数据
php模拟post传值在日常的工作中用到的不是很多,但是在某些特定的场合还是经常用到的. 下面,我整理了三种php模拟post传值的方法,file_get_contents.curl和socket. ...
CSS 布局整理
1.css垂直水平居中效果: HTML代码: <div id="container"> <div id="center-div">&l ...

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

一、Bar

XML Template

二、Pies

1 Simple Pie

1.1 Template

2 Double Pie

2.1 Template

3 Pie with legend

3.1 Template

三、Scatter（散点图）

Template

四、Lines

1 Simple Line

1.1 Template

2 Area Line

2.1 Template

3 Dual Axis Line

3.1 Template

4 Multi Axis Line

4.1 Template

五、Master Detail

Template

Dataset

六、Waterfall

Dataset

XML Template

教程：SpagoBI开源商业智能之XML Template 图表模板的更多相关文章

随机推荐

热门专题