search

dsuryd / dotNetify

Simple, lightweight, yet powerful way to build real-time web apps.
https://dotnetify.net
Other
1.17k stars 164 forks source link

Chart not getting rendered when using dotnetify #262

Closed chiragmansata closed 4 years ago

chiragmansata commented 4 years ago

Hello, I am using dotnetify for building a real time graphing application. I am trying to integrate HighCharts/Plotly.js as my charting library. My entire application works fine but for the charting part I am getting this strange issue where the charts from any of the above library are not getting rendered when using dotnetify. If I remove the import of dotnetify from my react app it works and am able to see the charts.

Can you please help/suggest why this may be happening or how to know the root cause. I have a created a very small application as well for demonstrating the issue available at (https://github.com/chiragmansata/DemoChartApplication.git)

Looking forward for your help.

Thanks

dsuryd commented 4 years ago

Hi, this is an interesting issue. Apparently those plots will use jQuery if it's available in window global variable. Unfortunately dotNetify is injecting a shim with the same name if none exists, and since the shim is only a subset of the actual jQuery, it breaks the plots.

The workaround is fortunately simple: add the jQuery script tag to your index.html. Either use CDN or make a local file:

   ...
    <title>WebApplication1</title>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"
      integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg=="
      crossorigin="anonymous"
    ></script>
  </head>
chiragmansata commented 4 years ago

Hello, Thanks a lot for the quick response and you are correct adding jQuery did solved the issue for me. So closing this issue. Thanks again.