0

I've added a nvd3 chart to my sencha touch app. Apparently though the size of the box where the chart will be inserted is undefined at the time the chart is created. This turns out in a graph with standard dimensions (960x350 approx), way too large!

How can I modify the widht and height of the chart? The visual error I get is that the chart has a larger width, the component containing it are smaller and the chart is not completely visible (it's like it misses a resize effect to adapt its size to the containing box).

My code, which is inside a sencha component goes like this:

 nv.addGraph(Ext.bind(function(){
        var chart = nv.models.discreteBarChart()
                .x(function(d) { return d.label; })
                .y(function(d) { return d.value; })
                .staggerLabels(true)
                .tooltips(false)
                .showValues(true);


        var w = 550;
        var h = 280;



        var svg = d3.select(this.innerElement.dom).append('svg');

        // setting axis property doesn't work:
        var x = d3.scale.ordinal()
        .domain(d3.range(10))
        .rangeRoundBands([0, w], 1);            

        chart.xAxis
        .tickFormat(d3.format(',f'));
        chart.xAxis.scale(x);

        chart.yAxis
        .tickFormat(d3.format(',f'));       

        //setting svg properties doesn't work:
        svg.attr("width", w)
        .attr("height", h);

        svg.datum(this.getChartData()).transition().duration(500).call(chart);

        //if I comment this, nothing changes, what is this method for?
        nv.utils.windowResize(chart.update);
T. Rossi
  • 465
  • 1
  • 6
  • 23
  • 1
    possible duplicate of [how to set height and width of nvd3 chart](http://stackoverflow.com/questions/16474988/how-to-set-height-and-width-of-nvd3-chart) – shabeer90 Mar 06 '14 at 13:12
  • thanks, I was sure I tried that way too but for some reason (probably other bugs) it was not working. TOday ona fresh start it's working, I've flagged the question as duplicate, thanks again. – T. Rossi Mar 06 '14 at 15:29
  • Sencha Touch 2.x and ExtJS 4.x NVD3 extension: https://github.com/woodenconsulting/OpenCharts-For-Sencha-Touch-and-ExtJS – Jeff Wooden Mar 21 '14 at 22:50

0 Answers0