not work the example - Githubissues

ofirk12 commented 7 years ago

i am try to write : class ofir extends React.Component { constructor(props) { super(props); }

render() {
    return (React.createElement(AmCharts, {
        "path": "node_modules/amcharts3/amcharts",
        "type": "serial",
        "theme": "light",
        "marginRight": 40,
        "marginLeft": 40,
        "autoMarginOffset": 20,
        "mouseWheelZoomEnabled": true,
        "valueAxes": [{
            "id": "v1",
            "axisAlpha": 0,
            "position": "left",
            "ignoreAxisWidth": true
        }],
        "balloon": {
            "borderThickness": 1,
            "shadowAlpha": 0
        },
        "graphs": [{
            "id": "g1",
            "balloon":{
                "drop": true,
                "adjustBorderColor": false,
                "color":"#ffffff"
            },
            "bullet": "round",
            "bulletBorderAlpha": 1,
            "bulletColor": "#FFFFFF",
            "bulletSize": 5,
            "hideBulletsCount": 50,
            "lineThickness": 2,
            "title": "red line",
            "useLineColorForBulletBorder": true,
            "valueField": "value",
            "balloonText": "<span style='font-size:18px;'>[[value]]</span>"
        }],
        "chartScrollbar": {
            "graph": "g1",
            "oppositeAxis": false,
            "offset":30,
            "scrollbarHeight": 80,
            "backgroundAlpha": 0,
            "selectedBackgroundAlpha": 0.1,
            "selectedBackgroundColor": "#888888",
            "graphFillAlpha": 0,
            "graphLineAlpha": 0.5,
            "selectedGraphFillAlpha": 0,
            "selectedGraphLineAlpha": 1,
            "autoGridCount": true,
            "color":"#AAAAAA"
        },
        "chartCursor": {
            "pan": true,
            "valueLineEnabled": true,
            "valueLineBalloonEnabled": true,
            "cursorAlpha":1,
            "cursorColor":"#258cbb",
            "limitToGraph":"g1",
            "valueLineAlpha":0.2,
            "valueZoomable": true
        },
        "valueScrollbar":{
            "oppositeAxis": false,
            "offset":50,
            "scrollbarHeight":10
        },
        "categoryField": "date",
        "categoryAxis": {
            "parseDates": true,
            "dashLength": 1,
            "minorGridEnabled": true
        },
        "dataProvider": [{
            "date": "2012-07-27",
            "value": 13
        }, {
            "date": "2012-07-28",
            "value": 11
        }]
    })
    )
}

}

and in some render i write but nothing happen , what the problem ?

ofirk12 commented 7 years ago

also i tryed the example and this error message : React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). [2] dev:server UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Invariant Violation: removeComponentAsRefFrom(...): Only a ReactOwner can have refs. You might be removing a ref to a component that was not created inside a component's render method, or you have multiple copies of React loaded (details: https://fb.me/react-refs-must-have-owner).

Pauan commented 7 years ago

Hi @ofirk12,

Are you using a <script> tag or Webpack?

Try using AmCharts.React rather than AmCharts

foodaka commented 7 years ago

does this work with jsx? if so can we get an example?

Pauan commented 7 years ago

@foodaka Yes it does. There are examples on the main page.

ghost commented 7 years ago

@Pauan why is the example not in ES6? while we use ES6 we face issues.

Pauan commented 7 years ago

@Gangesh2493 What problems are you having?

The only difference for ES6 is that you have to use import AmCharts from "@amcharts/amcharts3-react"; rather than require. Everything else is exactly the same.

In addition, we have an example for ES6 in the examples/create-react-app folder.

ghost commented 7 years ago

ReferenceError: AmCharts is not defined. This is the error coming. I am using the example you have in the folder. but that error is being shown. I guess that is a general issue not related with ES6 in particular.

ghost commented 7 years ago

Hey. I used this in the HTML file so error has been removed but still, i am not seeing anything. I guess it's not rendering anything.

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

emorling commented 7 years ago

@Gangesh2493 not with ES6 in particular, as i have this error without it

ghost commented 7 years ago

@emorling did you find any solution for it? what are you using? are you using webpack? babel?

emorling commented 7 years ago

I am using web pack. But no solution yet :(

ons 16 aug. 2017 kl. 16:31 skrev Gangesh2493 notifications@github.com:

@emorling https://github.com/emorling did you find any solution for it? what are you using? are you using webpack? babel?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/amcharts/amcharts3-react/issues/12#issuecomment-322790689, or mute the thread https://github.com/notifications/unsubscribe-auth/AA8UahJDcHL44jixiSNIaMiWBpl7bNh8ks5sYv1egaJpZM4KbhuH .

ghost commented 7 years ago

@emorling so exactly what problem you are facing? i have used the package then i also inputted the source files in my html file there are no errors now but the graph is not displayed . are you facing the same problem?

emorling commented 7 years ago

I am getting "amcharts3-react.js:253 Uncaught ReferenceError: AmCharts is not defined”. I have followed all the steps in the walkthrough. Not sure what to do next. https://github.com/amcharts/amcharts3-react/issues/54 https://github.com/amcharts/amcharts3-react/issues/54

16 aug. 2017 kl. 18:41 skrev Gangesh2493 notifications@github.com:

so exactly what problem you are facing? i have used the package then i also inputted the source files in my html file there are no errors now but the graph is not displayed . are you facing the same problem?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/amcharts/amcharts3-react/issues/12#issuecomment-322830451, or mute the thread https://github.com/notifications/unsubscribe-auth/AA8UaimVAonp9JymCvsfqp6SFmSnsQpyks5sYxu3gaJpZM4KbhuH.

ghost commented 7 years ago

Even i was getting the same problem. I resolved this by adding these to the html file. but still not able to see the graph.

emorling commented 7 years ago

Strange, I did this but still get the error. I will dig deeper.

16 aug. 2017 kl. 20:28 skrev Gangesh2493 notifications@github.com:

Even i was getting the same problem. I resolved this by adding these to the html file. but still not able to see the graph.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/amcharts/amcharts3-react/issues/12#issuecomment-322859171, or mute the thread https://github.com/notifications/unsubscribe-auth/AA8UavNhp9uja94WaAQRYwRkfnEzVrL3ks5sYzTXgaJpZM4KbhuH.

ghost commented 7 years ago

yes sure. let me know too. https://github.com/amcharts/amcharts3-react/tree/4ae27d46e95a73160727245958698f8479fcc23a/examples/create-react-app. see this example just works fine. no problem at all.

ghost commented 7 years ago

but the thing is when we use webpack we need not to use the script tags at all and it should work fine without it.

ghost commented 7 years ago

@emorling mine is working. You need to include these in your html files.

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

Pauan commented 7 years ago

@Gangesh2493 It's completely fine to use <script> tags with Webpack.

And there are good reasons for why AmCharts v3 uses <script> tags.

If you're still having problems, please give me a Gist or GitHub repo with your code so that I can figure out the problem.

ghost commented 7 years ago

@Pauan I am still facing the problem it's not working as expected. I will give you a Gist or GitHub repo in some time . Please help me figure out the problem.

ghost commented 7 years ago

@Pauan I have sent you an invite for my repository. Please add yourself and take a look into it why the graphs are not displayed. There is no error coming but the graphs are not being displayed.

ghost commented 7 years ago

@Pauan I used some other library I can see graphs with that library but not with amcharts-react.

ghost commented 7 years ago

@Pauan I have the information in readme. Take a look and let me know the problem please. thanks.

emorling commented 7 years ago

Thank you! This worked for me.

17 aug. 2017 kl. 06:05 skrev Gangesh2493 notifications@github.com:

@emorling https://github.com/emorling mine is working. You need to include these in your html files.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/amcharts/amcharts3-react/issues/12#issuecomment-322963332, or mute the thread https://github.com/notifications/unsubscribe-auth/AA8Uao1C5IKERfrORadbYbo6Vz-bjeGUks5sY7vvgaJpZM4KbhuH.

Pauan commented 7 years ago

@Gangesh2493 Thank you for providing your code. I will look at it within the next couple days.

Pauan commented 7 years ago

@Gangesh2493 There was a bug with @amcharts/amcharts3-react version 2 which caused it to not display the chart in certain situations. I have fixed the bug.

Please follow these steps:

Upgrade to @amcharts/amcharts3-react version 3.0.0
Follow these directions to migrate your code to version 3.0.0

Set a width and height for the AmCharts.React element:

<AmCharts.React style={{ width: "100%", height: "500px" }} options={config} />

I have already pushed these changes to your Git repository.

RjNayak commented 7 years ago

@Pauan

I updated @amcharts/amcharts3-react to 3.0.0 I am using webpack 3.5.4 I am using the exact code in the Github no changes made.

I am still getting the below error . Could you please help?

Uncaught ReferenceError: AmCharts is not defined at bundle.js:20 at Object. (bundle.js:20) at t (bundle.js:1) at Object. (bundle.js:20) at t (bundle.js:1) at Object. (bundle.js:20) at t (bundle.js:1) at Object. (bundle.js:20) at t (bundle.js:1) at bundle.js:1 (anonymous) @ bundle.js:20 (anonymous) @ bundle.js:20 t @ bundle.js:1 (anonymous) @ bundle.js:20 t @ bundle.js:1 (anonymous) @ bundle.js:20 t @ bundle.js:1 (anonymous) @ bundle.js:20 t @ bundle.js:1 (anonymous) @ bundle.js:1 (anonymous) @ bundle.js:1

Moreover if you analyse amcharts3-react.js at line number 253 its having a line of code "AmCharts.React" from where we are getting this AmCharts I could not find it declared or defined anywhere.

amcharts / amcharts3-react

not work the example #12