<head>
<title> Animation Callbacks </title>
<script src="../../dist/Chart.bundle.js"></script>
- <script src="../chartColors.js"></script>
+ <script src="../utils.js"></script>
<style>
canvas {
-moz-user-select: none;
<button id="randomizeData">Randomize Data</button>
<script>
var MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
-
- var randomScalingFactor = function() {
- return Math.round(Math.random() * 100);
- };
-
var progress = document.getElementById('animationProgress');
-
var config = {
type: 'line',
data: {
<head>
<title>Horizontal Bar Chart</title>
<script src="../../dist/Chart.bundle.js"></script>
- <script src="../chartColors.js"></script>
+ <script src="../utils.js"></script>
<style>
canvas {
-moz-user-select: none;
<button id="removeData">Remove Data</button>
<script>
var MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
-
- var randomScalingFactor = function() {
- return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
- };
- var randomColorFactor = function() {
- return Math.round(Math.random() * 255);
- };
- var randomColor = function() {
- return 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',.7)';
- };
-
var color = Chart.helpers.color;
-
var horizontalBarChartData = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
<head>
<title>Bar Chart Multi Axis</title>
<script src="../../dist/Chart.bundle.js"></script>
- <script src="../chartColors.js"></script>
+ <script src="../utils.js"></script>
<style>
canvas {
-moz-user-select: none;
</div>
<button id="randomizeData">Randomize Data</button>
<script>
- var randomScalingFactor = function() {
- return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
- };
-
var barChartData = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
<head>
<title>Stacked Bar Chart</title>
<script src="../../dist/Chart.bundle.js"></script>
- <script src="../chartColors.js"></script>
+ <script src="../utils.js"></script>
<style>
canvas {
-moz-user-select: none;
</div>
<button id="randomizeData">Randomize Data</button>
<script>
- var randomScalingFactor = function() {
- return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
- };
-
var barChartData = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
<head>
<title>Bar Chart</title>
<script src="../../dist/Chart.bundle.js"></script>
- <script src="../chartColors.js"></script>
+ <script src="../utils.js"></script>
<style>
canvas {
-moz-user-select: none;
<button id="removeData">Remove Data</button>
<script>
var MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
-
- var randomScalingFactor = function() {
- return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
- };
- var randomColorFactor = function() {
- return Math.round(Math.random() * 255);
- };
- var randomColor = function() {
- return 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',.7)';
- };
-
var color = Chart.helpers.color;
var barChartData = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
<head>
<title>Bubble Chart</title>
<script src="../dist/Chart.bundle.js"></script>
- <script src="chartColors.js"></script>
+ <script src="utils.js"></script>
<style type="text/css">
canvas{
-moz-user-select: none;
var DEFAULT_DATASET_SIZE = 7;
var addedCount = 0;
-
- var randomScalingFactor = function() {
- return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
- };
-
var color = Chart.helpers.color;
var bubbleChartData = {
animation: {
<head>
<title>Combo Bar-Line Chart</title>
<script src="../dist/Chart.bundle.js"></script>
- <script src="chartColors.js"></script>
+ <script src="utils.js"></script>
<style>
canvas {
-moz-user-select: none;
</div>
<button id="randomizeData">Randomize Data</button>
<script>
- var randomScalingFactor = function() {
- return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
- };
-
var chartData = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
<head>
<title>Labelling Data Points</title>
<script src="../dist/Chart.bundle.js"></script>
- <script src="chartColors.js"></script>
+ <script src="utils.js"></script>
<style>
canvas {
-moz-user-select: none;
</div>
<button id="randomizeData">Randomize Data</button>
<script>
- var randomScalingFactor = function() {
- return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
- };
-
var color = Chart.helpers.color;
var barChartData = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
<head>
<title>Doughnut Chart</title>
<script src="../dist/Chart.bundle.js"></script>
- <script src="chartColors.js"></script>
+ <script src="utils.js"></script>
<style>
canvas {
-moz-user-select: none;
<head>
<title>Legend Point Style</title>
<script src="../../dist/Chart.bundle.js"></script>
- <script src="../chartColors.js"></script>
+ <script src="../utils.js"></script>
<style>
canvas {
-moz-user-select: none;
</div>
</div>
<script>
- var randomScalingFactor = function() {
- return Math.round(Math.random() * 100 * (Math.random() > 0.5 ? -1 : 1));
- };
-
var color = Chart.helpers.color;
function createConfig(colorName) {
return {
<head>
<title>Legend Positions</title>
<script src="../../dist/Chart.bundle.js"></script>
- <script src="../chartColors.js"></script>
+ <script src="../utils.js"></script>
<style>
canvas {
-moz-user-select: none;
</div>
</div>
<script>
- var randomScalingFactor = function() {
- return Math.round(Math.random() * 100 * (Math.random() > 0.5 ? -1 : 1));
- };
-
var color = Chart.helpers.color;
function createConfig(legendPosition, colorName) {
return {
<head>
<title>Different Point Sizes</title>
<script src="../../dist/Chart.bundle.js"></script>
- <script src="../chartColors.js"></script>
+ <script src="../utils.js"></script>
<style>
canvas {
-moz-user-select: none;
</div>
<script>
var MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
- var randomScalingFactor = function() {
- return Math.round(Math.random() * 100 * (Math.random() > 0.5 ? -1 : 1));
- };
-
var config = {
type: 'line',
data: {
<head>
<title>Line Chart - Cubic interpolation mode</title>
<script src="../../dist/Chart.bundle.js"></script>
- <script src="../chartColors.js"></script>
+ <script src="../utils.js"></script>
<style>
canvas{
-moz-user-select: none;
<head>
<title>Line Chart Multiple Axes</title>
<script src="../../dist/Chart.bundle.js"></script>
- <script src="../chartColors.js"></script>
+ <script src="../utils.js"></script>
<style>
canvas {
-moz-user-select: none;
</div>
<button id="randomizeData">Randomize Data</button>
<script>
- var randomScalingFactor = function() {
- return Math.round(Math.random() * 100 * (Math.random() > 0.5 ? -1 : 1));
- };
-
var lineChartData = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
<head>
<title>Line Chart</title>
<script src="../../dist/Chart.bundle.js"></script>
- <script src="../chartColors.js"></script>
+ <script src="../utils.js"></script>
<style>
canvas {
-moz-user-select: none;
<canvas id="canvas"></canvas>
</div>
<script>
- var randomScalingFactor = function() {
- return Math.round(Math.random() * 100);
- };
-
var config = {
type: 'line',
data: {
<head>
<title>Line Chart</title>
<script src="../../dist/Chart.bundle.js"></script>
- <script src="../chartColors.js"></script>
+ <script src="../utils.js"></script>
<style>
canvas {
-moz-user-select: none;
<button id="removeData">Remove Data</button>
<script>
var MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
-
- var randomScalingFactor = function() {
- return Math.round(Math.random() * 100 * (Math.random() > 0.5 ? -1 : 1));
- };
-
var config = {
type: 'line',
data: {
<head>
<title>Stepped Line Chart</title>
<script src="../../dist/Chart.bundle.js"></script>
- <script src="../chartColors.js"></script>
+ <script src="../utils.js"></script>
<style>
canvas{
-moz-user-select: none;
<canvas id="canvas"></canvas>
</div>
<script>
- var randomScalingFactor = function() {
- return (Math.random() > 0.5 ? -1 : 1) * Math.round(Math.random() * 100);
- };
var config = {
type: 'line',
data: {
<head>
<title>Line Styles</title>
<script src="../../dist/Chart.bundle.js"></script>
- <script src="../chartColors.js"></script>
+ <script src="../utils.js"></script>
<style>
canvas{
-moz-user-select: none;
<canvas id="canvas"></canvas>
</div>
<script>
- var randomScalingFactor = function() {
- return Math.round(Math.random() * 100);
- };
-
var config = {
type: 'line',
data: {
<head>
<title>Line Chart</title>
<script src="../../dist/Chart.bundle.js"></script>
- <script src="../chartColors.js"></script>
+ <script src="../utils.js"></script>
<style>
canvas{
-moz-user-select: none;
<button id="removeData">Remove Data</button>
<script>
var MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
-
- var randomScalingFactor = function() {
- return Math.round(Math.random() * 100);
- };
-
var config = {
type: 'line',
data: {
<head>
<title>Line Chart</title>
<script src="../../dist/Chart.bundle.js"></script>
- <script src="../chartColors.js"></script>
+ <script src="../utils.js"></script>
<style>
canvas{
-moz-user-select: none;
display:true,
text:'Point Style: ' + pointStyle
},
+ legend: {
+ display: false
+ },
elements: {
point: {
pointStyle: pointStyle
<head>
<title>Pie Chart</title>
<script src="../dist/Chart.bundle.js"></script>
- <script src="chartColors.js"></script>
+ <script src="utils.js"></script>
</head>
<body>
<head>
<title>Polar Area Chart</title>
<script src="../dist/Chart.bundle.js"></script>
- <script src="chartColors.js"></script>
+ <script src="utils.js"></script>
<style>
canvas {
-moz-user-select: none;
<head>
<title>Radar Chart</title>
<script src="../../dist/Chart.bundle.js"></script>
- <script src="../chartColors.js"></script>
+ <script src="../utils.js"></script>
<style>
canvas {
-moz-user-select: none;
<head>
<title>Radar Chart</title>
<script src="../../dist/Chart.bundle.js"></script>
- <script src="../chartColors.js"></script>
+ <script src="../utils.js"></script>
<style>
canvas {
-moz-user-select: none;
<head>
<title>Suggested Min/Max Settings</title>
<script src="../../dist/Chart.bundle.js"></script>
- <script src="../chartColors.js"></script>
+ <script src="../utils.js"></script>
<style>
canvas{
-moz-user-select: none;
<head>
<title>Chart with xAxis Filtering</title>
<script src="../../dist/Chart.bundle.js"></script>
- <script src="../chartColors.js"></script>
+ <script src="../utils.js"></script>
<style>
canvas {
-moz-user-select: none;
<head>
<title>Suggested Min/Max Settings</title>
<script src="../../dist/Chart.bundle.js"></script>
- <script src="../chartColors.js"></script>
+ <script src="../utils.js"></script>
<style>
canvas{
-moz-user-select: none;
<head>
<title>Line Chart</title>
<script src="../../dist/Chart.bundle.js"></script>
- <script src="../chartColors.js"></script>
+ <script src="../utils.js"></script>
<style>
canvas{
-moz-user-select: none;
</div>
<script>
var MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
-
- var randomScalingFactor = function() {
- return Math.round(Math.random() * 100);
- //return 0;
- };
- var randomColorFactor = function() {
- return Math.round(Math.random() * 255);
- };
- var randomColor = function(opacity) {
- return 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',' + (opacity || '.3') + ')';
- };
-
var config = {
type: 'line',
data: {
<head>
<title>Min/Max Settings</title>
- <script src="../../dist/Chart.bundle.js"></script>
- <script src="../chartColors.js"></script>
+ <script src="../../../dist/Chart.bundle.js"></script>
+ <script src="../../utils.js"></script>
<style>
canvas{
-moz-user-select: none;
<head>
<title>Line Chart</title>
- <script src="../../dist/Chart.bundle.js"></script>
- <script src="../chartColors.js"></script>
+ <script src="../../../dist/Chart.bundle.js"></script>
+ <script src="../../utils.js"></script>
<style>
canvas{
-moz-user-select: none;
<head>
<title>Suggested Min/Max Settings</title>
- <script src="../../dist/Chart.bundle.js"></script>
- <script src="../chartColors.js"></script>
+ <script src="../../../dist/Chart.bundle.js"></script>
+ <script src="../../utils.js"></script>
<style>
canvas{
-moz-user-select: none;
<head>
<title>Logarithmic Line Chart</title>
- <script src="../../dist/Chart.bundle.js"></script>
- <script src="../chartColors.js"></script>
+ <script src="../../../dist/Chart.bundle.js"></script>
+ <script src="../../utils.js"></script>
<style>
canvas {
-moz-user-select: none;
<head>
<title>Scatter Chart</title>
- <script src="../../dist/Chart.bundle.js"></script>
- <script src="../chartColors.js"></script>
+ <script src="../../../dist/Chart.bundle.js"></script>
+ <script src="../../utils.js"></script>
<style>
canvas {
-moz-user-select: none;
<head>
<title>Line Chart</title>
<script src="../../dist/Chart.bundle.js"></script>
- <script src="../chartColors.js"></script>
+ <script src="../utils.js"></script>
<style>
canvas{
-moz-user-select: none;
<head>
<title>Line Chart - Combo Time Scale</title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
- <script src="../../dist/Chart.js"></script>
- <script src="../chartColors.js"></script>
+ <script src="../../../dist/Chart.js"></script>
+ <script src="../../utils.js"></script>
<style>
canvas {
-moz-user-select: none;
<script>
var timeFormat = 'MM/DD/YYYY HH:mm';
- function randomScalingFactor() {
- return Math.round(Math.random() * 100 * (Math.random() > 0.5 ? -1 : 1));
- }
-
function newDateString(days) {
return moment().add(days, 'd').format(timeFormat);
}
<head>
<title>Time Scale Point Data</title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
- <script src="../../dist/Chart.js"></script>
- <script src="../chartColors.js"></script>
+ <script src="../../../dist/Chart.js"></script>
+ <script src="../../utils.js"></script>
<style>
canvas {
-moz-user-select: none;
<button id="addData">Add Data</button>
<button id="removeData">Remove Data</button>
<script>
- function randomScalingFactor() {
- return Math.round(Math.random() * 100 * (Math.random() > 0.5 ? -1 : 1));
- }
-
function newDate(days) {
return moment().add(days, 'd').toDate();
}
<head>
<title>Line Chart</title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
- <script src="../../dist/Chart.js"></script>
- <script src="../chartColors.js"></script>
+ <script src="../../../dist/Chart.js"></script>
+ <script src="../../utils.js"></script>
<style>
canvas {
-moz-user-select: none;
<button id="removeData">Remove Data</button>
<script>
var timeFormat = 'MM/DD/YYYY HH:mm';
-
- function randomScalingFactor() {
- return Math.round(Math.random() * 100 * (Math.random() > 0.5 ? -1 : 1));
- }
-
+
function newDate(days) {
return moment().add(days, 'd').toDate();
}
<head>
<title>Scatter Chart Multi Axis</title>
<script src="../../dist/Chart.bundle.js"></script>
- <script src="../chartColors.js"></script>
+ <script src="../utils.js"></script>
<style>
canvas {
-moz-user-select: none;
</div>
<button id="randomizeData">Randomize Data</button>
<script>
- var randomScalingFactor = function() {
- return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
- };
-
var color = Chart.helpers.color;
var scatterChartData = {
datasets: [{
<head>
<title>Scatter Chart</title>
<script src="../../dist/Chart.bundle.js"></script>
- <script src="../chartColors.js"></script>
+ <script src="../utils.js"></script>
<style>
canvas {
-moz-user-select: none;
</div>
<button id="randomizeData">Randomize Data</button>
<script>
- var randomScalingFactor = function() {
- return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
- };
-
var color = Chart.helpers.color;
var scatterChartData = {
datasets: [{
<head>
<title>Custom Tooltips using Data Points</title>
<script src="../../dist/Chart.bundle.js"></script>
- <script src="../chartColors.js"></script>
+ <script src="../utils.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<style>
canvas{
});
}
};
- var randomScalingFactor = function() {
- return Math.round(Math.random() * 100);
- };
var color = Chart.helpers.color;
var lineChartData = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
<head>
<title>Tooltip Interaction Modes</title>
<script src="../../dist/Chart.bundle.js"></script>
- <script src="../chartColors.js"></script>
+ <script src="../utils.js"></script>
<style>
canvas {
-moz-user-select: none;
<head>
<title>Line Chart with Custom Tooltips</title>
<script src="../../dist/Chart.bundle.js"></script>
- <script src="../chartColors.js"></script>
+ <script src="../utils.js"></script>
<style>
canvas{
-moz-user-select: none;
tooltipEl.style.fontStyle = tooltip._fontStyle;
tooltipEl.style.padding = tooltip.yPadding + 'px ' + tooltip.xPadding + 'px';
};
-
- var randomScalingFactor = function() {
- return Math.round(Math.random() * 100);
- };
+
var lineChartData = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
<head>
<title>Pie Chart with Custom Tooltips</title>
<script src="../../dist/Chart.bundle.js"></script>
- <script src="../chartColors.js"></script>
+ <script src="../utils.js"></script>
<style>
#canvas-holder {
<head>
<title>Tooltip Interaction Modes</title>
<script src="../../dist/Chart.bundle.js"></script>
- <script src="../chartColors.js"></script>
+ <script src="../utils.js"></script>
<style>
canvas {
-moz-user-select: none;
<head>
<title>Tooltip Hooks</title>
<script src="../../dist/Chart.bundle.js"></script>
- <script src="../chartColors.js"></script>
+ <script src="../utils.js"></script>
<style>
canvas {
-moz-user-select: none;
<canvas id="canvas"></canvas>
</div>
<script>
- var randomScalingFactor = function() {
- return Math.round(Math.random() * 100 * (Math.random() > 0.5 ? -1 : 1));
- };
-
var config = {
type: 'line',
data: {
blue: 'rgb(54, 162, 235)',
purple: 'rgb(153, 102, 255)',
grey: 'rgb(231,233,237)'
+};
+
+window.randomScalingFactor = function() {
+ return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
}
\ No newline at end of file