Globally setting box-sizing to border-box causes tooltip to be displayed incorrectly. This can be fixed by the following css after bootstrap. This may become an issue as box-sizing is more frequently used.

.jqstooltip{
    box-sizing: content-box;
}

Can you available the distribution script (jquery.sparkline.js) on github? I use bower as dependency manager and he seeks scripts from github, which does not have the script in question. Thanks

What do you think about replacing build system based on makefile and shell commands with something cross-platform? I am mostly talking about Windows users who don't have these great tools.

I know it is a big change in workflow but it has two advantages:

1. It will be easier to contribute for windows users.
2. Nowadays dependency management with NPM is really getting traction. It is especially usefull for big projects. There is jquery-sparkline package published on npmjs.com but is not possible to install it on windows due to the fact it tries to build from sources with make script.

NPM itself may be a good candidate for the build tool because it has a way to explicitly specify tools as dependencies (no need to install uglify-js separately) and in general is convenient for javascript projects.

What do you think regarding it?

Also added latest release files.

Visit http://bower.io for installation instructions.

After you have installed bower, you need to register the package: bower register jquery.sparkline git://github.com/gwatts/jquery.sparkline.git

Minimum value from array are not displayed correctly (there is a gap).

See example: http://jsfiddle.net/8thrB/ ("20" is display like a zero because 20 is the smallest value from an array)

An exception gets thrown inside of the initStyles function when the script is loaded dynamically.

This is because the following line:

$(initStyles);

will execute immediately if the dom is ready. If it executes immediately, the addCss function has not yet been defined.

The fix is to move $(initStyles); after addCss is properly defined.

I have a stacked bar chart, and have noticed that the proportions of the charts seem to be incorrect.

The light blue bar has a value of 30, while the dark blue bar has a value of 15. Shouldn't the dark bar be exactly half the height of the light blue bar? Otherwise it would seem to give you an incorrect visual representation of the data.

I have sparkline chart having three components (101, 0, 100). It plots perfectly on chrome but there is a "un" instead of the chart on IE and in Fire Fox. IE version is 7 and Fire fox version is 16.0.2

Hi,

And first thanks for this plugin. It seems there is a bug using it with tabs() function. Indeed, sparkline is working well on the active tab, but not working when clicking others tabs.

I've seen the problem also described her in SO : http://stackoverflow.com/questions/13952354/sparklines-not-drawing-when-using-bootstrap-and-using-tabs

The proposed workaround is not working. It just hides the span containing values. Any help/clue would be welcome.

(I'm using version 2.1.2)

Thanks

this is an awsome plugin,

I am having trouble getting $.sparkline_display_visible() to show my sparklines on display:none div's

I am using: sparklines 2.0 jquery 1.7.1

I noticed in the code: // jQuery 1.3.0 completely changed the meaning of :hidden :-/ $.fn.jquery < '1.3.0'

If I change that to: $.fn.jquery >= '1.3.0'

$.sparkline_display_visible() draws the graph without any issues, is this a typo or am I doing something wrong on my end.

thank you for all your hard work!

I'm seeing an "Unspecified error" in IE 8 sporadically when loading.

The section of code flagged looks to be the VML code at: if (document.namespaces && !document.namespaces.v) { $.fn.sparkline.hasVML = true; document.namespaces.add('v', 'urn:schemas-microsoft-com:vml', '#default#VML'); } else { $.fn.sparkline.hasVML = false; }

The behavior seems pretty consistent with what I see described here: http://drupal.org/node/613002

One fix that I can see from what's described above would be to make hasVML a function instead of a boolean and call it when needed (potentially caching the result after the first call). That way it's less likely to get called before document.ready / document.load.

If the canvas element is scaled by window.devicePixelRatio and then scaled back down by the CSS properties the results look better on HiDPI displays. Given the small nature of most sparklines, this is pretty huge. #nopun

Here are two images from my use case. First with stock code...

And here with a modified _calculatePixelDims...

Those results come from this incomplete patch:

index 721e03b..805aa12 100644
--- a/src/site/jquery.sparkline.js
+++ b/src/site/jquery.sparkline.js
@@ -2626,19 +2626,13 @@
          */
         _calculatePixelDims: function (width, height, canvas) {
             // XXX This should probably be a configurable option
-            var match;
-            match = this._pxregex.exec(height);
-            if (match) {
-                this.pixelHeight = match[1];
-            } else {
-                this.pixelHeight = $(canvas).height();
-            }
-            match = this._pxregex.exec(width);
-            if (match) {
-                this.pixelWidth = match[1];
-            } else {
-                this.pixelWidth = $(canvas).width();
-            }
+            const heightMatch = this._pxregex.exec(height);
+            const pixelHeight = heightMatch ?  Number(heightMatch[1]) : $(canvas).height();
+            const widthMatch = this._pxregex.exec(width);
+            const pixelWidth = widthMatch ?  Number(widthMatch[1]) : $(canvas).width();
+            const dpr = window.devicePixelRatio || 1;
+            this.pixelHeight = Math.round(pixelHeight * dpr);
+            this.pixelWidth = Math.round(pixelWidth * dpr);
         },
 
         /**
@@ -2710,7 +2704,7 @@
             this.shapes = {};
             this.shapeseq = [];
             this.currentTargetShapeId = undefined;
-            $(this.canvas).css({width: this.pixelWidth, height: this.pixelHeight});
+            $(this.canvas).css({width, height});
         },
 
         _getContext: function (lineColor, fillColor, lineWidth) {

I'd be happy to complete the work on this (hover over is broken) and write it using more compatible code (e.g. no const) if this project is still active (last commit 2013). Otherwise I'll probably fork and put my changes up there.

I created a bar chart with 3 bars. The first is 10 and the other bars are 5 Here's the result: http://prntscr.com/ptjyi8 The bars with a value of 5 should have a height of 50% of the bar with a value of 10, but it doesn't

The bug can be reproduced using your demo.

I would appreciate it if you can fix this bug. Thanks!

@gwatts

I have an issue with rendering a single value baseline on top of a line chart. It is basically placing the second line at the bottom of the sparkline plot even if the values are in the middle of the first dataset.

I have managed to replicate it here, soI knowit'snot code related, any help is greatly appreciated!:

https://jsfiddle.net/fh9m4gb3/2/

                    $("#sparkline").sparkline(stream, {

                        spotColor: color,
                        type: 'line',
                        width: '100%',
                        height: '100%',
                        lineColor: color,
                        fillColor: '#BABABA40',
                        minSpotColor: '#C90000',
                        maxSpotColor: '#002AB3',
                        spotRadius: 4,
                        disableHighlight: true,
                        disableTooltips: true,
                        changeRangeMin: changeMinimum,
                        chartRangeMax: chartRangeMaximum,
                        drawNormalOnTop: false

                    });

                    if (winLossBarrier != 'no open trade') {
                        tradeLine = [winLossBarrier, winLossBarrier, winLossBarrier,
                            winLossBarrier, winLossBarrier, winLossBarrier, winLossBarrier,
                            winLossBarrier, winLossBarrier, winLossBarrier, winLossBarrier,
                            winLossBarrier, winLossBarrier, winLossBarrier, winLossBarrier,
                            winLossBarrier, winLossBarrier, winLossBarrier, winLossBarrier,
                            winLossBarrier, winLossBarrier, winLossBarrier, winLossBarrier,
                            winLossBarrier, winLossBarrier, winLossBarrier, winLossBarrier,
                            winLossBarrier, winLossBarrier, winLossBarrier, winLossBarrier,
                            winLossBarrier, winLossBarrier, winLossBarrier, winLossBarrier,
                            winLossBarrier, winLossBarrier, winLossBarrier, winLossBarrier,
                            winLossBarrier, winLossBarrier, winLossBarrier, winLossBarrier,
                            winLossBarrier, winLossBarrier, winLossBarrier, winLossBarrier,
                            winLossBarrier, winLossBarrier, winLossBarrier, winLossBarrier, winLossBarrier,
                            winLossBarrier, winLossBarrier, winLossBarrier, winLossBarrier, winLossBarrier,
                            winLossBarrier, winLossBarrier, winLossBarrier, winLossBarrier, winLossBarrier,
                            winLossBarrier, winLossBarrier, winLossBarrier, winLossBarrier, winLossBarrier,
                            winLossBarrier, winLossBarrier, winLossBarrier, winLossBarrier, winLossBarrier,
                            winLossBarrier, winLossBarrier, winLossBarrier, winLossBarrier, winLossBarrier,
                            winLossBarrier, winLossBarrier, winLossBarrier, winLossBarrier, winLossBarrier,
                            winLossBarrier, winLossBarrier, winLossBarrier, winLossBarrier, winLossBarrier,
                            winLossBarrier, winLossBarrier, winLossBarrier, winLossBarrier
                        ]

                        $("#sparkline").sparkline(tradeLine, {

                            spotColor: false,
                            type: 'line',
                            width: '100%',
                            height: '100%',
                            lineColor: '#002AB3',
                            fillColor: false,
                            minSpotColor: false,
                            maxSpotColor: false,
                            spotRadius: 4,
                            disableHighlight: true,
                            disableTooltips: false,
                            changeRangeMin: changeMinimum,
                            chartRangeMax: chartRangeMaximum,
                            composite: true,

                            drawNormalOnTop: false

                        });