Canvas Plugin: Sparklines

Canvas Canvas Tips
1

The plugin is using JS library from jQuery Sparklines which builds interactive spark charts. Currently, only a couple of options were brought over, but if there is a demand I will add others into the plugin.

Pasted image917×186 8.28 KB

Installation:

  1. Copy tm1ui.sparkline.js to js\lib (create the folder if it doesn’t exist)

  2. Open WEB-INF\pages\index.ftl

  3. Find var customAngularModules = [] and add ‘tm1uisparkline’ inside

var customAngularModules = [‘tm1uisparkline’]

  1. Find <!-- START: LINKS/PATHS TO YOUR NON-ANGULAR or other CSS -->

  2. Add reference to tm1ui.sparkline.js file at the end of the list but before <!-- END: LINKS/PATHS TO YOUR NON-ANGULAR or other CSS -->

<script src="../../js/lib/tm1ui.sparkline.js" ></script>

  1. Open css\style.css and add (this fixes tooltip issue)

.jqstooltip{
box-sizing: content-box;
}

Directive Name: tm1-ui-spark-chart
Example:

<tm1-ui-spark-chart tm1-data="product.v" tm1-columns="page.periods.length" tm1-chart="bar" tm1-tooltip="true"></tm1-ui-spark-chart>

Attributes:

tm1-data object/array of values
tm1-columns number of columns
tm1-chart chart type (line, bar, tristate, discrete, bullet, pie, box)
tm1-tooltip true/false

Check spark.html file to see how to implement spark lines on TM1 CXMD samples.

Sample installation

  1. Copy spark.html to html folder
  2. Copy spark.js to js\controllers folder

Files:
tm1UiSpark.zip (14.0 KB)

4 Likes
2

Awesome stuff Andrey. Being a big fan of sparklines I like this very much. Is there any noticeable performance impact?

3

I would say that this should work faster than smaller version of tm1-ui-chart.

4

Good job and thanks again, Andrey! If I can kindly request two little improvements these would be:

  • tm1-tooltip default value is “true”
  • additional attribute “tm1-data-decimal”
5

Update:
-New attribute tm1-data-decimal to specify number of decimal places in tooltip
-Tooltip is displayed by default.
-spark.js controller has been removed.

tm1UiSpark.zip (13.9 KB)