CODEWITHSUNDEEP
javascriptjqueryhtmlamcharts
Dalton2
Dalton2

Reputation: 135

Amcharts not getting rendered using javascript function

I am trying to render a pie chart using Amcharts through a javascript function call. My code is as follows -

Html file -

   <script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
   <script src="https://www.amcharts.com/lib/3/pie.js"></script>              

    <div class="row">
                        <div class="col-md-10 col-md-offset-1">
                            <div class="row">
                                <div class="col-sm-4">
                                    <div id="pie1">
                                      <script>
                                       createChart([{"country":"Czech","litres":301.9},{"country":"Ireland","litres":201.1},{"country":"Germany","litres":165.8},{"country":"Pak","litres":139.9},{"country":"Austria","litres":128.3},{"country":"UK","litres":99}]) ;
) ;
                                       </script>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

Amcharts js file -

function createChart(chartData){
    var chart = AmCharts.makeChart("pie1", {
    "type": "pie",
    "theme": "light",
    "dataProvider": chartData,
    "valueField": "litres",
    "titleField": "country",
    "balloon": {
        "fixedPosition": true
    },
    "export": {
        "enabled": true
    }
});

}

Using the function createChart(), I am passing a json to be used in the function definition for populating the pie chart. I debugged to check if control goes to js file, it does but still the pie chart is not getting rendered. Can someone tell me what is wrong with this implementation?

Upvotes: 0

Views: 326

Answers (1)

Darlesson
Darlesson

Reputation: 6162

You may need to add the style defining the dimensions:

<style>
#pie1 {
  width: 100%;
  height: 500px;
}
</style>

I also recommend to have the script tag out of the DivElement. Maybe just before the end of the body tag.

Upvotes: 1

Related Questions