client-freqwatch/Chart.js/docs/00-Getting-Started.md

   1 ---
   2 title: Getting started
   3 anchor: getting-started
   4 ---
   5
   6 ###Include Chart.js
   7
   8 First we need to include the Chart.js library on the page. The library occupies a global variable of `Chart`.
   9
  10 ```html
  11 <script src="Chart.js"></script>
  12 ```
  13
  14 Alternatively, if you're using an AMD loader for JavaScript modules, that is also supported in the Chart.js core. Please note: the library will still occupy a global variable of `Chart`, even if it detects `define` and `define.amd`. If this is a problem, you can call `noConflict` to restore the global Chart variable to it's previous owner.
  15
  16 ```javascript
  17 // Using requirejs
  18 require(['path/to/Chartjs'], function(Chart){
  19         // Use Chart.js as normal here.
  20
  21         // Chart.noConflict restores the Chart global variable to it's previous owner
  22         // The function returns what was previously Chart, allowing you to reassign.
  23         var Chartjs = Chart.noConflict();
  24
  25 });
  26 ```
  27
  28 You can also grab Chart.js using bower:
  29
  30 ```bash
  31 bower install Chart.js --save
  32 ```
  33
  34 Also, Chart.js is available from CDN:
  35
  36 https://cdnjs.com/libraries/chart.js
  37
  38 ###Creating a chart
  39
  40 To create a chart, we need to instantiate the `Chart` class. To do this, we need to pass in the 2d context of where we want to draw the chart. Here's an example.
  41
  42 ```html
  43 <canvas id="myChart" width="400" height="400"></canvas>
  44 ```
  45
  46 ```javascript
  47 // Get the context of the canvas element we want to select
  48 var ctx = document.getElementById("myChart").getContext("2d");
  49 var myNewChart = new Chart(ctx).PolarArea(data);
  50 ```
  51
  52 We can also get the context of our canvas with jQuery. To do this, we need to get the DOM node out of the jQuery collection, and call the `getContext("2d")` method on that.
  53
  54 ```javascript
  55 // Get context with jQuery - using jQuery's .get() method.
  56 var ctx = $("#myChart").get(0).getContext("2d");
  57 // This will get the first returned node in the jQuery collection.
  58 var myNewChart = new Chart(ctx);
  59 ```
  60
  61 After we've instantiated the Chart class on the canvas we want to draw on, Chart.js will handle the scaling for retina displays.
  62
  63 With the Chart class set up, we can go on to create one of the charts Chart.js has available. In the example below, we would be drawing a Polar area chart.
  64
  65 ```javascript
  66 new Chart(ctx).PolarArea(data, options);
  67 ```
  68
  69 We call a method of the name of the chart we want to create. We pass in the data for that chart type, and the options for that chart as parameters. Chart.js will merge the global defaults with chart type specific defaults, then merge any options passed in as a second argument after data.
  70
  71 ###Global chart configuration
  72
  73 This concept was introduced in Chart.js 1.0 to keep configuration DRY, and allow for changing options globally across chart types, avoiding the need to specify options for each instance, or the default for a particular chart type.
  74
  75 ```javascript
  76 Chart.defaults.global = {
  77         // Boolean - Whether to animate the chart
  78         animation: true,
  79
  80         // Number - Number of animation steps
  81         animationSteps: 60,
  82
  83         // String - Animation easing effect
  84         // Possible effects are:
  85         // [easeInOutQuart, linear, easeOutBounce, easeInBack, easeInOutQuad,
  86         //  easeOutQuart, easeOutQuad, easeInOutBounce, easeOutSine, easeInOutCubic,
  87         //  easeInExpo, easeInOutBack, easeInCirc, easeInOutElastic, easeOutBack,
  88         //  easeInQuad, easeInOutExpo, easeInQuart, easeOutQuint, easeInOutCirc,
  89         //  easeInSine, easeOutExpo, easeOutCirc, easeOutCubic, easeInQuint,
  90         //  easeInElastic, easeInOutSine, easeInOutQuint, easeInBounce,
  91         //  easeOutElastic, easeInCubic]
  92         animationEasing: "easeOutQuart",
  93
  94         // Boolean - If we should show the scale at all
  95         showScale: true,
  96
  97         // Boolean - If we want to override with a hard coded scale
  98         scaleOverride: false,
  99
 100         // ** Required if scaleOverride is true **
 101         // Number - The number of steps in a hard coded scale
 102         scaleSteps: null,
 103         // Number - The value jump in the hard coded scale
 104         scaleStepWidth: null,
 105         // Number - The scale starting value
 106         scaleStartValue: null,
 107
 108         // String - Colour of the scale line
 109         scaleLineColor: "rgba(0,0,0,.1)",
 110
 111         // Number - Pixel width of the scale line
 112         scaleLineWidth: 1,
 113
 114         // Boolean - Whether to show labels on the scale
 115         scaleShowLabels: true,
 116
 117         // Interpolated JS string - can access value
 118         scaleLabel: "<%=value%>",
 119
 120         // Boolean - Whether the scale should stick to integers, not floats even if drawing space is there
 121         scaleIntegersOnly: true,
 122
 123         // Boolean - Whether the scale should start at zero, or an order of magnitude down from the lowest value
 124         scaleBeginAtZero: false,
 125
 126         // String - Scale label font declaration for the scale label
 127         scaleFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
 128
 129         // Number - Scale label font size in pixels
 130         scaleFontSize: 12,
 131
 132         // String - Scale label font weight style
 133         scaleFontStyle: "normal",
 134
 135         // String - Scale label font colour
 136         scaleFontColor: "#666",
 137
 138         // Boolean - whether or not the chart should be responsive and resize when the browser does.
 139         responsive: false,
 140
 141         // Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container
 142         maintainAspectRatio: true,
 143
 144         // Boolean - Determines whether to draw tooltips on the canvas or not
 145         showTooltips: true,
 146
 147         // Function - Determines whether to execute the customTooltips function instead of drawing the built in tooltips (See [Advanced - External Tooltips](#advanced-usage-custom-tooltips))
 148         customTooltips: false,
 149
 150         // Array - Array of string names to attach tooltip events
 151         tooltipEvents: ["mousemove", "touchstart", "touchmove"],
 152
 153         // String - Tooltip background colour
 154         tooltipFillColor: "rgba(0,0,0,0.8)",
 155
 156         // String - Tooltip label font declaration for the scale label
 157         tooltipFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
 158
 159         // Number - Tooltip label font size in pixels
 160         tooltipFontSize: 14,
 161
 162         // String - Tooltip font weight style
 163         tooltipFontStyle: "normal",
 164
 165         // String - Tooltip label font colour
 166         tooltipFontColor: "#fff",
 167
 168         // String - Tooltip title font declaration for the scale label
 169         tooltipTitleFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
 170
 171         // Number - Tooltip title font size in pixels
 172         tooltipTitleFontSize: 14,
 173
 174         // String - Tooltip title font weight style
 175         tooltipTitleFontStyle: "bold",
 176
 177         // String - Tooltip title font colour
 178         tooltipTitleFontColor: "#fff",
 179
 180         // Number - pixel width of padding around tooltip text
 181         tooltipYPadding: 6,
 182
 183         // Number - pixel width of padding around tooltip text
 184         tooltipXPadding: 6,
 185
 186         // Number - Size of the caret on the tooltip
 187         tooltipCaretSize: 8,
 188
 189         // Number - Pixel radius of the tooltip border
 190         tooltipCornerRadius: 6,
 191
 192         // Number - Pixel offset from point x to tooltip edge
 193         tooltipXOffset: 10,
 194         {% raw %}
 195         // String - Template string for single tooltips
 196         tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %>",
 197         {% endraw %}
 198         // String - Template string for multiple tooltips
 199         multiTooltipTemplate: "<%= value %>",
 200
 201         // Function - Will fire on animation progression.
 202         onAnimationProgress: function(){},
 203
 204         // Function - Will fire on animation completion.
 205         onAnimationComplete: function(){}
 206 }
 207 ```
 208
 209 If for example, you wanted all charts created to be responsive, and resize when the browser window does, the following setting can be changed:
 210
 211 ```javascript
 212 Chart.defaults.global.responsive = true;
 213 ```
 214
 215 Now, every time we create a chart, `options.responsive` will be `true`.