0

I'm trying to use a json response as the tooltipValueLookups parameter in a sparklines graph, without success. The tooltip just keeps showing 0:5 and 1:8 instead of Mulder:5 and Scully:8

It works perfectly if I just declare the variable agents with the exactly same json:

var agents = {"names":{"0":"Mulder", "1":"Scully"}}

But evrything goes south when I try to do it with the server response, as intended. Could anyone tell me please, what am I doing wrong?

var agents = $.ajax({
    url     : "/ajaxAgents",
    type    : "get",
    dataType: 'json'
});

Response: {"names":{"0":"Mulder", "1":"Scully"}}

$("#mini-chart").sparkline([5,8], {
    type: 'bar',
    height: '30px',
    barWidth: 6,
    barSpacing: 2,
    barColor: '#0aa699',
    tooltipFormat: '<span style="color: {{color}}">&#9679;</span> {{offset:offset}}: {{value}}',
    tooltipValueLookups:{offset:agents.names},
    negBarColor: '#0aa699'});

Thanks in advance.

EDIT

After a lot of coffee and swearing, I finally got it to work. Not a very elegant solution, I must admit.

First, I had to change the server-side php function to return a string, rather than json.

Then in the ajax call:

var response = $.ajax({
    url     : "/ajaxAgents",
    type    : "get",
    dataType: 'text',
    global  : false,
    async   : false,
    success : function(data){return data;}
}).responseText;

Then, parse the response and filter it:

var agents = $.parseJSON(response);
var filteredNames = $.map(agents.names, function(el) {
        return el;
    });

And finally, the sparklines function:

    $("#mini-chart").sparkline(agentsData, {
    type: 'bar',
    height: '30px',
    barWidth: 6,
    barSpacing: 2,
    barColor: '#0aa699',
    tooltipFormat: '<span style="color: {{color}}">&#9679;</span> {{offset:offset}}: {{value}}',
    tooltipValueLookups:{offset:filteredNames},
    negBarColor: '#0aa699'});

@Hüseyin: Thanks for your assistance, it was very helpful.

Sam
  • 91
  • 5

1 Answers1

1

Filter json with $.grep

var filteredNames = $.map(agents.names, function(el, i) {
    return el;
});

And use in your function like;

tooltipValueLookups:{offset: filteredNames}

You can see demo here: jsfiddle

Note: If you are returning string from server, you need to use;

var agents = jQuery.parseJSON(response);
Hüseyin BABAL
  • 15,400
  • 4
  • 51
  • 73
  • Sorry, it doesn't work. I can't redeclare json, it is the response from the server. Also, I'm pretty sure the **tooltipValueLookups** option **must** have the keys. Like I said, the funcion works like a charm if I directly declare the JSON object. Things go wrong when I try to use the response, which is exactly as expected. Thanks, anyway :) – Sam Mar 28 '14 at 21:44
  • @Sam, ok json can be remain same. I have updated my code and demo, see my updated asnwer. – Hüseyin BABAL Mar 28 '14 at 22:13
  • This is driving me nuts. parseJSON is returning null, which kind of makes sense, since json is already an object. And mapping agent.names throws a TypeError. Thanks again for your reply, @Hüseyin. – Sam Mar 29 '14 at 00:35
  • But, it is already object, so do not use json parse. use it directly. And see if it works – Hüseyin BABAL Mar 29 '14 at 10:48
  • I did test parsing directly. It was throwing an error **TypeError**, couldn't figure out why. Anyways, I found a solution. I edited the question with the solution I found. Thanks :) – Sam Mar 29 '14 at 11:05