{"id":24334,"date":"2017-02-06T08:29:17","date_gmt":"2017-02-06T00:29:17","guid":{"rendered":"http:\/\/localhost\/help\/?page_id=24334"},"modified":"2024-06-06T14:54:20","modified_gmt":"2024-06-06T06:54:20","slug":"sparklines","status":"publish","type":"page","link":"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/all-about-charts\/sparklines\/","title":{"rendered":"Sparklines"},"content":{"rendered":"<p class=\"intro-text\"><\/p>\n<p class=\"left-bar\">This article applies to versions 4.5.5 and later of IFS OI Explorer. For more, see <a href=\"#Release_History\">Release History<\/a>.<\/p>\n<p class=\"overview\">A <em>Sparkline<\/em> is a small Chart component without gridlines, often used to show data trends amidst text (in a table) or alongside images, labels and lines in a process mimic or schematic.<\/p>\n<p class=\"intro-text\">In Explorer, you can add a sparkline as part of a process mimic or schematic, or you can add it to a Table Layout to trend related data in a table.<\/p>\n<p class=\"intro-text\">Each sparkline on a Precision or Grid Layout is individually configured, whereas the sparkline on a Table Layout is a single, configured chart that is repeated over the rows of the Table Layout. In a Table Layout, the sparkline uses contextual data from the Table Layout's dataset so that each sparkline represents data for its row.<\/p>\n<table>\n<tbody>\n<tr>\n<td>\n<p><strong><em>Sparklines on a Schematic:<\/em><\/strong><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/schematic-sparkline2.png\" rel=\"lightbox-0\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-35489\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/schematic-sparkline2.png\" alt=\"\" width=\"391\" height=\"206\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/schematic-sparkline2.png 391w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/schematic-sparkline2-150x79.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/schematic-sparkline2-24x13.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/schematic-sparkline2-36x19.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/schematic-sparkline2-48x25.png 48w\" sizes=\"auto, (max-width: 391px) 100vw, 391px\" \/><\/a><\/td>\n<td>\n<p><strong><em>Sparklines on a Table Layout:<\/em><\/strong><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/sparkline-table.png\" rel=\"lightbox-1\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-35491\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/sparkline-table.png\" alt=\"\" width=\"405\" height=\"160\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/sparkline-table.png 405w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/sparkline-table-150x59.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/sparkline-table-24x9.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/sparkline-table-36x14.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/sparkline-table-48x19.png 48w\" sizes=\"auto, (max-width: 405px) 100vw, 405px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<hr \/>\n<h2 class=\"page-subheading\">Configuring a Sparkline<\/h2>\n<p class=\"intro-text\">To configure a sparkline, first you need to first configure a <strong>line chart<\/strong> to use data that has values over time, as your sparkline represents a trend. Refer to the <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/charts\/\">Charts tutorial<\/a> for detailed instructions on configuring a chart.<\/p>\n<p class=\"intro-text\">When you have the chart set up, you then need to configure its appearance to look like a sparkline.<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td style=\"padding-left: 5px; border: 1px solid #cccccc; width: 50%;\">\n<p><strong>Typical Line Chart<\/strong><\/p>\n<ul>\n<li>Configured to use a single entity's data over a period<\/li>\n<li>A single Line Series<\/li>\n<li>The X Axis uses time (e.g. hours, weeks, months)<\/li>\n<\/ul>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Chart-before-Sparkline-1.png\" rel=\"lightbox-2\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-21167 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Chart-before-Sparkline-1.png\" width=\"412\" height=\"240\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Chart-before-Sparkline-1.png 412w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Chart-before-Sparkline-1-150x87.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Chart-before-Sparkline-1-24x14.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Chart-before-Sparkline-1-36x21.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Chart-before-Sparkline-1-48x28.png 48w\" sizes=\"auto, (max-width: 412px) 100vw, 412px\" \/><\/a><\/p>\n<\/td>\n<td style=\"padding-left: 5px; border: 1px solid #cccccc; width: 50%;\">\n<p><strong>Line Chart Configured as a Sparkline<\/strong><\/p>\n<ul>\n<li>Gridlines are hidden<\/li>\n<li>X Axis and Y Axis are hidden<\/li>\n<li>No legend<\/li>\n<li>Y Axis has a min and max, so that the trend fits most of the chart area<\/li>\n<li>No tooltips<\/li>\n<li>Line Series is thicker<\/li>\n<li>Resized to a smaller chart<\/li>\n<\/ul>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Chart-turned-into-a-sparkline-1.png\" rel=\"lightbox-3\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-21168 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Chart-turned-into-a-sparkline-1.png\" width=\"146\" height=\"60\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Chart-turned-into-a-sparkline-1.png 146w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Chart-turned-into-a-sparkline-1-24x10.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Chart-turned-into-a-sparkline-1-36x15.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Chart-turned-into-a-sparkline-1-48x20.png 48w\" sizes=\"auto, (max-width: 146px) 100vw, 146px\" \/><\/a><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"intro-text\">These are the options you need to pay attention to when configuring a sparkline.<\/p>\n<p class=\"intro-text\"><strong>Series options<\/strong>:\u00a0<\/p>\n<ul class=\"intro-text\">\n<li>To make the line more visible, change the line <strong>Thickness<\/strong> to 3.<\/li>\n<\/ul>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/sparkline-series-455.png\" rel=\"lightbox-4\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-36783\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/sparkline-series-455.png\" alt=\"\" width=\"335\" height=\"534\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/sparkline-series-455.png 335w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/sparkline-series-455-94x150.png 94w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/sparkline-series-455-15x24.png 15w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/sparkline-series-455-23x36.png 23w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/sparkline-series-455-30x48.png 30w\" sizes=\"auto, (max-width: 335px) 100vw, 335px\" \/><\/a><\/p>\n<p class=\"intro-text\"><strong>X Axis options<\/strong>:<\/p>\n<ul class=\"intro-text\">\n<li>Ensure that\u00a0<strong>Column<\/strong>\u00a0is set as a time period (e.g. Timestamp,\u00a0startDate).\u00a0<\/li>\n<li>To hide the x-axis and gridlines, set <strong>Visibility<\/strong>\u00a0to <em>None.<\/em>\u00a0<\/li>\n<\/ul>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/sparkline-455-x.png\" rel=\"lightbox-5\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-36784\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/sparkline-455-x.png\" alt=\"\" width=\"318\" height=\"318\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/sparkline-455-x.png 318w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/sparkline-455-x-150x150.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/sparkline-455-x-252x252.png 252w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/sparkline-455-x-24x24.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/sparkline-455-x-36x36.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/sparkline-455-x-48x48.png 48w\" sizes=\"auto, (max-width: 318px) 100vw, 318px\" \/><\/a><\/p>\n<p class=\"intro-text\"><strong>Left Y Axis options<\/strong>:<\/p>\n<ul class=\"intro-text\">\n<li>To hide the y-axis and gridlines, set <strong>Visibility<\/strong>\u00a0to <em>None.<\/em>\u00a0<\/li>\n<li>Adjust the <strong>Min<\/strong> and <strong>Max<\/strong> values to fit the trend line.<\/li>\n<li>If the original line chart contained a right y-axis, do the same above two actions for that axis.<\/li>\n<\/ul>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/sparkline-455-y.png\" rel=\"lightbox-6\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-36785\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/sparkline-455-y.png\" alt=\"\" width=\"321\" height=\"291\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/sparkline-455-y.png 321w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/sparkline-455-y-150x136.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/sparkline-455-y-24x22.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/sparkline-455-y-36x33.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/sparkline-455-y-48x44.png 48w\" sizes=\"auto, (max-width: 321px) 100vw, 321px\" \/><\/a><\/p>\n<p class=\"intro-text\"><strong>Other<\/strong> <strong>options<\/strong>:<\/p>\n<p class=\"intro-text\">The options for hiding the legend, comments, and tooltips are disabled by default, so you should not have to do anything here.<\/p>\n<ul class=\"intro-text\">\n<li>Ensure that <strong>Legend<\/strong>, <strong>Range Selector<\/strong>, and <strong>Hairline<\/strong> are set to <em>None.<\/em><\/li>\n<li>Ensure that <strong>Comments<\/strong> are not enabled.<\/li>\n<\/ul>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/sparkline-other2.png\" rel=\"lightbox-7\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-35508 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/sparkline-other2.png\" alt=\"\" width=\"319\" height=\"215\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/sparkline-other2.png 319w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/sparkline-other2-150x101.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/sparkline-other2-24x16.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/sparkline-other2-36x24.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/sparkline-other2-48x32.png 48w\" sizes=\"auto, (max-width: 319px) 100vw, 319px\" \/><\/a><\/p>\n<hr \/>\n<h2 class=\"page-subheading\">Adding a Sparkline to a Table Layout<\/h2>\n<p class=\"intro-text\">Follow the steps below to configure a sparkline in a Table Layout.<\/p>\n<p class=\"left-bar\">For more detailed steps, follow <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/table-layout\/#Tutorial_7_Sparkline\">Tutorial 7<\/a> in the Table Layout article.<\/p>\n<p class=\"intro-text\"><strong>Step 1: Add Table Layout<\/strong><\/p>\n<ol class=\"intro-text\">\n<li>Add a Table Layout component onto your page.<\/li>\n<li>Configure it to use a dataset query.<\/li>\n<li>Add an extra column to the Table Layout, and give it a header.\u00a0This will be used for the sparkline.<\/li>\n<\/ol>\n<p class=\"intro-text\"><strong>Step 2: Add a Chart to the Table Layout<\/strong><\/p>\n<ol class=\"intro-text\">\n<li>Add a Chart component onto the new column on your Table Layout.<\/li>\n<li>Configure it to use a dataset query.\u00a0The dataset should contain periodic data for each entity that can be found in the Table Layout's Data. E.g. If the Table Layout's data has five entities, the Chart's dataset should have the same five entities, each with 12 rows of data (for 12 months).<\/li>\n<\/ol>\n<p class=\"intro-text\"><strong>Step 3: Configure the Chart as a Sparkline<\/strong><\/p>\n<ol class=\"intro-text\">\n<li>Follow the above steps for configuring a sparkline, with the following difference:<\/li>\n<li>When configuring the <strong>Line Series<\/strong>, configure the <strong>Filter Column<\/strong> and <strong>Filter Value<\/strong> to filter for the related row, using <em>Context<\/em> data from the Table Layout's data.<\/li>\n<\/ol>\n<p class=\"intro-text\"><strong>Step 4: Style the Table Layout<\/strong><\/p>\n<ul class=\"intro-text\">\n<li>Apply a style that is suitable for displaying the sparkline.<\/li>\n<\/ul>\n<hr \/>\n<h2 class=\"page-subheading\">Release History<\/h2>\n<ul class=\"intro-text\">\n<li class=\"overview\">Sparklines 4.5.5 (this release)\n<ul class=\"overview\">\n<li>Colour Matcher has been removed from Series options.<\/li>\n<li>Enable Gridlines has been removed from X Axis and Y Axis options, and the functionality included in the Visibility options.<\/li>\n<li>Legend options are now in a drop-down list.<\/li>\n<li>Range Selector options are now in a drop-down list.<\/li>\n<\/ul>\n<\/li>\n<li><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/all-about-charts\/sparklines\/sparklines-4-5-4\/\">Sparklines 4.5.4<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>A Sparkline is a small Chart component without gridlines, often used to show data trends amidst text (in a table) or alongside images, labels and lines in a process mimic or schematic. This page explains how to add a sparkline to a page.<\/p>\n<p class=\"continue-reading-button\"> <a class=\"continue-reading-link\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/all-about-charts\/sparklines\/\">Read more<i class=\"crycon-right-dir\"><\/i><\/a><\/p>\n","protected":false},"author":1,"featured_media":35477,"parent":24353,"menu_order":2,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":"","_members_access_role":[],"_members_access_error":""},"categories":[4],"tags":[15,562],"class_list":["post-24334","page","type-page","status-publish","has-post-thumbnail","hentry","category-explainer","tag-charts-2","tag-sparkline","Version-4-5-5","Product-ex"],"_links":{"self":[{"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/24334","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/comments?post=24334"}],"version-history":[{"count":2,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/24334\/revisions"}],"predecessor-version":[{"id":66999,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/24334\/revisions\/66999"}],"up":[{"embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/24353"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/media\/35477"}],"wp:attachment":[{"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/media?parent=24334"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/categories?post=24334"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/tags?post=24334"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}