Created
August 12, 2015 13:37
-
-
Save anonymous/3d8fd68d86275f9ec6a9 to your computer and use it in GitHub Desktop.
JS Bin // source http://jsbin.com/nilili
This file contains hidden or 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
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>JS Bin</title> | |
| <script src="http://www.chartjs.org/assets/Chart.min.js"></script> | |
| <style> | |
| body, html{ | |
| text-align: center; | |
| height: 100%; | |
| width: 100%; | |
| overflow: hidden; | |
| background: -moz-linear-gradient(right top , #404852 0%, #38414B 100%); | |
| } | |
| canvas{margin-top:80px;} | |
| </style> | |
| </head> | |
| <body> | |
| <canvas id="doughnut" width="800" height="400"></canvas> | |
| <script> | |
| Chart.types.Line.extend({ | |
| name: "LineAlt", | |
| initialize: function (data) { | |
| Chart.types.Line.prototype.initialize.apply(this, arguments); | |
| var ctx = this.chart.ctx; | |
| // draw a line with the gradient, we use this to get each points color | |
| ctx.fillStyle = data.datasets[0].strokeColor; | |
| ctx.fillRect(0, 0, this.chart.width, 1); | |
| this.datasets.forEach(function (dataset) { | |
| dataset.points.forEach(function (point) { | |
| // get the color from the gradient drew above | |
| var imageData = ctx.getImageData(point.x, 0, 1, 1); | |
| var color = 'rgba(' + imageData.data[0] + ', ' + imageData.data[1] + ', ' + imageData.data[2] + ', ' + imageData.data[3] + ')'; | |
| // the _saved is used by the tooltip refresh to draw the point when you mouseout | |
| point.fillColor = color; | |
| point._saved.fillColor = color; | |
| point.strokeColor = color; | |
| point._saved.strokeColor = color; | |
| }) | |
| }) | |
| // we need to call the render function again to overwrite what was drawn in the initialize render (otherwise we don't see the changed color when animation is false) | |
| // this also wipes out the reference gradient | |
| this.render(); | |
| } | |
| }); | |
| var ctx = document.getElementById('doughnut').getContext("2d"); | |
| var gradient = ctx.createLinearGradient(500, 0, 0, 0); | |
| gradient.addColorStop(0, 'rgba(71, 228, 143, 0.1)'); | |
| gradient.addColorStop(1, 'rgba(47, 200, 238, 0.1)'); | |
| var gradientstroke = ctx.createLinearGradient(500, 0, 0, 0); | |
| gradientstroke.addColorStop(0, 'rgba(71, 228, 143, 1)'); | |
| gradientstroke.addColorStop(1, 'rgba(47, 200, 238, 1)'); | |
| var randomScalingFactor = function () { return Math.round(Math.random() * 100) }; | |
| var lineChartData = { | |
| labels: ["January", "February", "March", "April", "May", "June", "July"], | |
| datasets: [ | |
| { | |
| label: "My Second dataset", | |
| fillColor: gradient, | |
| strokeColor: gradientstroke, | |
| pointColor: '#fff', | |
| pointStrokeColor: "#fff", | |
| pointHighlightFill: "#fff", | |
| pointHighlightStroke: "rgba(151,187,205,1)", | |
| data: [100, 120, 150, 170, 180, 200, 160] | |
| } | |
| ] | |
| } | |
| new Chart(ctx).LineAlt(lineChartData, { scaleBeginAtZero: true, scaleShowGridLines :false,datasetStrokeWidth : 4 }) | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment