amcharts cannot load in div unless fixed size but then axis labels are off

Question

I have been trying to get these charts to work correctly and cannot get any resolution on this. I am trying to incorporate amcharts into a webapplication and was able to render the charts but with errors. When I set the div width to a percentage the chart will not show unless the browser window is resized or F12 pressed. If I set it to a fixed px width, it renders first time but then the axis labels are cut off. Google searches found one that talks about the chart unable to render within a hidden div but i have not set the div to hidden and not sure how to check if page has loaded before rendering chart within javascript.

  getSecondChart: function (demoChart3) {


        var chart;
        var chartData = [{
            "year": 2009,
            "income": 23.5

        }, {
            "year": 2010,
            "income": 26.2

        }, {
            "year": 2011,
            "income": 30.1

        }, {
            "year": 2012,
            "income": 29.5

        }, {
            "year": 2013,
            "income": 30.6

        }, {
            "year": 2014,
            "income": 34.1

        }
        ];



        AmCharts.ready(function () {
            // SERIAL CHART
            var chart = new AmCharts.AmSerialChart();
            chart.dataProvider = chartData;
            chart.categoryField = "year";
            chart.startDuration = 2;
            // change balloon text color                
            chart.balloon.color = "#000000";


            // AXES
            // category
            var categoryAxis = chart.categoryAxis;
            categoryAxis.gridPosition = "start";

            // value
            var valueAxis = new AmCharts.ValueAxis();
            valueAxis.axisAlpha = 0;
            chart.addValueAxis(valueAxis);

            // GRAPHS
            // column graph
            var graph1 = new AmCharts.AmGraph();
            graph1.type = "column";
            graph1.title = "Income";
            graph1.lineColor = "#FF6600";
            graph1.valueField = "income";
            graph1.lineAlpha = 1;
            graph1.fillAlphas = 1;
            graph1.dashLengthField = "dashLengthColumn";
            graph1.alphaField = "alpha";
            graph1.balloonText = "<span style='font-size:13px;'>[[title]] in [[category]]:<b>[[value]]</b> [[additional]]</span>";
            chart.addGraph(graph1);

            // WRITE
            chart.write("demoChart3");
        })
    }

html

          <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="splitter:false">
                   <div id="demoChart3" style="width: 80%; height:342px;"></div>
           </div>

I am using dojo as well and did not like how the charts appeared and opted for amcharts. I call the charts function from my first loading function:

renderChart = function () {
  myhomeModule.getSecondChart("demoChart3");

}

dan.zoeller dan.zoeller · Accepted Answer · 2014-01-03T19:44:50

I was able to get your example working in a fiddle: http://jsfiddle.net/danzoeller/JRuC7/

amCharts is very flexible as far as its layout in a div. I am using it in combination with twitter bootstrap and it always resizes to fit the browser window perfectly. My guess is that you have some conflicting CSS somewhere that is cutting off the div that contains your chart. Try removing your style sheet to see if it displays correctly first and then add your styles back in to see who the culprit is.

        function HomeModule() {
        this.getSecondChart = function (demoChart3) {


            var chart;
            var chartData = [{
                "year": 2009,
                "income": 23.5

            }, {
                "year": 2010,
                "income": 26.2

            }, {
                "year": 2011,
                "income": 30.1

            }, {
                "year": 2012,
                "income": 29.5

            }, {
                "year": 2013,
                "income": 30.6

            }, {
                "year": 2014,
                "income": 34.1

            }
            ];



            AmCharts.ready(function () {
                // SERIAL CHART
                var chart = new AmCharts.AmSerialChart();
                chart.dataProvider = chartData;
                chart.categoryField = "year";
                chart.startDuration = 2;
                // change balloon text color                
                chart.balloon.color = "#000000";


                // AXES
                // category
                var categoryAxis = chart.categoryAxis;
                categoryAxis.gridPosition = "start";

                // value
                var valueAxis = new AmCharts.ValueAxis();
                valueAxis.axisAlpha = 0;
                chart.addValueAxis(valueAxis);

                // GRAPHS
                // column graph
                var graph1 = new AmCharts.AmGraph();
                graph1.type = "column";
                graph1.title = "Income";
                graph1.lineColor = "#FF6600";
                graph1.valueField = "income";
                graph1.lineAlpha = 1;
                graph1.fillAlphas = 1;
                graph1.dashLengthField = "dashLengthColumn";
                graph1.alphaField = "alpha";
                graph1.balloonText = "<span style='font-size:13px;'>[[title]] in [[category]]:<b>[[value]]</b> [[additional]]</span>";
                chart.addGraph(graph1);

                // WRITE
                chart.write("demoChart3");
            })
        }
    };

    var myHomeModule = new HomeModule();

    $(document).ready(function () {
        myHomeModule.getSecondChart();
    });

amcharts cannot load in div unless fixed size but then axis labels are off

1 Answers