pythonchart.jsweb2pypychart

how do I render PyChart.JS charts in web2py?


So I'm trying to make use of the PyChartJS module and so far I have this. This is the class for the PieChart:

class newPieChart(BaseChart):

def setData(self, _data: dict):
    self.data.data = [_ for _ in _data.values()]
    return

def setLabels(self, _labels: list):
    self.labels.labels = [_ for _ in _labels]
    return

type = ChartType.Pie

class labels:
    labels = []

class data:
    data = []

And I'm using setData() to fill the chart with data

{'Allowance': 20.0, 'Bonus': 30.0, 'Other': 80.0, 'Salary': 300.0}

Now, whenever I try newPieChart.get() I get the JSON back needed for the render in JS. This is what it returns:

{'type': 'pie', 'data': {'labels': [], 'datasets': [{'data': [20.0, 30.0, 80.0, 300.0]}]}, 'options': {'plugins': {}}}

The chart however doesn't render, as this is how it shows up in my JS code:

{'type': 'pie', 'data': {'labels': [], 'datasets': [{'data': [20.0, 30.0, 80.0, 300.0]}]}, 'options': {'plugins': {}}}

My question is, how do I render this chart correctly? How do I fix this? This is how I implemented it in my JavaScript code:

var ctx = document.getElementById('expense').getContext('2d');
var expensechart = new Chart(ctx, {{=chart}})

Solution

  • I fixed the issue by calling the built-in XML() helper

    var expensechart = new Chart(ctx, {{=XML(chart)}})
    

    This fixes the issue of JSON not rendering correctly inside the HTML