CODEWITHSUNDEEP
javascriptamcharts
Bogaso
Bogaso

Reputation: 3318

How to incorporate amCharts in HTML page

I am struggling to deploy amCharts in my custom webpage. Below is my HTML page where I tried to incorporate a amCharts, however, couldn't not succeed. Surprisingly, when I open below HTML file in Chrome, I just see a blank page. Any pointer to what I am missing would be highly appreciated. 

<html>
  <head>
    <script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
    <script src="https://www.amcharts.com/lib/3/serial.js"></script>
    <script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
    <script src="https://www.amcharts.com/lib/3/lang/ru.js"></script>    
  </head>
  <body>
    <div id="chartdiv"></div>
    <style type="text/css">
        #chartdiv {
          width: 100%;
          height: 400px;
        }
</style>
    <script type="text/javascript">
           var chartData = [{
        "date": "2013-01-01",
        "value": 60
      }, {
        "date": "2013-01-02",
        "value": 67
      }, {
        "date": "2013-01-03",
        "value": 64
      }, {
        "date": "2013-01-04",
        "value": 66
      }];

      var chart = AmCharts.makeChart("chartdiv", {
        "type": "serial",
        "theme": "light",
        "dataDateFormat": "YYYY-MM-DD",
        "valueAxes": [{
          "axisAlpha": 0,
          "position": "left"
        }],
        "graphs": [{
          "id": "g1",
          "bullet": "round",
          "bulletBorderAlpha": 1,
          "bulletColor": "#FFFFFF",
          "bulletSize": 5,
          "hideBulletsCount": 50,
          "lineThickness": 2,
          "title": "red line",
          "useLineColorForBulletBorder": true,
          "valueField": "value"
        }],
        "chartCursor": {
          "cursorPosition": "mouse"
        },
        "categoryField": "date",
        "categoryAxis": {
          "parseDates": true,
          "dashLength": 1,
          "minorGridEnabled": true,
          "position": "top"
        },
        "dataProvider": chartData
      });
    </script>
  </body>
</html>

Upvotes: 0

Views: 435

Answers (1)

xorspark
xorspark

Reputation: 16012

There are two issues

1) As @Teemu mentioned, you want to either put the script tag after the #chartdiv or wrap the makeChart call in an onload event that executes after the document is loaded.

2) AmCharts requires that you specify dimensions for the #chartdiv in CSS, e.g.

<style type="text/css">
#chartdiv {
  width: 100%;
  height: 400px;
}
</style>

Upvotes: 1

Related Questions