{"id":400,"date":"2013-10-08T17:56:00","date_gmt":"2013-10-08T17:56:00","guid":{"rendered":"https:\/\/staging.infragistics.com\/blogs\/?p=400"},"modified":"2025-02-25T13:16:58","modified_gmt":"2025-02-25T13:16:58","slug":"html5-sparkline-chart","status":"publish","type":"post","link":"https:\/\/www.infragistics.com\/blogs\/html5-sparkline-chart","title":{"rendered":"HTML5 Sparkline Chart for Data-Intense Visualizations"},"content":{"rendered":"\n

It\u2019s a scaled-down, simplified version of your normal chart that is excellent for quick analysis of a lot of data and trend-spotting. For the more curious ones, the inventor of the Sparkline hosts a Q&A board on Sparkline theory and practice<\/a> where you can find some general DO’s and DON’Ts as well as various scenarios people found Sparklines useful in. There\u2019s also a very visually-rich blog on Sparklines in the Excel Blogs<\/a> if you want more. The typical example is \u201cinline with text\u201d, however there are multiple cases where it would be useful as a part of a grid. At least from what I have seen, I accept the term as a synonym for small visualization of any kind suitable \u2013 lines and areas, of course, but also columns and bars, with\/or without axes, ranges, markers, trend lines. It\u2019s not the plethora of switches and knobs the Data Chart<\/a> has, but it can be just as data-intensive while keeping it small. Just as note \u2013 these charts are still meant to be simple and even if you can show every extra bit of information on one, it might not always be the best design!<\/p>\n\n\n\n

The Ignite UI Sparkline<\/h2>\n\n\n\n

After a series of Data Visualization controls have made their appearance in our Ignite UI product \u2013 the mighty Data Chart, then Pie<\/a>, the Geographic map<\/a>, translated from C# to jQuery, it was only logical to expand more. The Sparkline is a part of another wave of controls taking the HTML5 Canvas route, which means no plugins and available on most mobile devices. This specific chart is designed to be lightweight, so don\u2019t expect too much extra bulk \u2013 single series supported with 4 display types and a single set of axes with limited amount of labeling and so on.<\/p>\n\n\n\n

The default is line series:<\/p>\n\n\n\n

$(\"#Spark0\").igSparkline({\n    displayType: \"line\",\n    dataSource: employees,\n    valueMemberPath: \"SickLeaveHours\",\n    height: \"50px\",\n    width: \"50%\",\n    normalRangeMaximum: 49,\n    normalRangeMinimum: 45,\n    normalRangeVisibility: \"visible\",\n    verticalAxisVisibility: \"visible\",\n    highMarkerVisibility: \"visible\",\n    lowMarkerVisibility: \"visible\"\n});<\/pre>\n\n\n\n
\"Line<\/figure>\n\n\n\n
Swap the line for area and markers for another axis:<\/p>\n\n\n\n
\"Area<\/figure>\n\n\n\n
Column series with a trend line:<\/p>\n\n\n\n
\"Column<\/figure>\n\n\n\n
and Win \/ Loss :<\/p>\n\n\n\n
\"Win\/Loss<\/figure>\n\n\n\n
Both bar charts use the same data.<\/em> The difference between is that Win-Loss is on a Boolean scale, which is to say that the points presented don\u2019t match their values \u2013 it\u2019s either full gain, full loss or neutral<\/em>.<\/p>\n\n\n\n
There are a few types of markers and 13 different trend line types and there\u2019s a very nice igSparkline Overview<\/a> article with visuals for everything, so you totally need to check that one out in case you haven\u2019t seen all this control has to offer. Of course, as you would notice in the linked articles, the Sparkline is mainly intended for inline and the ones above are somewhat bigger. With some tweaking you can make them work inline as well:<\/p>\n\n\n\n
\"Sparklines<\/figure>\n\n\n\n
It\u2019s all in the name of having meaningful visualization for very high amounts of data squished in a very tiny space and make the most out of that. So, yes inline with text is a great and so is inside grid cells where such a chart can provide the \u2018gist\u2019 of a whole another table in a single cell and be easier to read as well. More on that on a follow up blog I have coming up real soon!<\/p>\n\n\n\n
Tips and Tricks<\/h2>\n\n\n\n
So here comes an assortment of things you might find interesting and useful. Like for example, the fact that  values and member paths are optional \u2013 the data source can be a simple array of numbers and then you don\u2019t need to specify a value path. Label path is only needed when you are displaying an axis.<\/p>\n\n\n\n
Beautify your data: Styling Guide<\/h3>\n\n\n\n
Yet another interesting topic, as it is still a Data Visualization<\/strong> control and it\u2019s intended for the Web. So I\u2019m hoping you\u2019ve most seen the Styling igDataChart with Themes<\/a> and perhaps for some other controls and if you are wondering if the Sparkline can do the same\u2026 Why yes, yes it can! And here comes a nice list of CSS classes that can be used to modify the looks of this control.<\/p>\n\n\n\n
All of the classes are prefixed with \u201cui-sparkline-\u201d and state what do they apply to \u2013 \u201csparkpath\u201d, \u201cnegativesparkpath\u201d, \u201ctrendline\u201d, \u201cmarkers\u201d, \u201cfirstmarker\u201d, \u201clastmarker\u201d, \u201chighmarker\u201d, \u201clowmarker\u201d, \u201cnegativemarkers\u201d, \u201crange\u201d. For example, you have the spark path, the high and low markers:<\/p>\n\n\n\n
\"A<\/figure>\n\n\n\n
The CSS background color along with CSS opacity, if you provide it, map to the brush color of the element in question. The border width (and width alone, regardless of this example showing a shorthand declaration) corresponds to the brush size. I think it\u2019s visible enough to see that the high marker is bigger than the low one. Note that almost everything has a minimum value of 1.5px and will merely ignore lower values. There values are available for all markers, lines and range:<\/p>\n\n\n\n
\/* \"background-color\", \"opacity\", \"border-width\" apply *\/\n.ui-sparkline-sparkpath {\n    background:#00AADE;\n    border:1.5px solid\n}\n.ui-sparkline-negativesparkpath {\n    background:#D0284C;\n    border:1px solid\n}\n.ui-sparkline-trendline {\n    background:#555;\n    border:2px solid\n}\n.ui-sparkline-markers {\n    background:#36C0F3;\n    border:3px solid\n}\n.ui-sparkline-firstmarker {\n    background:#19994F;\n    border:5px solid\n}\n.ui-sparkline-lastmarker {\n    background:#FCB025;\n    border:5px solid\n}\n.ui-sparkline-highmarker {\n    background:#BFE107;\n    border:4px solid\n}\n.ui-sparkline-lowmarker {\n    background:#AF39FF;\n    border:3px solid\n}\n.ui-sparkline-negativemarkers {\n    background:#E5516F;\n    border:3px solid\n}\n.ui-sparkline-range {\n    background:gray;\n    opacity:.2\n}<\/pre>\n\n\n\n
In terms of columns the path is obviously applied as fill as well. For the axes you have slightly different rules \u2013 border corresponds to the axis stroke this time with color taken into account as well, there\u2019s obviously no background, however font and color for the axis labels are used:<\/p>\n\n\n\n
\/* \"border-width\", \"border-color\", \"color\", \"font\" apply *\/\n.ui-sparkline-axis-x {\n    font-family:\"Segoe UI\", Arial, sans-serif;\n    border:2px solid #989EA3;\n    color:#4B4B4D\n}\n.ui-sparkline-axis-y {\n    font-family:\"Segoe UI\", Arial, sans-serif;\n    border:2px solid #989EA3;\n    color:#4B4B4D;\n}<\/pre>\n\n\n\n
An important note<\/strong> is that those classes correspond to the control options you see in the API, however they are taken into account during initialization. So it\u2019s nice to have a separation of concerns between visuals and functionality.. and let designers pick better colors than I would, for example \ud83d\ude42 However, if you want to modify the looks in runtime you will have to use the jQuery options.<\/p>\n\n\n\n
Misc<\/h3>\n\n\n\n
As you may have noticed in the snippets, the width of the Sparkline can be set in percentages and, like the other Ignite UI charts, it has a built-in handling of resizing. That means this chart is good to go for Responsive<\/strong> design and also will work well inside containing elements with varying size  – that will play an important role when we try the chart as a grid cell.<\/p>\n\n\n\n
Also, since the scenario that makes the most sense (regardless of the bad data in my demos) is for analyzing trends, which means continuity and usually time-bound axis \u2013 and we all know the hell of JavaScript dates\u2019 default string output. It is by far not appropriate for such a tiny chart, however you can format the labels<\/strong> to your liking with a simple function. It takes the \u201cwould\u2019ve-been\u201d value as parameter and should return the desired new label value instead. Keep in mind this event can and probably will fire multiple times and will also fire for the other axis (if you have one visible) \u2013 in which case, always check if you are formatting the right value. And one last thing \u2013 date values are already converted to a string when they reach you, thus:<\/p>\n\n\n\n
$(\"#Spark1\").igSparkline({\n    labelMemberPath: \"HireDate\",\n    verticalAxisVisibility: \"visible\",\n    horizontalAxisVisibility: \"visible\",\n    formatLabel : function formatFunction(val) {\n        if (typeof val === \"string\") {\n            \/\/ remove time from the label\n            val = val.split(\"T\")[0];\n        }\n        return val;\n    }\n    \/\/...\n});<\/pre>\n\n\n\n
Closing & Resources<\/h2>\n\n\n\n
I really hope the information above will come in handy. There\u2019s a link to demos below with different types of Sparkline visuals, examples for inline setting, initializations, tooltip event handling and styling. I have one more post building on this information coming up soon, so keep an eye out for that one too.<\/p>\n\n\n\n