JavaScript Sparklines

In this blog entry, we look at the ShieldUI Sparklines visualization. A typical presentation looks like this:



Sparklines are a special lightweight datavisualization graph, which is used primarily to display trends.
This setup can be easily handled, by using the ShieldUI charting component.
The main idea is to remove all unnecessary elements and leave only the graph. Depending on the particular setup, this may include:

-the X and Y axes
-the primary header
-the legend
-any plot strip lines

Although this can be accomplished for almost any series type, it is most commonly used for area, line and bar series. The code below
demonstrates the functionality in question with a line series type:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63

$("#sparkLine1").shieldChart({         theme: ThemeChooser.theme,         exportOptions: {             image: false,             print: false         },         tooltipSettings: {             chartBound:true,             axisMarkers: {                 enabled: true,                 mode: 'x'             },             customHeaderText: '',             customPointText: function (point, chart) {                 return shield.format(                     '{value}',                     {                         value: point.y                     }                 );             },           },         chartAreaPaddingTop: -7,         chartLegend: {             enabled: false         },         seriesSettings: {             line: {                 activeSettings: {                     pointHoveredState: {                         enabled: false                     }                 },                 pointMark: {                     enabled: false                 }             }         },         axisX: {             axisTickText: {                 enabled: false             },             plotStripWidth: 0,             drawWidth: 0,             ticksWidth: 0,             ticksHeight: 0         },         axisY: {             axisTickText: {                 enabled: false             },             plotStripWidth: 0,             drawWidth: 0,             ticksWidth: 0         },         dataSeries: [{             seriesType: "line",             data: [123, 345, 234, 321, 435, 234, 123, 654, 456,             342, 334, 223, 212, 453, 432, 342, 234, 342, 237]         }         ]     });