Gantt Chart Help - "d.AmGanttChart is not a constructor"

[adamcee]

Hi,

AmCharts looks great, and I am trying to get a basic Gantt chart up and running in react. I am running into the following error: Uncaught TypeError: d.AmGanttChart is not a constructor.

Any insight you could offer would be greatly appreciated. Following is the relevant code.

// This must be at the top of the file
require("amcharts3-export");

import React, { PropTypes } from 'react'
import Immutable from 'immutable'

// ... project-specific imports ...
var d3 = require('d3')
var AmCharts = require('amcharts3-react');
var ReactFauxDOM = require('react-faux-dom')
var ReactFauxDOM = require('react-faux-dom')

const LSOPanel = React.createClass({

    getDefaultProps: function() {
      // ... a bunch of default prop vals for main component ...
    },

    getInitialState: function() {
        return {windowWidth: window.innerWidth,
            windowHeight: window.innerHeight,
            filterSearch: ""};
    },

    handleResize: function(e) {
        this.setState({windowWidth: window.innerWidth,
            windowHeight: window.innerHeight});
    },

    updateSearch: function(e) {
        this.setState({filterSearch: this.refs.search.getValue()})
    },

    componentDidMount: function() {
        window.addEventListener('resize', this.handleResize);
    },

    componentWillUnmount: function() {
        window.removeEventListener('resize', this.handleResize);
    },

  // ... a bunch of functioning code which should not effect AmCharts ... 

    // This should be the relevant code - create basic Gantt chart .jsx style ...
    getGanttChart: function () {
        var config =  {
            type: "gantt",
            period: "DD",
            valueAxis: {"type": "date" },
            brightnessStep: 10,
            graph: {
                "fillAlphas": 1,
                    "balloonText": "[[open]] - [[value]]"
            },
            rotate: true,
            categoryField: "category",
            segmentsField: "segments",
            dataDateFormat: "YYYY-MM-DD",
            startDateField: "start",
            endDateField: "end",
            dataProvider: [{
                "category": "John",
                "segments": [{
                    "start": "2015-01-02",
                    "end": "2015-01-03"
                }, {
                    "start": "2015-01-04",
                    "end": "2015-01-05"
                }, {
                    "start": "2015-01-07",
                    "end": "2015-01-10"
                }]
            }, {
                "category": "Smith",
                "segments": [{
                    "start": "2015-01-01",
                    "end": "2015-01-02"
                }, {
                    "start": "2015-01-10",
                    "end": "2015-01-15"
                }]
            }, {
                "category": "Ben",
                "segments": [{
                    "start": "2015-01-06",
                    "end": "2015-01-09"
                }, {
                    "start": "2015-01-11",
                    "end": "2015-01-18"
                }, {
                    "start": "2015-01-22",
                    "end": "2015-01-21"
                }]
            }],
            chartCursor: {
                "valueBalloonsEnabled": false,
                    "cursorAlpha": 0,
                    "valueLineBalloonEnabled": true,
                    "valueLineEnabled": true,
                    "valueZoomable":true,
                    "zoomable":false
            },
            valueScrollbar: {
                "position":"top",
                    "autoGridCount":true,
                    "color":"#000000"
            },
        };

        return <AmCharts {...config} />;
    },

  // ... More functioning code which should not eaffect AmCharts 

    // Rendering logic. This functions and calls getGantt() as expected, has been tested ... 
    render: function(){
      // ... Our rendering logic ... 
    },

});

LSOPanel.PropTypes = {
  // proptypes set here
}

export default LSOPanel

[sht5]

this happenned to me as well, i changed all require statements, put script tags instead:

and it worked. followed this jsbin, i think the problem was mostly the missing gantt.js file. http://jsfiddle.net/api/post/library/pure/

[sht5]

/**
 * Created by shahartaite on 05/01/2017.
 */

import React, {Component} from 'react';
const AmCharts = require('amcharts3-react');

class StatusGantt extends Component {

  render() {

    const ganttConfig = {
      "height" :"500",
      "type": "gantt",
      "theme": "light",
      "marginRight": 70,
      "period": "DD",
      "dataDateFormat": "YYYY-MM-DD",
      "columnWidth": 0.5,
      "valueAxis": {
        "type": "date"
      },
      "brightnessStep": 7,
      "graph": {
        "lineAlpha": 1,
        "lineColor": "#fff",
        "fillAlphas": 0.85,
        "balloonText": "<b>[[task]]</b>:<br />[[open]] -- [[value]]"
      },
      "rotate": true,
      "categoryField": "category",
      "segmentsField": "segments",
      "colorField": "color",
      "startDateField": "start",
      "endDateField": "end",
      "dataProvider": [ {
        "category": "Module #1",
        "segments": [ {
          "start": "2016-01-01",
          "end": "2016-01-14",
          "color": "#b9783f",
          "task": "Gathering requirements"
        }, {
          "start": "2016-01-16",
          "end": "2016-01-27",
          "color": "#000000",
          "task": "Producing specifications"
        }, {
          "start": "2016-02-05",
          "end": "2016-04-18",
          "task": "Development"
        }, {
          "start": "2016-04-18",
          "end": "2016-04-30",
          "task": "Testing and QA"
        } ]
      }, {
        "category": "Module #2",
        "segments": [ {
          "start": "2016-01-08",
          "end": "2016-01-10",
          "color": "#cc4748",
          "task": "Gathering requirements"
        }, {
          "start": "2016-01-12",
          "end": "2016-01-15",
          "task": "Producing specifications"
        }, {
          "start": "2016-01-16",
          "end": "2016-02-05",
          "task": "Development"
        }, {
          "start": "2016-02-10",
          "end": "2016-02-18",
          "task": "Testing and QA"
        } ]
      }, {
        "category": "Module #3",
        "segments": [ {
          "start": "2016-01-02",
          "end": "2016-01-08",
          "color": "#cd82ad",
          "task": "Gathering requirements"
        }, {
          "start": "2016-01-08",
          "end": "2016-01-16",
          "task": "Producing specifications"
        }, {
          "start": "2016-01-19",
          "end": "2016-03-01",
          "task": "Development"
        }, {
          "start": "2016-03-12",
          "end": "2016-04-05",
          "task": "Testing and QA"
        } ]
      }, {
        "category": "Module #4",
        "segments": [ {
          "start": "2016-01-01",
          "end": "2016-01-19",
          "color": "#2f4074",
          "task": "Gathering requirements"
        }, {
          "start": "2016-01-19",
          "end": "2016-02-03",
          "task": "Producing specifications"
        }, {
          "start": "2016-03-20",
          "end": "2016-04-25",
          "task": "Development"
        }, {
          "start": "2016-04-27",
          "end": "2016-05-15",
          "task": "Testing and QA"
        } ]
      }, {
        "category": "Module #5",
        "segments": [ {
          "start": "2016-01-01",
          "end": "2016-01-12",
          "color": "#448e4d",
          "task": "Gathering requirements"
        }, {
          "start": "2016-01-12",
          "end": "2016-01-19",
          "task": "Producing specifications"
        }, {
          "start": "2016-01-19",
          "end": "2016-03-01",
          "task": "Development"
        }, {
          "start": "2016-03-08",
          "end": "2016-03-30",
          "task": "Testing and QA"
        } ]
      } ],
      "valueScrollbar": {
        "autoGridCount": true
      },
      "chartCursor": {
        "cursorColor": "#55bb76",
        "valueBalloonsEnabled": false,
        "cursorAlpha": 0,
        "valueLineAlpha": 0.5,
        "valueLineBalloonEnabled": true,
        "valueLineEnabled": true,
        "zoomable": false,
        "valueZoomable": true
      },
      "export": {
        "enabled": true
      }
    };
    return (
      <AmCharts {...ganttConfig}/>
    );
  };
}
export default StatusGantt;

[adamcee]

Thanks very much @sht5 ! A teammate also came to that conclusion. Got it working.

FYI, the jsfiddle link you posted appears to be empty. However the code you posted is spot-on.

As a general note which may be of use to others, and to @Pauan , I initially tried to require('amcharts3/amcharts/gantt.js') (similarly to how, in the demo code for serial charts, serial.js is required, however the JSX compiler then throws an error on line 44 of gantt.js. However, when including gantt.js from amcharts.com as a script, it works fine.

[Pauan]

@adamcee Sorry for the delay.

You should configure your JSX compiler so that it ignores any files inside of node_modules, then you should be able to use require('amcharts3/amcharts/gantt.js')