Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery Sparklines - Tooltip in Stacked Bar Chart

Tags:

sparklines

Using jQuery Sparklines v2.1.2, I am creating a Stacked Bar Chart.

The Tooltip values are displaying correctly. It's displaying the Column Name as Tooltip for each small block. How should I customize the tooltip for each small block?

tooltipFormat: '{{offset:offset}} - {{value}}',
  tooltipValueLookups: {
    'offset': {
      0: 'India',
      1: 'France',
      2: 'USA'
    }

The Source Code is available in: http://jsfiddle.net/Hj6fB/236/

like image 255
Bala Sakthis Avatar asked Mar 14 '23 16:03

Bala Sakthis


1 Answers

In case you are still looking for a solution.

This worked for me https://groups.google.com/forum/#!topic/jquery-sparkline/XcigtHeVx3M

$('#StackedBarChart').sparkline([
      [1, 4, 2],
      [2, 3, 2],
      [3, 2, 2],
      [4, 1, 2]
    ], {
      type: 'bar',
      // Map the offset in the list of values to a name to use in the tooltip
      myPrefixes: ['USA', 'France','India'],
                tooltipFormatter: function(sp, options, fields) {
                    var format =  $.spformat('<div class="jqsfield"><span style="color: {{color}}">&#9679;</span> {{myprefix}} {{value}}</div>');
                    var result = '';
                    $.each(fields, function(i, field) {
                            field.myprefix = options.get('myPrefixes')[i];
                            result += format.render(field, options.get('tooltipValueLookups'), options);
                    })
                    return result;
                },

      height: "75px",
      barWidth: "30px",
    });

See example http://jsfiddle.net/Hj6fB/241/

like image 89
Xane Ali Avatar answered Mar 16 '23 06:03

Xane Ali