Last active
September 18, 2016 14:19
-
-
Save katogiso/f80573512b84c2f5e118088f0fe4b9e8 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <head> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.js"></script> | |
| <!-- https://github.com/google/palette.js --> | |
| <script src="../../palette.js/palette.js"></script> | |
| </head> | |
| <body> | |
| <canvas id="myChart"></canvas> | |
| </body> | |
| <script> | |
| // get palette from palette.js | |
| var pal = palette('cb-BuGn', 8 ); | |
| var ctx = document.getElementById("myChart").getContext("2d"); | |
| Chart.defaults.global.elements.line.fill = false; | |
| Chart.defaults.global.elements.line.tension = 0; | |
| Chart.defaults.global.animation = 0; | |
| var myChart = new Chart( | |
| ctx, | |
| { | |
| type: 'line', | |
| data: { | |
| labels: [ "Day1", "Day2", "Day3" ], | |
| datasets: [ | |
| { | |
| label: "1st Line Chart", | |
| data: [ 27, 33, 49 ], | |
| borderColor: '#' + pal[3], | |
| backgroundColor: '#' + pal[3], | |
| pointRadius: 8, | |
| pointStyle: 'star', | |
| pointBorderWidth: 2, | |
| }, | |
| { | |
| label: "2nd Line Chart", | |
| data: [ 10, 50, 22 ], | |
| borderDash: [ 5, 10], | |
| borderColor: '#' + pal[4], | |
| backgroundColor: '#' + pal[4], | |
| pointRadius: 8, | |
| pointStyle: 'triangle', | |
| pointBorderWidth: 2, | |
| } | |
| ] | |
| }, | |
| options: { | |
| responsive: true, | |
| legend: { | |
| position: 'bottom', | |
| lineWidth: 0, | |
| labels: { | |
| fontSize: 12, | |
| boxWidth: 12, | |
| usePointStyle: true, | |
| generateLabels: function(chart){ | |
| return chart.data.datasets.map( function( dataset, i ){ | |
| return { | |
| text: dataset.label, | |
| fillStyle: dataset.backgroundColor, | |
| hidden: !chart.isDatasetVisible(i), | |
| lineCap: dataset.borderCapStyle, | |
| lineDash: [], | |
| lineDashOffset: 0, | |
| lineJoin: dataset.borderJoinStyle, | |
| lineWidth: dataset.pointBorderWidth, | |
| strokeStyle: dataset.borderColor, | |
| pointStyle: dataset.pointStyle, | |
| datasetIndex: i // extra data used for toggling the datasets | |
| }; | |
| }) | |
| } | |
| } | |
| }, | |
| title: { | |
| display: true, | |
| text: 'Multi Line Chart' | |
| }, | |
| scales: { | |
| yAxes: [ | |
| { | |
| ticks: { | |
| min: 0 | |
| }, | |
| scaleLabel: { | |
| display: true, | |
| labelString: "Values" | |
| } | |
| } | |
| ], | |
| xAxes: [ | |
| { | |
| scaleLabel: { | |
| display: true, | |
| labelString: "Date" | |
| } | |
| } | |
| ], | |
| } | |
| } | |
| }) | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment