diff options
| author | pliablepixels <pliablepixels@gmail.com> | 2016-04-10 10:47:35 -0400 |
|---|---|---|
| committer | pliablepixels <pliablepixels@gmail.com> | 2016-04-10 10:47:35 -0400 |
| commit | a29f9a676a6ea3bad56ede05cd1a1c82ffbbe8e9 (patch) | |
| tree | 7e6e6bfb23390a64344fdfe2272a5da04c2dd97c /www/lib/Chart.js/samples/line-customTooltips.html | |
| parent | 42bc21f7d0b4acfeefa5f4c2708203be78f57778 (diff) | |
#219 - everything upgraded
Former-commit-id: 15f58d10df83feda8199a1b904433e625ef36b44
Diffstat (limited to 'www/lib/Chart.js/samples/line-customTooltips.html')
| -rw-r--r-- | www/lib/Chart.js/samples/line-customTooltips.html | 129 |
1 files changed, 0 insertions, 129 deletions
diff --git a/www/lib/Chart.js/samples/line-customTooltips.html b/www/lib/Chart.js/samples/line-customTooltips.html deleted file mode 100644 index 4dc46e1a..00000000 --- a/www/lib/Chart.js/samples/line-customTooltips.html +++ /dev/null @@ -1,129 +0,0 @@ -<!doctype html> -<html> - -<head> - <title>Line Chart with Custom Tooltips</title> - <script src="../Chart.js"></script> - <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> - - <style> - #canvas-holder1 { - width: 300px; - margin: 20px auto; - } - #canvas-holder2 { - width: 50%; - margin: 20px 25%; - } - #chartjs-tooltip { - opacity: 1; - position: absolute; - background: rgba(0, 0, 0, .7); - color: white; - padding: 3px; - border-radius: 3px; - -webkit-transition: all .1s ease; - transition: all .1s ease; - pointer-events: none; - -webkit-transform: translate(-50%, 0); - transform: translate(-50%, 0); - } - .chartjs-tooltip-key{ - display:inline-block; - width:10px; - height:10px; - } - </style> -</head> - -<body> - <div id="canvas-holder1"> - <canvas id="chart1" width="300" height="30" /> - </div> - <div id="canvas-holder2"> - <canvas id="chart2" width="450" height="600" /> - </div> - - <div id="chartjs-tooltip"></div> - - - <script> - - Chart.defaults.global.pointHitDetectionRadius = 1; - Chart.defaults.global.customTooltips = function(tooltip) { - - var tooltipEl = $('#chartjs-tooltip'); - - if (!tooltip) { - tooltipEl.css({ - opacity: 0 - }); - return; - } - - tooltipEl.removeClass('above below'); - tooltipEl.addClass(tooltip.yAlign); - - var innerHtml = ''; - for (var i = tooltip.labels.length - 1; i >= 0; i--) { - innerHtml += [ - '<div class="chartjs-tooltip-section">', - ' <span class="chartjs-tooltip-key" style="background-color:' + tooltip.legendColors[i].fill + '"></span>', - ' <span class="chartjs-tooltip-value">' + tooltip.labels[i] + '</span>', - '</div>' - ].join(''); - } - tooltipEl.html(innerHtml); - - tooltipEl.css({ - opacity: 1, - left: tooltip.chart.canvas.offsetLeft + tooltip.x + 'px', - top: tooltip.chart.canvas.offsetTop + tooltip.y + 'px', - fontFamily: tooltip.fontFamily, - fontSize: tooltip.fontSize, - fontStyle: tooltip.fontStyle, - }); - }; - var randomScalingFactor = function() { - return Math.round(Math.random() * 100); - }; - var lineChartData = { - labels: ["January", "February", "March", "April", "May", "June", "July"], - datasets: [{ - label: "My First dataset", - fillColor: "rgba(220,220,220,0.2)", - strokeColor: "rgba(220,220,220,1)", - pointColor: "rgba(220,220,220,1)", - pointStrokeColor: "#fff", - pointHighlightFill: "#fff", - pointHighlightStroke: "rgba(220,220,220,1)", - data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()] - }, { - label: "My Second dataset", - fillColor: "rgba(151,187,205,0.2)", - strokeColor: "rgba(151,187,205,1)", - pointColor: "rgba(151,187,205,1)", - pointStrokeColor: "#fff", - pointHighlightFill: "#fff", - pointHighlightStroke: "rgba(151,187,205,1)", - data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()] - }] - }; - - window.onload = function() { - var ctx1 = document.getElementById("chart1").getContext("2d"); - window.myLine = new Chart(ctx1).Line(lineChartData, { - showScale: false, - pointDot : true, - responsive: true - }); - - var ctx2 = document.getElementById("chart2").getContext("2d"); - window.myLine = new Chart(ctx2).Line(lineChartData, { - responsive: true - }); - }; - </script> -</body> - -</html> |