Example shows Python Multi-Series Line Chart where multiple dataseries are plotted within a single chart. This makes it easier to compare & contrast between different datasets.
<!-- index.html -->
{% load static %}
<html>
<head>
<script>
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer", {
title:{
text: "Life Expectancy"
},
exportEnabled: true,
theme: "light2",
axisY: {
title: "Years"
},
legend: {
cursor: "pointer",
itemclick: toggleDataSeries
},
toolTip: {
shared: true
},
data: [
{
type: "line",
name: "Brazil",
color: "#079647",
showInLegend: true,
markerSize: 0,
yValueFormatString: "#,###.0# years",
dataPoints: {{ brazil_life_expectancy|safe }}
},
{
type: "line",
name: "China",
color: "#F7D701",
showInLegend: true,
markerSize: 0,
yValueFormatString: "#,###.0# years",
dataPoints: {{ china_life_expectancy|safe }}
},
{
type: "line",
name: "India",
color: "#1976D2",
showInLegend: true,
markerSize: 0,
yValueFormatString: "#,###.0# years",
dataPoints: {{ india_life_expectancy|safe }}
},
{
type: "line",
name: "Japan",
color: "#B6032C",
showInLegend: true,
markerSize: 0,
yValueFormatString: "#,###.0# years",
dataPoints: {{ japan_life_expectancy|safe }}
},
]
});
chart.render();
function toggleDataSeries(e) {
if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
e.dataSeries.visible = false;
} else {
e.dataSeries.visible = true;
}
e.chart.render();
}
}
</script>
</head>
<body>
<div id="chartContainer" style="width: 100%; height: 360px;"></div>
<script src="{% static 'canvasjs.min.js' %}"></script>
</body>
</html>
def index(request):
china_life_expectancy = [
{ "label": "2000", "y": 71.397 },
{ "label": "2001", "y": 71.732 },
{ "label": "2002", "y": 72.061 },
{ "label": "2003", "y": 72.381 },
{ "label": "2004", "y": 72.689 },
{ "label": "2005", "y": 72.985 },
{ "label": "2006", "y": 73.271 },
{ "label": "2007", "y": 73.553 },
{ "label": "2008", "y": 73.835 },
{ "label": "2009", "y": 74.119 },
{ "label": "2010", "y": 74.409 },
{ "label": "2011", "y": 74.708 },
{ "label": "2012", "y": 75.013 },
{ "label": "2013", "y": 75.321 },
{ "label": "2014", "y": 75.629 },
{ "label": "2015", "y": 75.928 },
{ "label": "2016", "y": 76.21 },
{ "label": "2017", "y": 76.47 },
{ "label": "2018", "y": 76.704 },
{ "label": "2019", "y": 76.912 },
{ "label": "2020", "y": 77.097 }
]
brazil_life_expectancy = [
{ "label": "2000", "y": 70.116 },
{ "label": "2001", "y": 70.462 },
{ "label": "2002", "y": 70.813 },
{ "label": "2003", "y": 71.17 },
{ "label": "2004", "y": 71.531 },
{ "label": "2005", "y": 71.896 },
{ "label": "2006", "y": 72.26 },
{ "label": "2007", "y": 72.618 },
{ "label": "2008", "y": 72.966 },
{ "label": "2009", "y": 73.3 },
{ "label": "2010", "y": 73.619 },
{ "label": "2011", "y": 73.921 },
{ "label": "2012", "y": 74.209 },
{ "label": "2013", "y": 74.483 },
{ "label": "2014", "y": 74.745 },
{ "label": "2015", "y": 74.994 },
{ "label": "2016", "y": 75.23 },
{ "label": "2017", "y": 75.456 },
{ "label": "2018", "y": 75.672 },
{ "label": "2019", "y": 75.881 },
{ "label": "2020", "y": 76.084 }
]
india_life_expectancy = [
{ "label": "2000", "y": 62.505 },
{ "label": "2001", "y": 62.907 },
{ "label": "2002", "y": 63.304 },
{ "label": "2003", "y": 63.699 },
{ "label": "2004", "y": 64.095 },
{ "label": "2005", "y": 64.5 },
{ "label": "2006", "y": 64.918 },
{ "label": "2007", "y": 65.35 },
{ "label": "2008", "y": 65.794 },
{ "label": "2009", "y": 66.244 },
{ "label": "2010", "y": 66.693 },
{ "label": "2011", "y": 67.13 },
{ "label": "2012", "y": 67.545 },
{ "label": "2013", "y": 67.931 },
{ "label": "2014", "y": 68.286 },
{ "label": "2015", "y": 68.607 },
{ "label": "2016", "y": 68.897 },
{ "label": "2017", "y": 69.165 },
{ "label": "2018", "y": 69.416 },
{ "label": "2019", "y": 69.656 },
{ "label": "2020", "y": 69.887 }
]
japan_life_expectancy = [
{ "label": "2000", "y": 81.07609756 },
{ "label": "2001", "y": 81.41707317 },
{ "label": "2002", "y": 81.56341463 },
{ "label": "2003", "y": 81.76 },
{ "label": "2004", "y": 82.0302439 },
{ "label": "2005", "y": 81.92512195 },
{ "label": "2006", "y": 82.32195122 },
{ "label": "2007", "y": 82.50707317 },
{ "label": "2008", "y": 82.58756098 },
{ "label": "2009", "y": 82.93146341 },
{ "label": "2010", "y": 82.84268293 },
{ "label": "2011", "y": 82.59121951 },
{ "label": "2012", "y": 83.09609756 },
{ "label": "2013", "y": 83.33195122 },
{ "label": "2014", "y": 83.58780488 },
{ "label": "2015", "y": 83.79390244 },
{ "label": "2016", "y": 83.98487805 },
{ "label": "2017", "y": 84.0997561 },
{ "label": "2018", "y": 84.21097561 },
{ "label": "2019", "y": 84.35634146 },
{ "label": "2020", "y": 84.61560976 }
]
return render(request, 'index.html', { "china_life_expectancy" : china_life_expectancy, "brazil_life_expectancy" : brazil_life_expectancy, "india_life_expectancy": india_life_expectancy, "japan_life_expectancy": japan_life_expectancy })
In multi series charts, each series is automatically assigned a color based on the selected theme. However, you can change the color of line by setting either lineColor or color properties. Color of the line between 2 datapoints also can be changed by defining lineColor property in datapoint level.