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}})
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