Plotly Chart doesn't render. Shortcodes #461

Alrodr · 2021-09-19T19:16:14Z

Alrodr
Sep 19, 2021

Hello everyone,

I am trying to display a plot on one of my pages. Everything works for me on localhost, but not on the web. I have tried everything and I have searched a lot for documentation but I am not able to fix it.
Could someone help me?

I leave below all the code and schematics:

layouts/shortcodes/plotly.html
layouts/shortcodes/load-plotly.html
layouts/partials/head/head.html
content/es/docs/y/x.md
static/global_map_counts.json

Thank you very much!

CODE:
layouts/shortcodes/plotly.html

{{ $json := .Get "json" }}
{{ $height := .Get "height" | default "200px" }}
<div id="{{$json}}" class="plotly" style="height:{{$height}}"></div>
<script>
Plotly.d3.json({{$json}}, function(err, fig) {
    Plotly.plot('{{$json}}', fig.data, fig.layout, {responsive: true});
});
</script>

layouts/shortcodes/load-plotly.html

{{ if not ($.Page.Scratch.Get "plotlyloaded") }}
  {{ $.Page.Scratch.Set "plotlyloaded" 1 }}
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
{{ end }}

layouts/partials/head/head.html

<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  {{ block "head/resource-hints" . }}{{ partial "head/resource-hints.html" . }}{{ end }}
  {{ block "head/script-header" . }}{{ partial "head/script-header.html" . }}{{ end }}
  {{ block "head/stylesheet" . }}{{ partial "head/stylesheet.html" . }}{{ end }}
  {{ block "head/seo" . }}{{ partial "head/seo.html" . }}{{ end }}
  {{ block "head/favicons" . }}{{ partial "head/favicons.html" . }}{{ end }}

 {{- if .Params.Plotly }}
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
{{- end }}

content/es/docs/y/x.md

---
title: "X"
description: "X"
lead: "x"
date: 2020-10-06T08:48:57+00:00
lastmod: 2020-10-06T08:48:57+00:00
draft: false
images: []
menu:
  docs:
    parent: "y"
weight: 10
toc: true
plotly: true
---

{{< load-plotly >}}
{{< plotly json="/global_map_counts.json" height="450px" >}}

static/global_map_counts.json

{
  "data": [
      {
          "x": [
              "giraffes",
              "orangutans",
              "monkeys"
          ],
          "y": [
              20,
              14,
              23
          ],
          "type": "bar"
      }
  ]
}

Answered by h-enk

Sep 20, 2021

If you trust the external plotly script, you could add it to the Content-Security-Policy in ./layouts/index.headers: script-src 'self' https://cdn.plot.ly/plotly-latest.min.js;

Note 1) Laboratory could help you with remaining CSP issues:

Laboratory is an experimental Firefox extension that helps you generate a Content Security Policy (CSP) header for your website.

Source: Content Security Policy

Note 2) Doks uses npm for central dependency management. You could also install the Plotly npm package (recommended method)

View full answer

Alrodr · 2021-09-20T08:01:55Z

Alrodr
Sep 20, 2021
Author

Hello,

I think that the problem I have is related to CSP:

Thank you!

0 replies

Alrodr · 2021-09-20T12:35:55Z

Alrodr
Sep 20, 2021
Author

Hello again, I'm sure all my problems come from CSP.

I would like to be able to use the plotly graphics, as stated in my first message and at the same time in a secure way for my website. How could I set it all up?

Thank you very much

0 replies

h-enk · 2021-09-20T18:33:46Z

h-enk
Sep 20, 2021
Maintainer

If you trust the external plotly script, you could add it to the Content-Security-Policy in ./layouts/index.headers: script-src 'self' https://cdn.plot.ly/plotly-latest.min.js;

Note 1) Laboratory could help you with remaining CSP issues:

Laboratory is an experimental Firefox extension that helps you generate a Content Security Policy (CSP) header for your website.

Source: Content Security Policy

Note 2) Doks uses npm for central dependency management. You could also install the Plotly npm package (recommended method)

2 replies

Alrodr Sep 22, 2021
Author

First of all, thank you for your complete answer. I changed my CSP and It works! You are a genius!

Regards,

alberto

amberalpha Nov 11, 2021

@Alrodr could you share how you modified the CSP?

I have tried modifying ./layouts/index.headers locally (which works fine but already did) however when deployed on netlify the CSP gets overwritten and the support engineer has not really solved this https://answers.netlify.com/t/leaflet-and-plotly-widgets-generate-error/47135/6 .

Do you use netlify, have you solved this issue, or do you use another hosting service? It's tantalising to know that you have the solution... but what is it please?🙏

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Plotly Chart doesn't render. Shortcodes #461

{{title}}

Replies: 3 comments 2 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

Plotly Chart doesn't render. Shortcodes #461

Alrodr Sep 19, 2021

Replies: 3 comments · 2 replies

Alrodr Sep 20, 2021 Author

Alrodr Sep 20, 2021 Author

h-enk Sep 20, 2021 Maintainer

Alrodr Sep 22, 2021 Author

amberalpha Nov 11, 2021

Alrodr
Sep 19, 2021

Replies: 3 comments 2 replies

Alrodr
Sep 20, 2021
Author

Alrodr
Sep 20, 2021
Author

h-enk
Sep 20, 2021
Maintainer

Alrodr Sep 22, 2021
Author