Adding date to tooltip

[ubuser]

I saw DOW chart on About tab. It has both Volume and Index as tooltip. I was thinking to add third tooltip as

date/time along with it. Do you think it can be possible? I appreciate your hints.  I am also looking for adding multiple tooltip with date on bar chart(stacked bar)

Thanks for your help.

 

 

 

[Gareth]

It's possible by using the tooltipFormat and tooltipValueLookups to map the offset to a date.  I plan on adding that to the example on the site when I have an opportunity to do so.

[ubuser]

Good news. Thank you.

[Jeremy Yamaguchi]

I'm also looking for this exact functionality, and haven't been able to get it to work with both the HTML and dynamic data approach.

An example of this in action would be greatly appreciated.

[ubuser]

HI,

I am trying to achieve using tooltipValueLookups but I think I have syntax conflict. I have also tooltipFormatter and {{offset:names}}

Here is my code:

 

This should work but looks like I have some error in syntax that displays {{offset:names}} instead of values.

Let me know. Thanks.

var dynamic_datacomcode3321 = [[0, 21830973, 15834126], [0, 19002887, 17491716], [0, 14282261, 18695523], [0, 13198076, 19420532], [0, 15428469, 17028098], [0, 22160961, 16385773], [0, 16887393, 19307801], [0, 17257896, 19568313], [0, 21240054, 18552714], [0, 18068982, 18428967], [0, 16706413, 17913206], [0, 20775565, 17798740], [0, 16165715, 17416679], [0, 19752378, 17887471], [0, 18123792, 17238951], [0, 15548317, 17160499], [0, 13707778, 18464788], [0, 17547231, 17599688], [0, 20918023, 18906071], [0, 19729839, 19067822], [0, 15976011, 16875998], [0, 12863622, 16540628], [0, 14120195, 16062199], [0, 23369132, 16881706], [0, 25598265, 17025415], [0, 17205641, 17889586], [0, 22749900, 17314984], [0, 18696424, 17716693], [0, 18499694, 19386255], [0, 16137966, 20096508], [0, 19664130, 19021719], [0, 20635387, 19192135], [0, 24197379, 17534715], [0, 18112271, 16993334], [0, 19829187, 16371698], [0, 20239741, 16588228], [0, 21794055, 17301548], [0, 17961410, 17195047], [0, 14796559, 18076690], [0, 17839300, 18783797], [0, 16739796, 18957234], [0, 18855848, 19814654], [0, 17236273, 19088015], [0, 14430259, 18769552], [0, 19777897, 19644902], [0, 20037233, 19224231], [0, 16776733, 20462364], [0, 15442904, 19748014], [0, 14153727, 17626209], [0, 21019398, 17240629], [0, 17604513, 17303778], [0, 19287703, 18729357]];

$(

'.comcode3321').sparkline(dynamic_datacomcode3321, { height: '6.3em', type: 'bar', stackedBarColor: ['#808080', '#b1d1ff', '#808080'], highlightColor: 'red'

, tooltipFormatter:

function (sp, options, fields) { return '<div class="jqsfield" style="font-family:verdana;"><div style="text-align:left;float:left;"><span style="color: ' + fields[0].color + '">&#9679;</span> {{offset:names}} Formulated: </div><div style="text-align:right;float:right;">' + addCommas('' + fields[0].value) + '</div></div><br />' + '<div class="jqsfield" style="font-family:verdana;"><div style="text-align:left;float:left;"><span style="color: ' + fields[1].color + '">&#9679;</span> Negotiated: </div><div style="text-align:right;float:right;">' + addCommas('' + fields[1].value) + '</div></div>'; }

, tooltipValueLookups: { names: { 0:

'Jul 31 2011', 1: 'Aug 7 2011', 2: 'Aug 14 2011', 3: 'Aug 21 2011', 4: 'Aug 28 2011', 5: 'Sep 4 2011', 6: 'Sep 11 2011', 7: 'Sep 18 2011', 8: 'Sep 25 2011', 9: 'Oct 2 2011', 10: 'Oct 9 2011', 11: 'Oct 16 2011', 12: 'Oct 23 2011', 13: 'Oct 30 2011', 14: 'Nov 6 2011', 15: 'Nov 13 2011', 16: 'Nov 20 2011', 17: 'Nov 27 2011', 18: 'Dec 4 2011', 19: 'Dec 11 2011', 20: 'Dec 18 2011', 21: 'Dec 25 2011', 22: 'Jan 1 2012', 23: 'Jan 8 2012', 24: 'Jan 15 2012', 25: 'Jan 22 2012', 26: 'Jan 29 2012', 27: 'Feb 5 2012', 28: 'Feb 12 2012', 29: 'Feb 19 2012', 30: 'Feb 26 2012', 31: 'Mar 4 2012', 32: 'Mar 11 2012', 33: 'Mar 18 2012', 34: 'Mar 25 2012', 35: 'Apr 1 2012', 36: 'Apr 8 2012', 37: 'Apr 15 2012', 38: 'Apr 22 2012', 39: 'Apr 29 2012', 40: 'May 6 2012', 41: 'May 13 2012', 42: 'May 20 2012', 43: 'May 27 2012', 44: 'Jun 3 2012', 45: 'Jun 10 2012', 46: 'Jun 17 2012', 47: 'Jun 24 2012', 48: 'Jul 1 2012', 49: 'Jul 8 2012', 50: 'Jul 15 2012', 51: 'Jul 22 2012'} }

, barWidth:

'2' });

[Anuraag Sanwal]

any solution to this?

it is a very needed functionality

[ubuser]

Yes, use the following code as guideline. U can use this as demo too.

 

$(

function() {

var dynamic_datacomcode3321 = [[0, 19002887,17491716],[0, 14282261,18695523],[0, 13198076,19420532],[0, 15428469,17028098],[0, 22160961,16385773],[0, 16887393,19307801],[0, 17257896,19568313],[0, 21240054,18552714],[0, 18068982,18428967],[0, 16706413,17913206],[0, 20775565,17798740],[0, 16165715,17416679],[0, 19752378,17887471],[0, 18123792,17238951],[0, 15548317,17160499],[0, 13707778,18464788],[0, 17547231,17599688],[0, 20918023,18906071],[0, 19729839,19067822],[0, 15976011,16875998],[0, 12863622,16540628],[0, 14120195,16062199],[0, 23369132,16881706],[0, 25598265,17025415],[0, 17205641,17889586],[0, 22749900,17314984],[0, 18696424,17716693],[0, 18499694,19386255],[0, 16137966,20096508],[0, 19664130,19021719],[0, 20635387,19192135],[0, 24197379,17534715],[0, 18112271,16993334],[0, 19829187,16371698],[0, 20239741,16588228],[0, 21794055,17301548],[0, 17961410,17195047],[0, 14796559,18076690],[0, 17839300,18783797],[0, 16739796,18957234],[0, 18855848,19814654],[0, 17236273,19088015],[0, 14430259,18769552],[0, 19777897,19644902],[0, 20037233,19224231],[0, 16776733,20462364],[0, 15442904,19748014],[0, 14153727,17626209],[0, 21019398,17240629],[0, 17604513,17303778],[0, 19287703,18729357],[0, 17272302,17990090]];

$(

'.comcode3321').sparkline(dynamic_datacomcode3321, { height: '6.3em', type: 'bar', stackedBarColor: ['#808080','#b1d1ff','#808080'], highlightColor: 'red',

myPrefixes: [

'Formulated', 'Negotiated'],

tooltipFormatter:

function(sp, options, fields) {

var format = $.spformat('<div class="jqsfield"><span style="color: {{color}}">&#9679;</span> {{myprefix}} {{value}}</div><span style="color:black;">&#9679;</span> {{offset:names}}</div>');

var format0 = $.spformat('<div class="jqsfield"><span style="color: {{color}}">&#9679;</span> {{myprefix}} {{value}}</div>');

var result = '';

$.each(fields,

function(i, field) {

if (i < 2) {

field.myprefix = options.get(

'myPrefixes')[i];

if (i==0){

result += format0.render(field, options.get(

'tooltipValueLookups'), options);

}

else {

result += format.render(field, options.get(

'tooltipValueLookups'), options);

}

}

})

return result;

},

tooltipValueLookups: {

names: {

0:

'Aug 8 2011',1:'Aug 15 2011',2:'Aug 22 2011',3:'Aug 29 2011',4:'Sep 5 2011',5:'Sep 12 2011',6:'Sep 19 2011',7:'Sep 26 2011',8:'Oct 3 2011',9:'Oct 10 2011',10:'Oct 17 2011',11:'Oct 24 2011',12:'Oct 31 2011',13:'Nov 7 2011',14:'Nov 14 2011',15:'Nov 21 2011',16:'Nov 28 2011',17:'Dec 5 2011',18:'Dec 12 2011',19:'Dec 19 2011',20:'Dec 26 2011',21:'Jan 2 2012',22:'Jan 9 2012',23:'Jan 16 2012',24:'Jan 23 2012',25:'Jan 30 2012',26:'Feb 6 2012',27:'Feb 13 2012',28:'Feb 20 2012',29:'Feb 27 2012',30:'Mar 5 2012',31:'Mar 12 2012',32:'Mar 19 2012',33:'Mar 26 2012',34:'Apr 2 2012',35:'Apr 9 2012',36:'Apr 16 2012',37:'Apr 23 2012',38:'Apr 30 2012',39:'May 7 2012',40:'May 14 2012',41:'May 21 2012',42:'May 28 2012',43:'Jun 4 2012',44:'Jun 11 2012',45:'Jun 18 2012',46:'Jun 25 2012',47:'Jul 2 2012',48:'Jul 9 2012',49:'Jul 16 2012',50:'Jul 23 2012',51:'Jul 30 2012' }

},

barWidth:

'2' });

I am able to show dayte on stacked bar chart.

 

Thanks. Good Luck!

[Ryan Ripken]

I know this thread is old, but maybe another example will help someone else.

// locations has the sparkdata for a bunch of sparklines.

// the sparklines have different number of points and different start/end dates.

function addSpark(locations, name, displayTZ, groupId) {

var labelledValues = locations[name];

var sparkArray = labelledValues["values"];

// build a tooltipFormatter method for this specific sparkline

// the returned method "closes" over the current line's start/end, number of items, tz

var formatter = getTooltipFormatter(labelledValues["first"], labelledValues["last"], sparkArray.length, displayTZ);

var chartOptions = {

type: 'line',

width: '100%',

minSpotColor: false,

maxSpotColor: false,

tooltipFormatter: formatter  // use our generated closure...

};

var selector = "#" + getChartId(groupId, name);

$(selector).sparkline(sparkArray, chartOptions);

}

function getTooltipFormatter(first, last, currentLength, displayTZ) {

var theFunc = function(sp, options, fields) {

var retval = "";

if (!fields.isNull) {

var dateString = getDateString(fields.x, first, last, currentLength, displayTZ);

retval = '<div class="jqsfield"><span style="color: #00f">&#9679</span>'

+ fields.y + '<br/> ' + dateString + '</div>';

}

return retval;

};

return theFunc;

}

function getDateString(curIndex, first, last, count, displayTZ) {

if (displayTZ === "US/Central") {

displayTZ = "America/Chicago";  // moment-timezine apparently doesn't understand US/Central. Chicago works.

}

var interval = (last - first) / (count - 1);

var unixAtIndex = first + (curIndex * interval);

var tz = moment.unix(unixAtIndex / 1000).tz(displayTZ);

return tz.format("YYYY-MM-DD HH:mm:ss zz");

}