Example of charts
All charts
Bar Chart
# Bar Chart
graphics.append({
"type": "bar",
"data": {
"labels": ["January", "February", "March", "April", "May", "June", "July"],
"datasets": [{
"label": "Dataset 1",
"data": [65, 59, 80, 81, 56, 55, 40],
"backgroundColor": "rgba(75, 192, 192, 1)",
"borderColor": "rgba(75, 192, 192, 1)",
"borderWidth": 1
}]
},
"options": {
"scales": {
"x": {
"title": {
"display": True,
"text": "Months"
}
},
"y": {
"title": {
"display": True,
"text": "Value"
},
"beginAtZero": True
}
}
}
})
Line Chart
# Line Chart
graphics.append({
"type": "line",
"data": {
"labels": ["January", "February", "March", "April", "May", "June", "July"],
"datasets": [{
"label": "Dataset 1",
"data": [65, 59, 80, 81, 56, 55, 40],
"fill": False,
"borderColor": "rgba(75, 192, 192, 1)",
"tension": 0.1
}]
},
"options": {
"scales": {
"x": {
"title": {
"display": True,
"text": "Months"
}
},
"y": {
"title": {
"display": True,
"text": "Value"
},
"beginAtZero": True
}
}
}
})
Pie Chart
# Pie Chart
graphics.append({
"type": "pie",
"data": {
"labels": ["Red", "Blue", "Yellow"],
"datasets": [{
"label": "Dataset 1",
"data": [300, 50, 100],
"backgroundColor": [
"rgba(255, 99, 132, 1)",
"rgba(54, 162, 235, 1)",
"rgba(255, 206, 86, 1)"
],
"borderColor": [
"rgba(255, 99, 132, 1)",
"rgba(54, 162, 235, 1)",
"rgba(255, 206, 86, 1)"
],
"borderWidth": 1
}]
},
"options": {}
})
Doughnut Chart
# Doughnut Chart
graphics.append({
"type": "doughnut",
"data": {
"labels": ["Red", "Blue", "Yellow"],
"datasets": [{
"label": "Dataset 1",
"data": [300, 50, 100],
"backgroundColor": [
"rgba(255, 99, 132, 1)",
"rgba(54, 162, 235, 1)",
"rgba(255, 206, 86, 1)"
],
"borderColor": [
"rgba(255, 99, 132, 1)",
"rgba(54, 162, 235, 1)",
"rgba(255, 206, 86, 1)"
],
"borderWidth": 1
}]
},
"options": {}
})
Radar Chart
# Radar Chart
graphics.append({
"type": "radar",
"data": {
"labels": ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],
"datasets": [{
"label": "Dataset 1",
"data": [65, 59, 90, 81, 56, 55, 40],
"fill": True,
"backgroundColor": "rgba(75, 192, 192, 1)",
"borderColor": "rgba(75, 192, 192, 1)",
"pointBackgroundColor": "rgba(75, 192, 192, 1)",
"pointBorderColor": "#fff",
"pointHoverBackgroundColor": "#fff",
"pointHoverBorderColor": "rgba(75, 192, 192, 1)"
}]
},
"options": {
"elements": {
"line": {
"tension": 0.1
}
}
}
})
Polar Area Chart
# Polar Area Chart
graphics.append({
"type": "polarArea",
"data": {
"labels": ["Red", "Green", "Yellow", "Grey", "Blue"],
"datasets": [{
"label": "Dataset 1",
"data": [11, 16, 7, 3, 14],
"backgroundColor": [
"rgba(255, 99, 132, 1)",
"rgba(75, 192, 192, 1)",
"rgba(255, 206, 86, 1)",
"rgba(201, 203, 207, 1)",
"rgba(54, 162, 235, 1)"
],
"borderColor": [
"rgb(255, 99, 132)",
"rgb(75, 192, 192)",
"rgb(255, 206, 86)",
"rgb(201, 203, 207)",
"rgb(54, 162, 235)"
],
"borderWidth": 1
}]
},
"options": {}
})
Bubble Chart
# Bubble Chart
graphics.append({
"type": "bubble",
"data": {
"datasets": [{
"label": "Dataset 1",
"data": [
{"x": 20, "y": 30, "r": 15},
{"x": 40, "y": 10, "r": 10}
],
"backgroundColor": "rgba(75, 192, 192, 1)",
"borderColor": "rgba(75, 192, 192, 1)",
"borderWidth": 1
}]
},
"options": {
"scales": {
"x": {
"title": {
"display": True,
"text": "X Axis"
},
"beginAtZero": True # Start X axis at 0
},
"y": {
"title": {
"display": True,
"text": "Y Axis"
},
"beginAtZero": True # Start Y axis at 0
}
}
}
})
Scatter Chart
# Scatter Chart
graphics.append({
"type": "scatter",
"data": {
"datasets": [{
"label": "Scatter Dataset",
"data": [
{"x": -10, "y": 0},
{"x": 0, "y": 10},
{"x": 10, "y": 5},
{"x": 20, "y": 20},
{"x": 30, "y": 25}
],
"backgroundColor": "rgba(255, 99, 132, 1)"
}]
},
"options": {
"scales": {
"x": {
"title": {
"display": True,
"text": "X Axis"
},
"beginAtZero": True # Start X axis at 0
},
"y": {
"title": {
"display": True,
"text": "Y Axis"
},
"beginAtZero": True # Start Y axis at 0
}
}
}
})
Mixed Chart
# Mixed Chart (Bar + Line)
graphics.append({
"type": "bar",
"data": {
"labels": ["January", "February", "March", "April", "May", "June", "July"],
"datasets": [
{
"type": "bar",
"label": "Bar Dataset",
"data": [65, 59, 80, 81, 56, 55, 40],
"backgroundColor": "rgba(75, 192, 192, 0.2)",
"borderColor": "rgba(75, 192, 192, 1)",
"borderWidth": 1
},
{
"type": "line",
"label": "Line Dataset",
"data": [28, 48, 40, 19, 86, 27, 90],
"fill": False,
"borderColor": "rgba(255, 99, 132, 1)",
"tension": 0.1,
"pointRadius": 0
}
]
},
"options": {
"scales": {
"x": {
"title": {
"display": True,
"text": "Months"
}
},
"y": {
"title": {
"display": True,
"text": "Value"
},
"beginAtZero": True
}
}
}
})
References
Go To Top
How to cite
Go To Top
Authors And Reviewers
Go To Top
License
Go To Top
Acknowledgement
Go To Top