1
votes

I installed Plotly.js with bower and added script reference in my view page but when I run my page, console says "Uncaught Reference error : Plotly is not defined"

below is my settings :

bower.json

{
    "name": "ASP.NET",
    "private": true,
    "dependencies":
    {
        "bootstrap": "3.3.6",
        "jquery": "2.1.4",
        "jquery-validation": "1.15.0",
        "jquery-validation-unobtrusive": "~3.2.6",
        "gl-matrix": "~2.3.2",
        "pixi": "~3.0.11",
        "requirejs": "2.2.0",
        "pixi-particles": "1.6.7",
        "d3": "3.5.17",
        "plotly.js": "~1.12.0"

    },
    "resolutions":
    {
        "jquery": "~2.2.4"
    }
}

html page with script

@using System.Collections.Generic
@using Microsoft.AspNet.Http
@using Microsoft.AspNet.Authentication
@using WebApplication1.Controllers

@model PitchGraphViewModel

@{
    ViewData["Title"] = "Example Page";
}
<meta charset="utf-8" />
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<script type="text/javascript" src="~/lib/plotly.js/dist/plotly.js" charset="utf-8"></script>
<!DOCTYPE HTML>
<html>
<head>
    <title>Webgl test page</title>
</head>

<body>
    <canvas id="mycanvas" width="500" height="500"></canvas>
    <div id="tester" style="width:600px;height:250px;"></div>
</body>
</html>
<script>

    var TESTER = document.getElementById('tester');
    Plotly.plot(TESTER, [{
        x: [1, 2, 3, 4, 5],
        y: [1, 2, 4, 8, 16]
    }], {
        margin: { t: 0 }


    });


</script>

plotly.js folder structure plotly.js folder structure

I tried requirejs shim config as this page but it failed : Using RequireJS to load plotly and D3

I checked plotly.js is downloaded on page visit with browser developer tool but 'Plotly' still remains undefined.

1

1 Answers

0
votes

It solved by removing Requirejs script reference from layout page. Still I don't know why it happens. Maybe conflict?