Error....Unexpected value matrix(NaN,NaN,NaN,NaN,0,0) parsing transform attribute.

MathewTx10 commented 7 years ago

I am getting this error "Unexpected value matrix(NaN,NaN,NaN,NaN,0,0) parsing transform attribute.." when loading a donut chart.

HTML Part

`

Bonds

        <div id="donut-example" style="height: 225px;"></div>

`

Script Part

Morris.Donut({ element: 'donut-example', data: [ {label: "Download Sales", value: 12}, {label: "In-Store Sales", value: 30}, {label: "Mail-Order Sales", value: 20} ] });

satyendrakumarsingh commented 7 years ago

Check your value and make sure that is in valid JS number format NaN means "Not a number".

MathewTx10 commented 7 years ago

satyendrakumarsingh -> I have check the value and it is ok. Am getting this from raphael.min.js which is a dependency of morris charts

satyendrakumarsingh commented 7 years ago

As you have updated your question every things are OK but make sure you have imported your script file in a valid order . For example see the below working code and put raphael dependency after jQuery and before morris js .

@MathewTx10

Example-

 <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
 <script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
 <script src="http://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>

Working Code-

<!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8 />
    <title>Morris Donut Chart</title>
    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
    <!--[if IE]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <script>
      $( document ).ready(function() {
        Morris.Donut({ 
         element: 'donut-example', 
         data: [{label: "Download Sales", value: 12}, 
                 {label: "In-Store Sales", value: 30}, 
                 {label: "Mail-Order Sales", value: 20}
                ] 
        });
      });

    </script>
</head>
<body>
 <div id="donut-example" style="height: 225px;"></div> 
</body>
</html>

spencershoell commented 6 years ago

I am getting the same error, but I was able to work around it by wrapping it in a setTimeout() function. I don't know why waiting a 1/10 of a second makes it work, but it does.

(function () {
    'use strict';

    var chart = null
    var data = [{}];

    $(document).ready(function () {
        (function () {
            setTimeout(function () {
                if (chart == null) {
                    chart = Morris.Donut({
                        element: 'source-donut-chart',
                        data: sourceData
                    });
                } else {
                    chart.setData(sourceData);
                }
            }, 100)
        })();
    });
})();

alejosv commented 5 years ago

@spencershoell your solution work for me, but I not feel good for this behavior. My sospec is morris.js need that raphael.js is loaded completely and this not happen always because javascript is async. A solution (little bit elegant) is load raphael.js in to header.

buraksaglikx commented 5 years ago

I am getting the same error, but I was able to work around it by wrapping it in a setTimeout() function. I don't know why waiting a 1/10 of a second makes it work, but it does.

(function () {
    'use strict';

    var chart = null
    var data = [{}];

    $(document).ready(function () {
        (function () {
            setTimeout(function () {
                if (chart == null) {
                    chart = Morris.Donut({
                        element: 'source-donut-chart',
                        data: sourceData
                    });
                } else {
                    chart.setData(sourceData);
                }
            }, 100)
        })();
    });
})();

I set the value to 150 instead of 100 and happened. thanks.

morrisjs / morris.js

Error....Unexpected value matrix(NaN,NaN,NaN,NaN,0,0) parsing transform attribute. #692

Bonds