Canvas Plugin: Sparklines

The plugin is using JS library from 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.


  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)

box-sizing: content-box;

Directive Name: tm1-ui-spark-chart

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


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: (14.0 KB)


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

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

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”

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