{"id":35476,"date":"2018-01-15T11:59:40","date_gmt":"2018-01-15T03:59:40","guid":{"rendered":"http:\/\/localhost\/help\/?page_id=35476"},"modified":"2018-10-12T16:22:02","modified_gmt":"2018-10-12T08:22:02","slug":"sparklines-4-5-4","status":"publish","type":"page","link":"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/all-about-charts\/sparklines\/sparklines-4-5-4\/","title":{"rendered":"Sparklines (4.5.4)"},"content":{"rendered":"<p class=\"intro-text\"><\/p>\n<p class=\"left-bar\">This article applies to version 4.5.4 and earlier of P2 Explorer. For the latest, see <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/all-about-charts\/sparklines\/\">Sparklines<\/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><strong><em><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Sparklines-on-a-schematic.png\" rel=\"lightbox-0\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-21159 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Sparklines-on-a-schematic.png\" alt=\"\" width=\"391\" height=\"340\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Sparklines-on-a-schematic.png 391w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Sparklines-on-a-schematic-150x130.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Sparklines-on-a-schematic-24x21.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Sparklines-on-a-schematic-36x31.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Sparklines-on-a-schematic-48x42.png 48w\" sizes=\"auto, (max-width: 391px) 100vw, 391px\" \/><\/a><\/em><\/strong><\/p>\n<\/td>\n<td>\n<p><strong><em>Sparklines on a Table Layout:<\/em><\/strong><\/p>\n<p><strong><em><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Example-of-a-Table-Layout-2.png\" rel=\"lightbox-1\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-20553 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Example-of-a-Table-Layout-2.png\" width=\"494\" height=\"191\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Example-of-a-Table-Layout-2.png 494w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Example-of-a-Table-Layout-2-150x58.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Example-of-a-Table-Layout-2-24x9.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Example-of-a-Table-Layout-2-36x14.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Example-of-a-Table-Layout-2-48x19.png 48w\" sizes=\"auto, (max-width: 494px) 100vw, 494px\" \/><\/a><\/em><\/strong><\/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\">You need to first configure a chart to use data, ideally one that has values over time (hours, weeks, months of a year, or similar periodic data) 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.<\/p>\n<p class=\"intro-text\">When you have the chart set up, you need to configure it 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=\"instruct\">Once you have configured a Line Chart, follow the steps below to turn it into a sparkline.<\/p>\n<p class=\"intro-text\"><strong>Series options<\/strong>:\u00a0<\/p>\n<ul class=\"intro-text\">\n<li>Click <strong>Line Series<\/strong> to expand this in the editor.<\/li>\n<li><strong>Y Column<\/strong>: Select <em>DataColumn<\/em> in the first drop-down list, and choose the column you want to trend (e.g. <em>OilActualSum<\/em>) in the second.<\/li>\n<li>Choose a colour for the series (<strong>Colour<\/strong> or <strong>Colour Matcher<\/strong>).<\/li>\n<li>Make the line slightly thicker (<strong>Thickness<\/strong>).<\/li>\n<li>Click <strong>Line Series<\/strong> again to collapse it in the editor.<\/li>\n<\/ul>\n<p class=\"intro-text\"><strong>X Axis options<\/strong>:<\/p>\n<ul class=\"intro-text\">\n<li>Click <strong>X Axis<\/strong> to expand this in the editor.<\/li>\n<li><strong>Column<\/strong>: Select <em>DataColumn<\/em> in the first drop-down list, and choose the time period column (e.g. <em>Month<\/em>) in the second.\u00a0<\/li>\n<\/ul>\n<p class=\"intro-text\">Hide the X Axis and Gridlines:<\/p>\n<ul class=\"intro-text\">\n<li>Still in the <strong>X Axis<\/strong> section, clear the <strong>Visible<\/strong> checkbox.\u00a0<\/li>\n<li>Clear the <strong>Enable Gridlines<\/strong> checkbox.\u00a0<\/li>\n<li>Click <strong>X Axis<\/strong> again to collapse it in the editor.<\/li>\n<\/ul>\n<p><strong>Y Axis options<\/strong>:<\/p>\n<p class=\"intro-text\">Hide the Y Axis and Gridlines:<\/p>\n<ul class=\"intro-text\">\n<li>Click <strong>Left Y Axis<\/strong> to expand this in the editor.<\/li>\n<li>Clear the <strong>Visible<\/strong> checkbox.\u00a0<\/li>\n<li>Clear the <strong>Enable Gridlines<\/strong> checkbox.\u00a0<\/li>\n<\/ul>\n<p class=\"intro-text\">Set the Min and Max:<\/p>\n<ul class=\"intro-text\">\n<li>Still in the <strong>Y Axis<\/strong> section, add a minimum (<strong>Min<\/strong>) and maximum (<strong>Max<\/strong>) value (if you know what this is, based on your dataset). This could be a fixed number or a data column.<\/li>\n<li>Click the <strong>Left Y Axis<\/strong> again to collapse it in the editor.<\/li>\n<\/ul>\n<p><strong>Other<\/strong> <strong>options<\/strong>:<\/p>\n<p class=\"intro-text\">Hide the Legend and Tooltips (disabled by default).<\/p>\n<ul class=\"intro-text\">\n<li>Clear the <strong>Legend<\/strong> checkbox.<\/li>\n<li>Clear the <strong>Tooltip<\/strong> checkbox.<\/li>\n<\/ul>\n<hr \/>\n<h2 class=\"page-subheading\">Adding a Sparkline to a Table Layout<\/h2>\n<p class=\"intro-text\">These steps provide an outline only. Please read the individual help topics if you require more detail: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/table-layout\/\">Table Layout<\/a>, <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/charts\/\">Charts<\/a>.<\/p>\n<p class=\"left-bar\">For more detailed steps, follow the tutorial in the <em>Table Layout<\/em> tutorial: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/table-layout\/#Tutorial_2_Sparkline_on_a_Table_Layout\">Tutorial: Sparkline on a Table Layout<\/a>.<\/p>\n<p class=\"instruct\">Follow the steps below to configure a sparkline in a Table Layout.<\/p>\n<p class=\"intro-text\"><strong>Step 1: Add Table Layout<\/strong><\/p>\n<p class=\"intro-text\">1. Drop a Table Layout component onto your page.<\/p>\n<p class=\"intro-text\">2. Configure it to use a dataset query.<\/p>\n<p class=\"intro-text\">3. Add an extra column to the Table Layout, to be used for the sparkline. Give it a header.<\/p>\n<p class=\"intro-text\"><strong>Step 2: Add a Chart to the Table Layout<\/strong><\/p>\n<p class=\"intro-text\">1. Drop a Chart component onto the new column on your Table Layout.<\/p>\n<p class=\"intro-text\">2. Configure it to use a dataset query.<\/p>\n<p class=\"note\"><strong>Note: <\/strong>The dataset should contain periodic data for each entity that can be found in the Table Layout's Data. <em>For example<\/em>, 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).<\/p>\n<p class=\"intro-text\"><strong>Step 3: Configure Chart as a Sparkline<\/strong><\/p>\n<p class=\"intro-text\">Follow the steps for configuring a sparkline (shown above), with the following difference:<\/p>\n<p class=\"instruct\">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.<\/p>\n<p class=\"intro-text\"><strong>Step 4: Style the Table Layout<\/strong><\/p>\n<p class=\"intro-text\">If you have a table style with wide rows, apply this style to fit the Sparkline.<\/p>\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\/sparklines-4-5-4\/\">Read more<i class=\"crycon-right-dir\"><\/i><\/a><\/p>\n","protected":false},"author":1,"featured_media":35477,"parent":24334,"menu_order":3,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":"","_members_access_role":[],"_members_access_error":""},"categories":[4],"tags":[15,562],"class_list":["post-35476","page","type-page","status-publish","has-post-thumbnail","hentry","category-explainer","tag-charts-2","tag-sparkline","Version-4-5-0","Version-4-5-1","Version-4-5-2","Version-4-5-3","Version-4-5-4","Product-ex"],"_links":{"self":[{"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/35476","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=35476"}],"version-history":[{"count":0,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/35476\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/24334"}],"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=35476"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/categories?post=35476"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/tags?post=35476"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}