How to use chart with a Wagtail CMS

Question

I need to include custom charts to a streamfield function, as you can find with Tauchart.

But how is it possible to a user to modify the data from the wagtail admin? I have absolutely no idea on how I can do this.

I'm pondering about a form but it's possible to add a form to a streamfield ? I think yes, I can do it with a link to an existing form. But that seems hard to make and not a good idea.

What do you think about? What is the best practice for you ?

Do you have any examples of Taucharts integration into a CMS?

Answer 1

You could make a custom block inside blocks.py, for example LineChartBlock() that references a template called line_chart.html. You'll need to import your custom block into your models.py file to add it to your StreamField. Then a user on the CMS admin side can enter values and save them as parameters. Which you can then pass into the template as dynamic JavaScript variables, which you can use to create your custom chart. Here's a super rough idea...

So blocks.py would look like this:

from wagtail.core import blocks

class LineChartBlock(blocks.StructBlock):
    title = blocks.CharBlock()
    x = blocks.DecimalBlock()
    y = blocks.DecimalBlock()
    data = JSONField()

    class Meta:
        template = 'blocks/line_chart.html'

Your models.py:

class BlogPage(Page):
    body = StreamField([
        ('paragraph', RichTextBlock()),
        ('line_chart', LineChartBlock()),
    ])

Your template:

<script>
    const title = "{{ title }}";
    const x = "{{ x }}";
    const y = "{{ y }}";
    const data = "{{ data }}";

    makeChartWizardry = () => {
       doStuff;
    }

</script>

<section>
    <div id="chart"></div>
</section>