NVD3 displayed chart is so small , like compressed

[Jacky Liu]

I tried using nvd3 to display my Line chart , but the chart is so small , like compressed

but , when i click the top area of this small chart , it will turn to the right size!!!

 

any suggestion will be appreciated~~~

[Jiaqi Liu]

BTW , I have tried Chrome and Firefox, the result is same ~

2013/9/17 Jacky Liu <liuji...@gmail.com>

--
You received this message because you are subscribed to a topic in the Google Groups "d3-js" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/d3-js/iYsHdbv4ZA4/unsubscribe.
To unsubscribe from this group and all its topics, send an email to d3-js+un...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.

--

------------------------------------

刘家齐 （Jacky Liu）

 

手机：15201091195        邮箱：liuji...@gmail.com

Skype：jacky_liu_1987   QQ：406229156

[Shreeram Kushwaha]

just by direclty seeing the image how is it possible to tell a solution??

--
You received this message because you are subscribed to the Google Groups "d3-js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to d3-js+un...@googlegroups.com.

For more options, visit https://groups.google.com/groups/opt_out.

--

Regards,

(Voice  +91-7849069144)
( Shreeram Kushwaha )
Software Engineer

Samsung R&D Institute India - Bangalore

[Jiaqi Liu]

Sorry , my fault 

here is the main code:

      

      ......

      $('#prediction-modal-window-body').html("");

      d3.select("#prediction-modal-window-body")

      .append("svg")

      .attr("width", related.width)

      .attr("height", related.height);

      var chart;

      

      nv.addGraph(function() {

        chart = nv.models.lineChart();

        chart.xAxis

               .axisLabel("Time")

               .tickValues(tickValues)

               .tickFormat(function(d,i){

                       var date = new Date(d);

                       return  d3.time.format('%H:%M')(date);

                });

        chart.yAxis

               .axisLabel("Values")

               .tickFormat(d3.format(".02f"));

      //chart.showXAxis(true);

        d3.select('#prediction-modal-window-body svg')

           .datum(res)

           .transition()

           .duration(100)

           .call(chart);

        nv.utils.windowResize(chart.update);

        chart.dispatch.on('stateChange', function(e) { nv.log('New State:', JSON.stringify(e)); });

        console.log("return chart");

        return chart;

        

      }

        ,function(){

          console.log("callback to mark out!!");

          $("#prediction-modal-window-body .nv-point-10")

          .attr("class","nv-point hover")

          .attr("fill","#e32119")

          .attr("stroke","#e32119")

          .attr("stroke-width",3);

        }

        );

2013/9/17 Shreeram Kushwaha <ram90...@gmail.com>

[Shreeram Kushwaha]

If possible make a sample of the same on jsfiddle.net so that we can see the implementation and find out the error

[Bob Patton]

I have what appears to be the same problem. Did you ever come up with a solution to your problem? Thanks!

[Joe Meissler]

Can you post a jsfiddle?

[Bob Patton]

Our code is a mixture of ASP.NET MVC, bootstrap, knockout, etc. but I will try to pull together a pure javascript demonstration of the problem (assuming I can still get the problem to occur in that environment) over the next day or so. It seems to be timing dependent so it might be tricky to reproduce.

[Bob Patton]

Managed to get it isolated!: http://jsfiddle.net/max_patton/AbKb9/3/

[Bob Patton]

Forgot to explain how to see the behavior:

1. click on the graph in the screen to get the modal window with a graph to open.
2. notice that the graph in the modal is rather compressed to the upper-left.
3. resize the browser window even slightly (or hitting F12 twice in Chrome will also do the trick).
4. notice that the graph then expands into the full width of the modal.
   

[Joe Meissler]

Geting rid of the styling on the <div id=chart> makes it a bit better. That's a start:

http://jsfiddle.net/AbKb9/4/

[john...@stolaf.edu]

I'm currently having this exact issue. I'm generating an NVD3 line chart through R Shiny, and the plot output is compressed and inverted (just like your attached picture) until I click on the legend. Did you figure out what the problem was with your line chart and/or did you ever solve the problem?

On Tuesday, September 17, 2013 1:45:04 AM UTC-5, Jacky Liu wrote:

[Joe Meissler]

post a jsfiddle

[MsMrUser]

Hi Guys,

Was there any solution to this problem?

On Monday, July 7, 2014 9:31:18 AM UTC-7, K. Johnson wrote:

[Piers Storey]

I used 

nv.utils.windowResize(chart.update);