0

I am new to NVD3. And i am trying to get the data from Matrix report in sales-force and display that data in Line plus bar chart. seems like i am getting the chart with no data . On hover tool tip at a particular place it is displaying NAN. So i think i am not able to frame data correctly in the report. so do any of you have suggestion on that and if possible can you paste the code also. Thanks in advance. i am taking this as a refernce and tried. http://nvd3.org/examples/linePlusBar.html

sravan
  • 3
  • 4
  • Please post your code that is not working. Without seeing what you're doing it is difficult to know what is wrong. I suggest using http://jsfiddle.net – RenatoUtsch May 04 '15 at 16:40
  • @RenatoUtsch i am taking something like this as an reference and trying to display the report data in the chart. I don't know how to make this work in jsfiddle because i haven't used that one before. But all i am changing from that code is using line plus bar chart instead of multiBarChart. And i built the matrix report and referencing that in the Salesforce visualforce page. http://www.oyecode.com/2014/01/how-to-build-graphs-on-visualforcepages.html – sravan May 04 '15 at 17:35
  • @RenatoUtsch please take a look at the following jsfiddle https://jsfiddle.net/zLyyptss/9/ – sravan May 04 '15 at 19:01
  • Please use this fiddle, I added nvd3 to it: https://jsfiddle.net/egLgaxc4/ - the request isn't working because the url is invalid. – RenatoUtsch May 04 '15 at 22:53
  • This is coming pretty good when i am giving test data like in the script. But when i am trying to send the data from sales force report it is not working well for me i mean the report is not coming up with the two axis y1 and y2 . i know there is a little bit of tweak i need to do especially in the piece of parsing the report data but i am not getting it. – sravan May 05 '15 at 17:09
  • if you can see the previous fiddle which you edited and posted for me you can see the report parsing code. Can you help with that? https://jsfiddle.net/egLgaxc4/3/ – sravan May 05 '15 at 17:13
  • I answered your question. See if it solves the problem. – RenatoUtsch May 07 '15 at 17:31
  • Hi @RenatoUtsch sorry to be a bit late on response. Ya it is helpful and i parsed the data according to the required json and the chart is coming good now. Except for the small naming issues chart is looking good. Thanks a lot for your help. – sravan May 08 '15 at 14:31
  • Hi but i have a problem now on labeling the x axis of the chart.i want the row groupings in a matrix chart to be on the x axis. but when i am trying to do that it is giving me some void date like 12/31/1969 like that.i am using the below code. – sravan May 08 '15 at 20:29
  • var chart = nv.models.linePlusBarChart() .margin({top: 30, right: 60, bottom: 50, left: 70}) //We can set x data accessor to use index. Reason? So the bars all appear evenly spaced. .x(function(d,i) { return i }) .y(function(d,i) {return d[1] }) ; chart.xAxis.tickFormat(function(d) { var dx = data[0].values[d] && data[0].values[d][0] || 0; return d3.time.format('%x')(new Date(dx)) }); – sravan May 08 '15 at 20:46
  • hello @RenatoUtsch. Right now the problem i am facing in this chart is the tooltip. I am getting the x axis labelled correctly from the row grouping of my matrix report. So on hovering my pointer i am getting the date value as 12/31/1969 by default at any point instead of taking the date from wherever the pointer is placed.Is there any workaround for that! – sravan May 12 '15 at 03:53
  • Try dividing the timestamp by 1000 on the chart.x() function. – RenatoUtsch May 12 '15 at 12:41
  • @RenatoUtsch it says Nan on both labeling and on tool tip. i guess we are dividing the Date format by 1000 which gives us NAN. Am i doing wrong here.Please correct me if i am!! – sravan May 12 '15 at 13:28
  • chart.xAxis .showMaxMin(false) .tickFormat(function(d) { @RenatoUtsch var dx = chartDat1a [0].values[d] && chartDat1a [0].values[d][0] || 0; return d3.time.format('%x')(new Date(dx)) }); this is how i am framing the xaxis. – sravan May 12 '15 at 14:11
  • chartDat1a is the Json data i am sending in to the chart. – sravan May 12 '15 at 15:01
  • @RenatoUtsch and i am giving the date in MM/Dd/YYYY format in my report. – sravan May 12 '15 at 15:49
  • I can't help you in these comments. Please end this question, accept the answer and open a new one. – RenatoUtsch May 12 '15 at 16:40
  • sure i opened a new one. Thank you. – sravan May 12 '15 at 16:59
  • @RenatoUtsch Seems like for some reason it wont allow me to upvote your answer. Sorry about that. – sravan May 12 '15 at 17:04
  • You probably can accept it, though. It is the tick below the upvote and downvote buttons. – RenatoUtsch May 12 '15 at 17:14
  • @RenatoUtsch it says voteup requires 15 reputation! seems like i dont! Sorry about that. – sravan May 12 '15 at 17:36
  • http://i.stack.imgur.com/uqJeW.png – RenatoUtsch May 12 '15 at 17:39
  • Sorry my bad i didn't see that. – sravan May 12 '15 at 17:43
  • No problem, the first time I didn't too. – RenatoUtsch May 12 '15 at 18:18

1 Answers1

0

As you said in the comments, with test data everything works properly. Then, the problem must be with the way you are parsing the data. Also, you have some problems in how you use nvd3.

A quick look at your code shows some problems:

  1. The following line is writing '+matrixReportId' in every request:

    $.ajax('/services/data/v29.0/analytics/reports/+matrixReportId', {

    I think you probably want to write the contents of matrixReportId, right? So you need to do it like this:

    $.ajax('/services/data/v29.0/analytics/reports/' + matrixReportId, {

  2. You are doing a chartData.push() on an empty values array. You should do that only after adding the elements to the array:

    $.each(response.groupingsDown.groupings, function(di, de) {
    var values = [];
    $.each(response.groupingsAcross.groupings, function(ai, ae) {
        values.push({"x": ae.label, "y": response.factMap[de.key+"!"+ae.key].aggregates[0].value});
    });
    chartData.push({"key":de.label, "values": values});
});

  3. You should not recreate the chart everytime the data changes. You should only change the datum and then update the chart.

  4. You are forgetting to call nv.utils.windowResize().

I edited the jsfiddle to incorporate these changes. Please test it: https://jsfiddle.net/egLgaxc4/5/

Also, you probably are better off not using jquery at all, as d3+jquery can get quite heavy. D3 has its own ajax (look at d3.xhr), foreach and selection methods. You really don't need jquery here.

Here, I created an example using only d3: https://jsfiddle.net/fwuzk3y6/5/

RenatoUtsch
  • 1,449
  • 1
  • 13
  • 20