d.AmStockChart is not a constructor

foodaka commented 7 years ago

Im trying to use the stock price chart, is this possible?

var React = require("react");
var ReactDOM = require("react-dom");
var AmCharts = require("amcharts3-react");

var chartData1 = [];
var chartData2 = [];
var chartData3 = [];
var chartData4 = [];

// Generate random data
function generateChartData() {
  var firstDate = new Date();
  firstDate.setDate( firstDate.getDate() - 500 );
  firstDate.setHours( 0, 0, 0, 0 );

  for ( var i = 0; i < 500; i++ ) {
    var newDate = new Date( firstDate );
    newDate.setDate( newDate.getDate() + i );

    var a1 = Math.round( Math.random() * ( 40 + i ) ) + 100 + i;
    var b1 = Math.round( Math.random() * ( 1000 + i ) ) + 500 + i * 2;

    var a2 = Math.round( Math.random() * ( 100 + i ) ) + 200 + i;
    var b2 = Math.round( Math.random() * ( 1000 + i ) ) + 600 + i * 2;

    var a3 = Math.round( Math.random() * ( 100 + i ) ) + 200;
    var b3 = Math.round( Math.random() * ( 1000 + i ) ) + 600 + i * 2;

    var a4 = Math.round( Math.random() * ( 100 + i ) ) + 200 + i;
    var b4 = Math.round( Math.random() * ( 100 + i ) ) + 600 + i;

    chartData1.push( {
      "date": newDate,
      "value": a1,
      "volume": b1
    } );
    chartData2.push( {
      "date": newDate,
      "value": a2,
      "volume": b2
    } );
    chartData3.push( {
      "date": newDate,
      "value": a3,
      "volume": b3
    } );
    chartData4.push( {
      "date": newDate,
      "value": a4,
      "volume": b4
    } );
  }
}

// Component which contains the dynamic state for the chart
class Chart extends React.Component{

  render() {
      const config = {
        "path": "node_modules/amcharts3/amcharts",
        "type": "stock",
        "theme": "light",
        "dataSets": [ {
      "title": "first data set",
      "fieldMappings": [ {
        "fromField": "value",
        "toField": "value"
      }, {
        "fromField": "volume",
        "toField": "volume"
      } ],
      "dataProvider": chartData1,
      "categoryField": "date"
    }, {
      "title": "second data set",
      "fieldMappings": [ {
        "fromField": "value",
        "toField": "value"
      }, {
        "fromField": "volume",
        "toField": "volume"
      } ],
      "dataProvider": chartData2,
      "categoryField": "date"
    }, {
      "title": "third data set",
      "fieldMappings": [ {
        "fromField": "value",
        "toField": "value"
      }, {
        "fromField": "volume",
        "toField": "volume"
      } ],
      "dataProvider": chartData3,
      "categoryField": "date"
    }, {
      "title": "fourth data set",
      "fieldMappings": [ {
        "fromField": "value",
        "toField": "value"
      }, {
        "fromField": "volume",
        "toField": "volume"
      } ],
      "dataProvider": chartData4,
      "categoryField": "date"
    }
  ],

  "panels": [ {
    "showCategoryAxis": false,
    "title": "Value",
    "percentHeight": 70,
    "stockGraphs": [ {
      "id": "g1",
      "valueField": "value",
      "comparable": true,
      "compareField": "value",
      "balloonText": "[[title]]:<b>[[value]]</b>",
      "compareGraphBalloonText": "[[title]]:<b>[[value]]</b>"
    } ],
    "stockLegend": {
      "periodValueTextComparing": "[[percents.value.close]]%",
      "periodValueTextRegular": "[[value.close]]"
    }
  }, {
    "title": "Volume",
    "percentHeight": 30,
    "stockGraphs": [ {
      "valueField": "volume",
      "type": "column",
      "showBalloon": false,
      "fillAlphas": 1
    } ],
    "stockLegend": {
      "periodValueTextRegular": "[[value.close]]"
    }
  } ],

  "chartScrollbarSettings": {
    "graph": "g1"
  },

  "chartCursorSettings": {
    "valueBalloonsEnabled": true,
    "fullWidth": true,
    "cursorAlpha": 0.1,
    "valueLineBalloonEnabled": true,
    "valueLineEnabled": true,
    "valueLineAlpha": 0.5
  },

  "periodSelector": {
    "position": "left",
    "periods": [ {
      "period": "MM",
      "selected": true,
      "count": 1,
      "label": "1 month"
    }, {
      "period": "YYYY",
      "count": 1,
      "label": "1 year"
    }, {
      "period": "YTD",
      "label": "YTD"
    }, {
      "period": "MAX",
      "label": "MAX"
    } ]
  },

  "dataSetSelector": {
    "position": "left"
  },

  "export": {
    "enabled": true
  }
};

    // Render the chart
    console.log('chartData3',chartData3);
    return (
        <div style={{height:500,width:'50%'}}>
            <AmCharts {...config} />
        </div>
    )
  }
}

export default Chart

Pauan commented 7 years ago

@foodaka You have to add amstock3 to your package.json, like this:

{
  "dependencies": {
    "amstock3": "amcharts/amstock3"
  }
}

Then you have to require the AmStock library, like this:

var React = require("react");
var ReactDOM = require("react-dom");
var AmCharts = require("amcharts3-react");
require("amstock3/amcharts/amstock");

Note: It has to be after the require("amcharts3-react")

efillman commented 5 years ago

I am guessing from your code you were trying to do this in React and this is the only way I got it to work.

check your package.json and install as applicable, ensure that all three made it into your node modules folder.

"dependencies": {
"@amcharts/amcharts3-react": "^3.1.0",
"amcharts3": "^3.21.15",    
"amstock3": "^3.21.15",
} etc...

In your bootstrap or wherever you setup required code in your app require all the amcharts and amstock codebase.

require('amcharts3/amcharts/amcharts');
require('amcharts3/amcharts/gauge');
require('amcharts3/amcharts/serial');
require("@amcharts/amcharts3-react");
require('amstock3/amcharts/amstock');
require('amcharts3/amcharts/plugins/dataloader/dataloader.min.js');
require('amcharts3/amcharts/themes/dark.js');
require('amcharts3/amcharts/themes/light.js');

add all of these imports to your react component. The order of imports matters,

import 'amcharts3';
import 'amcharts3/amcharts/serial';
import 'amcharts3/amcharts/gauge';
import AmCharts from '@amcharts/amcharts3-react';
import 'amstock3/amcharts/amstock';
import 'amcharts3/amcharts/plugins/dataloader/dataloader.min.js';
import 'amcharts3/amcharts/themes/dark.js';
import 'amcharts3/amcharts/themes/light.js';

Compile and check that you have an object available called AmCharts in your DOM window. From here you should see all the chart types as well such as AmChart.AmStockChart. If you are able to access this type then you know all the amcharts and amstocks codebase is there and can narrow it down to "your" code.

Read the AmCharts.React documentation and check out the examples to build an easy chart. Once you are ready to switch to "stock" type you don't change the constructor, just switch the "type" to stock.

render: function () {
// Render the chart
return React.createElement(AmCharts.React, {
  style: {
    width: "100%",
    height: "500px"
  },
  options: {
    "type": "stock",
    "theme": "light",
    // "color": "#fff",
    "dataSets": [{

amcharts / amcharts3-react

d.AmStockChart is not a constructor #19