Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
- <meta http-equiv="x-ua-compatible" content="ie=edge">
- <title>La Voix 5 | Statistiques</title>
- <!-- Font Awesome -->
- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">
- <!-- Bootstrap core CSS -->
- <link href="stylesheets/bootstrap4.min.css" rel="stylesheet">
- <!-- Material Design Bootstrap -->
- <link href="stylesheets/mdb.css" rel="stylesheet">
- <!-- Your custom styles (optional) -->
- <link href="stylesheets/style-mdb.css" rel="stylesheet">
- </head>
- <body>
- <div class="container">
- <div class="row">
- <div class="col-md-3">
- <canvas id="ratioTurnAccepted"></canvas>
- </div><!--col-->
- </div>
- </div><!--container-->
- <!-- SCRIPTS -->
- <!-- JQuery -->
- <script type="text/javascript" src="javascript/jquery-3.1.1.min.js"></script>
- <!-- Bootstrap tooltips -->
- <script type="text/javascript" src="javascript/tether.min.js"></script>
- <!-- Bootstrap core JavaScript -->
- <script type="text/javascript" src="javascript/bootstrap4.min.js"></script>
- <!-- MDB core JavaScript -->
- <script type="text/javascript" src="javascript/mdb.js"></script>
- <script type="text/javascript">
- $(document).ready(function(){
- var data = [
- {
- value: 32,
- color:"#F7464A",
- highlight: "#FF5A5E",
- label: "Éric"
- },
- {
- value: 39,
- color: "#46BFBD",
- highlight: "#5AD3D1",
- label: "Isabelle"
- },
- {
- value: 26,
- color: "#FDB45C",
- highlight: "#FFC870",
- label: "Marc"
- },
- {
- value: 27,
- color: "#FDB45C",
- highlight: "#FFC870",
- label: "Pierre"
- }
- ]
- var option = {
- responsive: true,
- };
- // Get the context of the canvas element we want to select
- /*
- Chart.defaults.global = {
- // Boolean - Whether to animate the chart
- animation: true,
- // Number - Number of animation steps
- animationSteps: 60,
- // String - Animation easing effect
- // Possible effects are:
- // [easeInOutQuart, linear, easeOutBounce, easeInBack, easeInOutQuad,
- // easeOutQuart, easeOutQuad, easeInOutBounce, easeOutSine, easeInOutCubic,
- // easeInExpo, easeInOutBack, easeInCirc, easeInOutElastic, easeOutBack,
- // easeInQuad, easeInOutExpo, easeInQuart, easeOutQuint, easeInOutCirc,
- // easeInSine, easeOutExpo, easeOutCirc, easeOutCubic, easeInQuint,
- // easeInElastic, easeInOutSine, easeInOutQuint, easeInBounce,
- // easeOutElastic, easeInCubic]
- animationEasing: "easeOutQuart",
- // Boolean - If we should show the scale at all
- showScale: true,
- // Boolean - If we want to override with a hard coded scale
- scaleOverride: false,
- // ** Required if scaleOverride is true **
- // Number - The number of steps in a hard coded scale
- scaleSteps: null,
- // Number - The value jump in the hard coded scale
- scaleStepWidth: null,
- // Number - The scale starting value
- scaleStartValue: null,
- // String - Colour of the scale line
- scaleLineColor: "rgba(0,0,0,.1)",
- // Number - Pixel width of the scale line
- scaleLineWidth: 1,
- // Boolean - Whether to show labels on the scale
- scaleShowLabels: true,
- // Interpolated JS string - can access value
- scaleLabel: "<%=value%>",
- // Boolean - Whether the scale should stick to integers, not floats even if drawing space is there
- scaleIntegersOnly: true,
- // Boolean - Whether the scale should start at zero, or an order of magnitude down from the lowest value
- scaleBeginAtZero: false,
- // String - Scale label font declaration for the scale label
- scaleFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
- // Number - Scale label font size in pixels
- scaleFontSize: 12,
- // String - Scale label font weight style
- scaleFontStyle: "normal",
- // String - Scale label font colour
- scaleFontColor: "#666",
- // Boolean - whether or not the chart should be responsive and resize when the browser does.
- responsive: true,
- // Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container
- maintainAspectRatio: true,
- // Boolean - Determines whether to draw tooltips on the canvas or not
- showTooltips: true,
- // Function - Determines whether to execute the customTooltips function instead of drawing the built in tooltips (See [Advanced - External Tooltips](#advanced-usage-custom-tooltips))
- customTooltips: false,
- // Array - Array of string names to attach tooltip events
- tooltipEvents: ["mousemove", "touchstart", "touchmove"],
- // String - Tooltip background colour
- tooltipFillColor: "rgba(0,0,0,0.8)",
- // String - Tooltip label font declaration for the scale label
- tooltipFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
- // Number - Tooltip label font size in pixels
- tooltipFontSize: 14,
- // String - Tooltip font weight style
- tooltipFontStyle: "normal",
- // String - Tooltip label font colour
- tooltipFontColor: "#fff",
- // String - Tooltip title font declaration for the scale label
- tooltipTitleFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
- // Number - Tooltip title font size in pixels
- tooltipTitleFontSize: 14,
- // String - Tooltip title font weight style
- tooltipTitleFontStyle: "bold",
- // String - Tooltip title font colour
- tooltipTitleFontColor: "#fff",
- // Number - pixel width of padding around tooltip text
- tooltipYPadding: 6,
- // Number - pixel width of padding around tooltip text
- tooltipXPadding: 6,
- // Number - Size of the caret on the tooltip
- tooltipCaretSize: 8,
- // Number - Pixel radius of the tooltip border
- tooltipCornerRadius: 6,
- // Number - Pixel offset from point x to tooltip edge
- tooltipXOffset: 10,
- // String - Template string for single tooltips
- tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %>",
- // String - Template string for multiple tooltips
- multiTooltipTemplate: "<%= value %>",
- // Function - Will fire on animation progression.
- onAnimationProgress: function(){},
- // Function - Will fire on animation completion.
- onAnimationComplete: function(){}
- }*/
- var ctx = document.getElementById("ratioTurnAccepted");
- console.log(ctx);
- var myPieChart = new Chart(ctx).Pie(data,option);
- console.log(myPieChart);
- });
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement