Using the pie chart in IE 7/8, if you have a value array with a 0 value present, like [24,37,0,12], you'll get as many "undefined" text strings behind the pie chart as there are 0 values in the array. This seems like a new bug introduced in 2.0, as it wasn't around in 1.6.

Browsers I know it impacts:
Chrome 22.0.1229.94
Firefox 15.0.1
IE 8

How to reproduce:

1. Goto the sparkline website: http://omnipotent.net/jquery.sparkline/#s-about
2. In the try-it-out section select a line chart and use the following values: 104,6,7,null,null,null,null
3. Notice the floating orange dot to the right of the sparkline

What I expect:
No floating orange dot. Like in the case where you used these values for the sparkline: 14,6,7,null,null,null,null

I'm not sure why certain values create the floating dot, but it looks like a bug to me. Thanks in advance for looking into this!

Hi there,

I am considering using boxplots to 'summarize' historical data that I would otherwise represent as a bar chart with the horizontal axis as time increasing from left to right. It would be necessary in that case to have a boxplot that was vertical, rather than the horizontal one currently available.

Please let me know if this sounds like a use case that may eventually be given some attention.

Thanks!

For stacked bar charts the colors can be an array, how about adding this to bar charts so that each bar is a different color. Is this possible?

The use case is basically to have bidirectionnal highlighting between a table (list, or map) and the chart.

Currently it is very easy to highlight an item in a list when an element is hovered in the chart (using sparklineRegionChange event).

However there seems to be no way to highlight an element in the chart programmatically (like when this element is hovered in a list)

An example with a map :

• http://www.gpsies.com/map.do?fileId=bnxkdybmzytdhghj

It'd be nice to be able to alter the line and fill colors on a line graph based on range maps, much in the same way you can specify a colorMap on bar graphs.

Other than that, Sparkline's are great 👍

Love the stacked bars feature, but it would be great if it could support null values like the regular bar chart.
Right now it seems null values are interpreted as 0, so there are thin lines being displayed at the bottom of a stacked bar (or at the top) where there should be none.

Here is the jsfiddle
http://jsfiddle.net/vVyed/

Thanks

I'm running into situations where the chart tooltip is not on top of the chart. Can a change be made to always give the tooltip a very high z-index?

Provide a means to access min, max, normal, etc. after a sparkline is rendered. Users could use this to easily implement additional features in composite mode, like trend lines, etc.

First I would like to say awesome work on the plug-in, it is brilliant! I would love to see the ability to apply a high and low threshold color to the discrete threshold sparkline. This could be done with the addition of a greater than threshold and greater than threshold color. Currently you can only supply a less than threshold which allows you to only color code one set of outlier datapoints high or low depending on how you setup the colors. The datasets I want to display will have high and low outlier data points with an acceptable mid-range which would use the "Line Color" setting.

Cheers,
Luke

I believe that the use of '$.browser' in the plugin is causing an issue with jQuery 1.9.0.

The tooltip on charts isn't (usually) displayed when the mouse hovers onto the chart from the left side w/ the latest version of Crhome. Seems to happen on maybe 75% of mouseovers from the left side of the chart.

This issue can be reproduced on both the NASDAQ/DOW charts in the header of:

http://omnipotent.net/jquery.sparkline/#s-docs

Info about the Chrome version:

https://aboutmybrowser.com/HEXvLFWH

In jquery.sparkline 1.5.1, targetColor and performanceColor could be set to null, which resulted in them being invisible/transparent, so that a bullet chart could be used just a sequence of blocks of color. In 1.6 and later, this still works fine in Chrome, Firefox and IE9/10, but a thin black line 2px wide is displayed on the left in IE7/8. I've created a minimal example here:

<!DOCTYPE html>
<html>
 <head>
  <title>Minimal bullet chart bug example</title>
 </head>
 <body>
  <span class="box"></span>
  <script src="jquery-1.7.2.js" type="text/javascript"></script>
  <script src="jquery.sparkline-2.1.js" type="text/javascript"></script>
  <script type="text/javascript">
   var box = $('.box');
   box.sparkline([0,0,9,6,3], {
    type: 'bullet',
    targetColor: null,
    performanceColor: null
   });
  </script>
 </body>
</html>

In Chrome, Firefox and IE9/10, this looks like this:

but in IE7/8 there's a black line on the left like this:

I don't know if the functionality was deliberate, but it was useful.

Hi,

I Dont know if this is the place to put this "request/sugestion", but here i go.

As the title says, would be nice if we can highligth an slice of chart, externaly, without the plugin mouse events.
Ex:
I have this list of items ( Some UL ), each item have an corresponding slice on the chart, when i hover the chart, i got the chart events and highlight the corresponding LI, but not the inverse.

Something like $('#chart').sparkline('highligth',sliceIndex);

Thank you, sorry by my crap english.
Awesome plugin.

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!

It'd be great to have a gradient fill for charts, as opposed to the solid color that's available now. One could imagine specifying the gradient using CSS3 syntax, on the order of:

$(...).sparkline(data, { fillBackground: "linear-gradient(center top, #000 0, #FFF 100%, ... }

Hi

We are using jquery sparkline to display the line chart it is working fine in in all version of IE except IE 9
The issue is the graph will be drawn on top of all the other components in UI

the below is the sample code

loading...
var $jx=jQuery.noConflict();

$jx(function() {
/** This code runs when everything has been loaded on the page /
/ Inline sparklines take their values from the contents of the tag /
/ $jx('.linechart').sparkline('html', {normalRangeMax:'80',lineWidth:'1',spotColor:'false'}); /
$jx(function() {
/* This code runs when everything has been loaded on the page /
/ Inline sparklines take their values from the contents of the tag */
var myvalues =//so values;
$jx('.dynamicsparkline').sparkline(myvalues,{normalRangeMax:'80',lineWidth:'1',spotColor:'false'});
});
});

please help me to solve this issue

This issue occurs only in IE 9

Thanks in advance

I'm adding a new sparkline chart type called timeline on a fork. I'd love to have you pull in when I'm done.

Story:
Given an array of time-based events, for example, a list of events from fullCalendar, render a sparkline proportionally to the given begin/finish time sparkline so that consumers can create visualizations for a large number of calendars together in a single view.

Acceptance Criteria

1. specify horizontal or vertical orientation
2. specify time markers on a given time interval in minutes
3. specify color of each event
4. specify begin and finish timestamps of the sparkline
5. specify custom tooltip
6. display all tooltips of overlapping events
7. enable hook to add custom date parsing and formatting for building the tooltips
8. no new dependencies
9. work in IE8 (presumably same compatibility as rest of sparkline charts)

Sometimes it'd be useful to display a dynamic field in a tooltip without having to implement a completely custom formatter. eg. to add a date entry to a line chart to display on a separate line from the values

When using "NormalRange" with sparklines it is often difficult to see if the sparkline reaches or goes just a little over (or under) the "NormalRange" limits. The larger the y-values are, the harder it is to see if the value is within or outside "NormalRange". Min- and maxspotcolor don't help when there are several places where the y-value exeeds the limit. Is it possible to change the "NormalRangeColor" to an other color in those areas (from bottom to top of "NormalRange") where the sparkline exceeds the upper or lower limit of the "NormalRange"?
Something like "ExceedRangeColor"?

Spot markers for line charts are clipped if min/max/final markers are disabled, but highlight markers remain enabled.

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.

Is it a bug that:

Tooltip is shown for the last value in series, for same values in the series

e.g
...

enableTagOptions: true,
type: 'line',
tooltipFormat: '{{y}} [ {{y:val}} ]',
tooltipValueLookups: {
'val' : {1:"A", 2:"B", 3:"C", 2:"D"
}

...

The sparkline for it will show tooltip on mouseover as

A, D, C, D, where as it should be A, B, C, D

How can it be fixed?

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)

Pie charts appear to be missing the lowest pixel in Internet Explorer 6-8 (IE 9 & 10 appear ok)

Can be seen on the project home page

Internet Explorer 10 needs a tiny tweak at line 2500 to prevent adding namespaces - insert additional condtion
&& $.browser.msie.version < 10.0

2500 if ($.browser.msie &amp;&amp; $.browser.msie.version < 10.0 && !document.namespaces.v) {
2501 document.namespaces.add('v', 'urn:schemas-microsoft-com:vml', '#default#VML');
2502 }

There are some cases where there is not always a target value.

With that being said, I added the following code to the renderTarget function:

if (this.values[0] == '0') this.target.drawRect(-1000, -1000, 0, 0, '#000', '#000');

When the targetWidth is set to 0, it will draw something nothing.

However, this is a weak hack. Hopefully, you guys consider doing this right in the future. :D

Overall, a great package of visualizations! I love it!

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.

Specifying chartRangeMin on a stacked bar chart results in invalid rendering.

JSFiddle: http://jsfiddle.net/sathomasga/CQZ8w/

The null values that might appear in the data, are not considered in the code that draws the interactivity.
This can be very easily shown with the following data in your interactive example:

width:100
height: 100
values: 5,6,7,9,9,null,null,null,5,3,2,2,4,6,7 

the red line is drawn correctly under the mouse in the first part, but after the nulls, the line has an offset proportional to the number of missing values (nulls).

I have bar charts with positive and negative values. I have noticed that when there are only negative values the chart is not rendered correctly.

The upper chart is created from the series 6,3,3,3,3,3,3,3,-3,3,-3. The second one with -3,-3,-3,-3,-3,-3,-3,-3,-3,-3.

Any idea to sort it out?

Cheers,
Fabrizio

'stackedBarColor' management with 1 serie shows only 1 color:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
<head>

    <script type="text/javascript" src="http://omnipotent.net/jquery.sparkline/contrib/jquery/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="http://omnipotent.net/jquery.sparkline/2.0/jquery.sparkline.js"></script>

    <script type="text/javascript">
    $(function() {
        $('.inlinebar').sparkline('html', {type: 'bar', stackedBarColor: ['#00AA00','#00FF00']} );
    });
    </script>
</head>
<body>

<p>
Note also that there is a bug in the 'stackedBarColor' management: without the 0:0 serie only 1 color is shown
</p>

<p>
<span class="inlinebar">15:20</span>
<span class="inlinebar">15:20,0:0</span>
</p>


</body>
</html>

When im using IE9 im having an error:

SCRIPT5007: Object expected jquery.sparkline.min.js, line 4 character 3378

and it appears when using minified version and non minified version, any help ?

Hi Gareth, thanks for such a great plugin. Its really easy to use!

My sparkline chart appears when I do a full page load but not if it is loaded by AJAX. What solves the problem is if also include the jQuery library in my AJAX page load. I'd rather not have to load jQuery as part of the AJAX request as that defeats the purpose of AJAX (cutting down on #/size of http requests).

This issue is not specific to my implementation of sparkline.js because cutting and pasting the demo code has the same problem.

I've tried many different kinds of script and html ordering but loading jQuery is the only thing that works.

I'm inexperienced with JavaScript/jQuery so I apologize if I'm not understanding something trivial.
thoughts?

thanks,
tim

Plotting:

    var vals = [608592,397823,447922,548121,558452,306141,298551,295930,617136,316963,282192,535278];
    $('.sparkline').sparkline(vals, {type: 'bar', barColor: 'blue'}); 

Several of the bars are clearly too short--numbers in the 200K area come out much less than 1/3 the height of the 617K maximum bar. Changing the last number to be in the 200K range makes the bars correct.

Exposing the region number would allow lookup values to be keyed against the region rather than just the value or offset

Eg. for a stacked bar chart where you want the first series to have prefix "first" and the second series "second":

        $('#mysparkline').sparkline('html', 
            {
                type: 'bar', 
                tooltipFormat: '{{region:prefixes}} {{value}}', 
                tooltipValueLookups: {prefixes: {0: 'first', 1: 'second'}}
                }
        );

I'm doing the following, and it is not working:

var test = $('<span>');
test.sparkline([1,2,3,4,5,6,7,8,9]);

I notice nothing inserted into the object, both in the console and after appending it to the dom.

Yet, the following works with an element that already exists in the dom:

var test = $('#test');
test.sparkline([1,2,3,4,5,6]);

Why is the first way not working? Shouldn't it work just the same as the second method?

try this code in firebug console in your home page, you will see the bug, the red line should never higher than the blue line
$('#compositeline').sparkline([1.078848, 1.241441, 1.308693, 1.333736, 1.254798, 1.300275,
1.301664, 1.375254, 1.309989, 1.317100, 1.403047, 1.242620, 1.541820, 1.393999, 1.553420,
1.472777, 1.353848, 1.388872, 1.264356, 1.522010, 1.466242, 1.456761, 1.296150, 1.235543], { fillColor: false });
$('#compositeline').sparkline([1.049862, 1.107218, 1.136244, 1.110050, 1.068434, 1.083617,
1.127363, 1.120001, 1.088645, 1.105921, 1.123032, 1.091422, 1.199707, 1.108032, 1.142687,
1.145122, 1.143045, 1.157749, 1.064208, 1.134536, 1.135931, 1.162465, 1.130432, 1.046818],
{ composite: true, fillColor: false, lineColor: 'red' });

Please add the possibility to export the rendered chart somehow.

One very useful one (since it can be easily converted to everything) would be a SVG export - it's done by many chart libraries, and they can even simulate it under IE8.

Thanks in advance.

Nulls by default are supposed to be ignored and not rendered on bars unless nullColor is set.

The following (on my laptop - windows 7, 64bit) renders thin bars for nulls.

$('#blah').sparkline([1, null, null, 4, 5, 6, 7, 8, null, null, 11, 12, 13, 14, 15, null, null, 18, 19, 0, 21, 22, null, null, 25, 26, 27, 28], { "type": "bar" });

This appears to be related to the following from $.fn.sparkline.bar.renderRegion:

isNull = all(null, vals)

which always returns false, as the all function looks like this:

// determine if all values of an array match a value
// returns true if the array is empty
all = function (val, arr, ignoreNull) {
    var i;
    for (i = arr.length; i--; ) {
        if (arr[i] !== val || (!ignoreNull && val === null)) {
            return false;
        }
    }
    return true;
};

and by not passing ignoreNull, the test becomes something along lines of:

if(null !== null || (!undefined && null === null)) return false;
if(false || (true && true)) return false;

The issue can be resolved by updating $.fn.sparkline.bar.renderRegion:

isNull = all(null, vals, true)

Can't render lines and sport when using Chrome 19.0.1084.52 and having the height set to 113 or upper.

canvas: 5,3,9,6,5,9,7,3,5,9,5,39,13,29,5,9,5,9,7,3,5,9,10,15

I think that it would be nice to have a sparkline that is similar to a speedometer or tachometer.

A simple implementation would show semi-circular background with a needle representing the value of interest. A more advanced implementation might include configurable colored background zones for safe, warning, danger, etc.

This would function in a fashion similar to normalRange, but would draw a line instead of a range.

Sparkline is great ;-)

Would it be possible to add support for negative values in a line chart?

When negative render down from zero using the negative line and fill colours?
Bar charts support this but to my eyes they are not as pleasing as the line chart.

We use a line graph to display values over time. Because we display over time, we use null values where there is no reading for a day. When there are null values, the tool tip value appears to display correctly, but the "red line" displays right of where it should display.

Bandlines - a new type of sparklines developed by Stewen Few and described here.
Also have a look at the example image.

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

Support for above the line fill

See https://groups.google.com/forum/?fromgroups=#!topic/jquery-sparkline/8P1pUG0gEU4

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.

As the box plot value is supplied as an option rather than a value, it's not available to be displayed in the tooltip without implementing a custom renderer.

The target should be added to the field set