config:
languages:
- javascript
+ exclude_paths:
+ - "samples/samples.js"
eslint:
enabled: true
channel: "eslint-3"
<head>
<title>Labelling Data Points</title>
- <script src="../dist/Chart.bundle.js"></script>
- <script src="utils.js"></script>
+ <script src="../../dist/Chart.bundle.js"></script>
+ <script src="../utils.js"></script>
<style>
canvas {
-moz-user-select: none;
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>area > boundaries | Chart.js sample</title>
- <link rel="stylesheet" type="text/css" href="../style.css">
- <script src="../../dist/Chart.bundle.js"></script>
- <script src="../utils.js"></script>
+ <link rel="stylesheet" type="text/css" href="../../style.css">
+ <script src="../../../dist/Chart.bundle.js"></script>
+ <script src="../../utils.js"></script>
<script src="analyser.js"></script>
</head>
<body>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>area > datasets | Chart.js sample</title>
- <link rel="stylesheet" type="text/css" href="../style.css">
- <script src="../../dist/Chart.bundle.js"></script>
- <script src="../utils.js"></script>
+ <link rel="stylesheet" type="text/css" href="../../style.css">
+ <script src="../../../dist/Chart.bundle.js"></script>
+ <script src="../../utils.js"></script>
<script src="analyser.js"></script>
</head>
<body>
<head>
<title>Line Chart</title>
- <script src="../../dist/Chart.bundle.js"></script>
- <script src="../utils.js"></script>
+ <script src="../../../dist/Chart.bundle.js"></script>
+ <script src="../../utils.js"></script>
<style>
canvas {
-moz-user-select: none;
borderColor: window.chartColors.red,
backgroundColor: window.chartColors.red,
data: [
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
randomScalingFactor()
],
}, {
borderColor: window.chartColors.blue,
backgroundColor: window.chartColors.blue,
data: [
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
randomScalingFactor()
],
}, {
borderColor: window.chartColors.green,
backgroundColor: window.chartColors.green,
data: [
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
randomScalingFactor()
],
}, {
borderColor: window.chartColors.yellow,
backgroundColor: window.chartColors.yellow,
data: [
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
randomScalingFactor()
],
}]
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>area > radar | Chart.js sample</title>
- <link rel="stylesheet" type="text/css" href="../style.css">
- <script src="../../dist/Chart.bundle.js"></script>
- <script src="../utils.js"></script>
+ <link rel="stylesheet" type="text/css" href="../../style.css">
+ <script src="../../../dist/Chart.bundle.js"></script>
+ <script src="../../utils.js"></script>
<script src="analyser.js"></script>
</head>
<body>
<head>
<title>Horizontal Bar Chart</title>
- <script src="../../dist/Chart.bundle.js"></script>
- <script src="../utils.js"></script>
+ <script src="../../../dist/Chart.bundle.js"></script>
+ <script src="../../utils.js"></script>
<style>
canvas {
-moz-user-select: none;
borderColor: window.chartColors.red,
borderWidth: 1,
data: [
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
randomScalingFactor()
]
}, {
backgroundColor: color(window.chartColors.blue).alpha(0.5).rgbString(),
borderColor: window.chartColors.blue,
data: [
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
randomScalingFactor()
]
}]
<head>
<title>Bar Chart Multi Axis</title>
- <script src="../../dist/Chart.bundle.js"></script>
- <script src="../utils.js"></script>
+ <script src="../../../dist/Chart.bundle.js"></script>
+ <script src="../../utils.js"></script>
<style>
canvas {
-moz-user-select: none;
],
yAxisID: "y-axis-1",
data: [
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
randomScalingFactor()
]
}, {
backgroundColor: window.chartColors.grey,
yAxisID: "y-axis-2",
data: [
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
randomScalingFactor()
]
}]
var ctx = document.getElementById("canvas").getContext("2d");
window.myBar = new Chart(ctx, {
type: 'bar',
- data: barChartData,
+ data: barChartData,
options: {
responsive: true,
title:{
<head>
<title>Stacked Bar Chart with Groups</title>
- <script src="../../dist/Chart.bundle.js"></script>
- <script src="../utils.js"></script>
+ <script src="../../../dist/Chart.bundle.js"></script>
+ <script src="../../utils.js"></script>
<style>
canvas {
-moz-user-select: none;
backgroundColor: window.chartColors.red,
stack: 'Stack 0',
data: [
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
randomScalingFactor()
]
}, {
backgroundColor: window.chartColors.blue,
stack: 'Stack 0',
data: [
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
randomScalingFactor()
]
}, {
backgroundColor: window.chartColors.green,
stack: 'Stack 1',
data: [
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
randomScalingFactor()
]
}]
<head>
<title>Stacked Bar Chart</title>
- <script src="../../dist/Chart.bundle.js"></script>
- <script src="../utils.js"></script>
+ <script src="../../../dist/Chart.bundle.js"></script>
+ <script src="../../utils.js"></script>
<style>
canvas {
-moz-user-select: none;
label: 'Dataset 1',
backgroundColor: window.chartColors.red,
data: [
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
randomScalingFactor()
]
}, {
label: 'Dataset 2',
backgroundColor: window.chartColors.blue,
data: [
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
randomScalingFactor()
]
}, {
label: 'Dataset 3',
backgroundColor: window.chartColors.green,
data: [
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
randomScalingFactor()
]
}]
<head>
<title>Bar Chart</title>
- <script src="../../dist/Chart.bundle.js"></script>
- <script src="../utils.js"></script>
+ <script src="../../../dist/Chart.bundle.js"></script>
+ <script src="../../utils.js"></script>
<style>
canvas {
-moz-user-select: none;
borderColor: window.chartColors.red,
borderWidth: 1,
data: [
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
randomScalingFactor()
]
}, {
borderColor: window.chartColors.blue,
borderWidth: 1,
data: [
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
randomScalingFactor()
]
}]
<head>
<title>Bubble Chart</title>
- <script src="../dist/Chart.bundle.js"></script>
- <script src="utils.js"></script>
+ <script src="../../dist/Chart.bundle.js"></script>
+ <script src="../utils.js"></script>
<style type="text/css">
canvas{
-moz-user-select: none;
<head>
<title>Combo Bar-Line Chart</title>
- <script src="../dist/Chart.bundle.js"></script>
- <script src="utils.js"></script>
+ <script src="../../dist/Chart.bundle.js"></script>
+ <script src="../utils.js"></script>
<style>
canvas {
-moz-user-select: none;
borderWidth: 2,
fill: false,
data: [
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
randomScalingFactor()
]
}, {
label: 'Dataset 2',
backgroundColor: window.chartColors.red,
data: [
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
randomScalingFactor()
],
borderColor: 'white',
label: 'Dataset 3',
backgroundColor: window.chartColors.green,
data: [
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
randomScalingFactor()
]
}]
<head>
<title>Doughnut Chart</title>
- <script src="../dist/Chart.bundle.js"></script>
- <script src="utils.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="../utils.js"></script>
+ <script src="../../../dist/Chart.bundle.js"></script>
+ <script src="../../utils.js"></script>
<style>
canvas{
-moz-user-select: none;
backgroundColor: window.chartColors.red,
borderColor: window.chartColors.red,
data: [
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
randomScalingFactor()
],
fill: false,
backgroundColor: window.chartColors.blue,
borderColor: window.chartColors.blue,
data: [
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
randomScalingFactor()
],
}]
<head>
<title>Line Chart - Cubic interpolation mode</title>
- <script src="../../dist/Chart.bundle.js"></script>
- <script src="../utils.js"></script>
+ <script src="../../../dist/Chart.bundle.js"></script>
+ <script src="../../utils.js"></script>
<style>
canvas{
-moz-user-select: none;
</script>
</body>
-</html>
\ No newline at end of file
+</html>
<head>
<title>Line Styles</title>
- <script src="../../dist/Chart.bundle.js"></script>
- <script src="../utils.js"></script>
+ <script src="../../../dist/Chart.bundle.js"></script>
+ <script src="../../utils.js"></script>
<style>
canvas{
-moz-user-select: none;
backgroundColor: window.chartColors.blue,
borderColor: window.chartColors.blue,
data: [
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
randomScalingFactor()
],
}, {
borderColor: window.chartColors.green,
borderDash: [5, 5],
data: [
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
randomScalingFactor()
],
}, {
backgroundColor: window.chartColors.red,
borderColor: window.chartColors.red,
data: [
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
randomScalingFactor()
],
fill: true,
<head>
<title>Line Chart Multiple Axes</title>
- <script src="../../dist/Chart.bundle.js"></script>
- <script src="../utils.js"></script>
+ <script src="../../../dist/Chart.bundle.js"></script>
+ <script src="../../utils.js"></script>
<style>
canvas {
-moz-user-select: none;
backgroundColor: window.chartColors.red,
fill: false,
data: [
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
randomScalingFactor()
],
yAxisID: "y-axis-1",
backgroundColor: window.chartColors.blue,
fill: false,
data: [
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
randomScalingFactor()
],
yAxisID: "y-axis-2"
<head>
<title>Different Point Sizes</title>
- <script src="../../dist/Chart.bundle.js"></script>
- <script src="../utils.js"></script>
+ <script src="../../../dist/Chart.bundle.js"></script>
+ <script src="../../utils.js"></script>
<style>
canvas {
-moz-user-select: none;
datasets: [{
label: "dataset - big points",
data: [
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
randomScalingFactor()
],
backgroundColor: window.chartColors.red,
}, {
label: "dataset - individual point sizes",
data: [
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
randomScalingFactor()
],
backgroundColor: window.chartColors.blue,
}, {
label: "dataset - large pointHoverRadius",
data: [
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
randomScalingFactor()
],
backgroundColor: window.chartColors.green,
}, {
label: "dataset - large pointHitRadius",
data: [
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
randomScalingFactor()
],
backgroundColor: window.chartColors.yellow,
<head>
<title>Line Chart</title>
- <script src="../../dist/Chart.bundle.js"></script>
- <script src="../utils.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="../utils.js"></script>
+ <script src="../../../dist/Chart.bundle.js"></script>
+ <script src="../../utils.js"></script>
<style>
canvas {
-moz-user-select: none;
fill: false,
// Skip a point in the middle
data: [
- randomScalingFactor(),
- randomScalingFactor(),
- NaN,
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ NaN,
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
randomScalingFactor()
],
fill: false,
// Skip first and last points
data: [
- NaN,
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
+ NaN,
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
NaN
],
}]
<head>
<title>Stepped Line Chart</title>
- <script src="../../dist/Chart.bundle.js"></script>
- <script src="../utils.js"></script>
+ <script src="../../../dist/Chart.bundle.js"></script>
+ <script src="../../utils.js"></script>
<style>
canvas{
-moz-user-select: none;
borderColor: window.chartColors.red,
backgroundColor: window.chartColors.red,
data: [
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
randomScalingFactor()
],
fill: false,
borderColor: window.chartColors.blue,
backgroundColor: window.chartColors.blue,
data: [
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
randomScalingFactor()
],
fill: false,
<head>
<title>Pie Chart</title>
- <script src="../dist/Chart.bundle.js"></script>
- <script src="utils.js"></script>
+ <script src="../../dist/Chart.bundle.js"></script>
+ <script src="../utils.js"></script>
</head>
<body>
<head>
<title>Polar Area Chart</title>
- <script src="../dist/Chart.bundle.js"></script>
- <script src="utils.js"></script>
+ <script src="../../dist/Chart.bundle.js"></script>
+ <script src="../utils.js"></script>
<style>
canvas {
-moz-user-select: none;
borderColor: window.chartColors.red,
pointBackgroundColor: window.chartColors.red,
data: [
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
randomScalingFactor()
]
}, {
borderColor: window.chartColors.blue,
pointBackgroundColor: window.chartColors.blue,
data: [
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
randomScalingFactor()
]
},]
<head>
<title>Scatter Chart</title>
- <script src="../../dist/Chart.bundle.js"></script>
- <script src="../utils.js"></script>
+ <script src="../../../dist/Chart.bundle.js"></script>
+ <script src="../../utils.js"></script>
<style>
canvas {
-moz-user-select: none;
<head>
<title>Scatter Chart Multi Axis</title>
- <script src="../../dist/Chart.bundle.js"></script>
- <script src="../utils.js"></script>
+ <script src="../../../dist/Chart.bundle.js"></script>
+ <script src="../../utils.js"></script>
<style>
canvas {
-moz-user-select: none;
position: "right",
reverse: true,
id: "y-axis-2",
-
+
// grid line settings
gridLines: {
drawOnChartArea: false, // only want the grid lines for one axis to show up
--- /dev/null
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+ <meta charset="utf-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=Edge">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <link rel="stylesheet" type="text/css" href="style.css">
+ <link rel="icon" href="favicon.ico">
+ <script src="samples.js"></script>
+ <title>Chart.js samples</title>
+</head>
+<body>
+ <div class="content">
+ <div class="header">
+ <div class="chartjs-title">Samples</div>
+ <div class="chartjs-caption">Simple yet flexible JavaScript charting for designers & developers</div>
+ <div class="chartjs-links">
+ <a class="btn btn-chartjs" href="http://www.chartjs.org">Website</a>
+ <a class="btn btn-docs" href="http://www.chartjs.org/docs">Documentation</a>
+ <a class="btn btn-gh" href="https://github.com/chartjs/Chart.js">GitHub</a>
+ </div>
+ </div>
+
+ <div id="categories" class="samples-categories"></div>
+ </div>
+
+ <script>
+ function createCategory(item) {
+ var el = document.createElement('div');
+ el.className = 'samples-category';
+ el.innerHTML =
+ '<div class="title">' + item.title + '</div>' +
+ '<div class="items"></div>';
+ return el;
+ }
+
+ function createEntry(item) {
+ var el = document.createElement('div');
+ el.className = 'samples-entry';
+ el.innerHTML = '<a class="title" href="' + item.path + '">' + item.title + '</a>';
+ return el;
+ }
+
+ var categories = document.getElementById('categories');
+ Samples.items.forEach(function(item) {
+ var category = createCategory(item);
+ var children = category.getElementsByClassName('items')[0];
+
+ (item.items || []).forEach(function(item) {
+ children.appendChild(createEntry(item));
+ });
+
+ categories.appendChild(category);
+ });
+ </script>
+</body>
+</html>
--- /dev/null
+<svg width="160" height="160" viewBox="0 0 160 160" xmlns="http://www.w3.org/2000/svg"><title>Artboard 6</title><g fill="none" fill-rule="evenodd"><path d="M144.086 80.568c-21.978.43-17.402 14.346-32.89 17.866C95.46 102.01 92.975 60 77.243 60c-15.733 0-19.216 40.806-38.918 68.823l-.56.794L80 154l64.086-37V80.568z" fill="#36A2EB"/><path d="M144.086 79.3C136.726 69.856 131.736 59 121 59c-19 0-14 31-35 31s-23.207-33.346-47-2c-7.58 9.988-13.682 21.124-18.475 31.662L80 154l64.086-37V79.3z" fill="#FFCE56"/><path d="M15.914 92.143C23.124 72.173 26.237 56 40 56c21 0 26 59 44 53s16-38 44-38c5.33 0 10.772 3.263 16.086 8.546V117L80 154l-64.086-37V92.143z" fill-opacity=".8" fill="#FE6184"/><path stroke="#E7E9ED" stroke-width="8" d="M80 6l64.086 37v74L80 154l-64.086-37V43z"/></g></svg>
\ No newline at end of file
--- /dev/null
+(function(global) {
+
+ var Samples = global.Samples || (global.Samples = {});
+
+ Samples.items = [{
+ title: 'Bar charts',
+ items: [{
+ title: 'Vertical',
+ path: 'charts/bar/vertical.html'
+ }, {
+ title: 'Horizontal',
+ path: 'charts/bar/horizontal.html'
+ }, {
+ title: 'Multi axis',
+ path: 'charts/bar/multi-axis.html'
+ }, {
+ title: 'Stacked',
+ path: 'charts/bar/stacked.html'
+ }, {
+ title: 'Stacked groups',
+ path: 'charts/bar/stacked-group.html'
+ }]
+ }, {
+ title: 'Line charts',
+ items: [{
+ title: 'Basic',
+ path: 'charts/line/basic.html'
+ }, {
+ title: 'Multi axis',
+ path: 'charts/line/multi-axis.html'
+ }, {
+ title: 'Stepped',
+ path: 'charts/line/stepped.html'
+ }, {
+ title: 'Interpolation',
+ path: 'charts/line/interpolation-modes.html'
+ }, {
+ title: 'Line styles',
+ path: 'charts/line/line-styles.html'
+ }, {
+ title: 'Point styles',
+ path: 'charts/line/point-styles.html'
+ }, {
+ title: 'Point sizes',
+ path: 'charts/line/point-sizes.html'
+ }]
+ }, {
+ title: 'Area charts',
+ items: [{
+ title: 'Boundaries (line)',
+ path: 'charts/area/line-boundaries.html'
+ }, {
+ title: 'Datasets (line)',
+ path: 'charts/area/line-datasets.html'
+ }, {
+ title: 'Stacked (line)',
+ path: 'charts/area/line-stacked.html'
+ }, {
+ title: 'Radar',
+ path: 'charts/area/radar.html'
+ }]
+ }, {
+ title: 'Other charts',
+ items: [{
+ title: 'Scatter',
+ path: 'charts/scatter/basic.html'
+ }, {
+ title: 'Scatter - Multi axis',
+ path: 'charts/scatter/multi-axis.html'
+ }, {
+ title: 'Doughnut',
+ path: 'charts/doughnut.html'
+ }, {
+ title: 'Pie',
+ path: 'charts/pie.html'
+ }, {
+ title: 'Polar area',
+ path: 'charts/polar-area.html'
+ }, {
+ title: 'Radar',
+ path: 'charts/radar.html'
+ }, {
+ title: 'Combo bar/line',
+ path: 'charts/combo-bar-line.html'
+ }]
+ }, {
+ title: 'Linear scale',
+ items: [{
+ title: 'Step size',
+ path: 'scales/linear/step-size.html'
+ }, {
+ title: 'Min & max',
+ path: 'scales/linear/min-max.html'
+ }, {
+ title: 'Min & max (suggested)',
+ path: 'scales/linear/min-max-suggested.html'
+ }]
+ }, {
+ title: 'Logarithmic scale',
+ items: [{
+ title: 'Line',
+ path: 'scales/logarithmic/line.html'
+ }, {
+ title: 'Scatter',
+ path: 'scales/logarithmic/scatter.html'
+ }]
+ }, {
+ title: 'Time scale',
+ items: [{
+ title: 'Line',
+ path: 'scales/time/line.html'
+ }, {
+ title: 'Line (point data)',
+ path: 'scales/time/line.html'
+ }, {
+ title: 'Combo',
+ path: 'scales/time/combo.html'
+ }]
+ }, {
+ title: 'Scale options',
+ items: [{
+ title: 'Grid lines display',
+ path: 'scales/gridlines-display.html'
+ }, {
+ title: 'Grid lines style',
+ path: 'scales/gridlines-style.html'
+ }, {
+ title: 'Multiline labels',
+ path: 'scales/multiline-labels.html'
+ }, {
+ title: 'Filtering Labels',
+ path: 'scales/filtering-labels.html'
+ }, {
+ title: 'Non numeric Y Axis',
+ path: 'scales/non-numeric-y.html'
+ }]
+ }, {
+ title: 'Legend',
+ items: [{
+ title: 'Positioning',
+ path: 'legend/positioning.html'
+ }, {
+ title: 'Point style',
+ path: 'legend/point-style.html'
+ }]
+ }, {
+ title: 'Tooltip',
+ items: [{
+ title: 'Positioning',
+ path: 'tooltips/positioning.html'
+ }, {
+ title: 'Interactions',
+ path: 'tooltips/interactions.html'
+ }, {
+ title: 'Callbacks',
+ path: 'tooltips/callbacks.html'
+ }, {
+ title: 'Border',
+ path: 'tooltips/border.html'
+ }, {
+ title: 'HTML tooltips (line)',
+ path: 'tooltips/custom-line.html'
+ }, {
+ title: 'HTML tooltips (pie)',
+ path: 'tooltips/custom-pie.html'
+ }, {
+ title: 'HTML tooltips (points)',
+ path: 'tooltips/custom-points.html'
+ }]
+ }, {
+ title: 'Advanced',
+ items: [{
+ title: 'Progress bar',
+ path: 'advanced/progress-bar.html'
+ }, {
+ title: 'Data labelling (plugin)',
+ path: 'advanced/data-labelling.html'
+ }]
+ }];
+
+}(this));
+@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
+@import url('https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900');
+
body, html {
- font-family: sans-serif;
+ color: #333538;
+ font-family: 'Lato', sans-serif;
+ line-height: 1.6;
padding: 0;
margin: 0;
}
+a {
+ color: #f27173;
+ text-decoration: none;
+}
+
+a:hover {
+ color: #e25f5f;
+ text-decoration: underline;
+}
+
.content {
max-width: 800px;
margin: auto;
- padding: 16px;
+ padding: 16px 32px;
+}
+
+.header {
+ text-align: center;
+ padding: 32px 0;
}
.wrapper {
margin: 0 8px 0 0;
}
+.btn {
+ background-color: #aaa;
+ border-radius: 4px;
+ color: white;
+ padding: 0.25rem 0.75rem;
+}
+
+.btn .fa {
+ font-size: 1rem;
+}
+
+.btn:hover {
+ background-color: #888;
+ color: white;
+ text-decoration: none;
+}
+
+.btn-chartjs { background-color: #f27173; }
+.btn-chartjs:hover { background-color: #e25f5f; }
+.btn-docs:hover { background-color: #2793db; }
+.btn-docs { background-color: #36A2EB; }
+.btn-docs:hover { background-color: #2793db; }
+.btn-gh { background-color: #444; }
+.btn-gh:hover { background-color: #333; }
+
.btn-on {
border-style: inset;
}
+.chartjs-title {
+ font-size: 2rem;
+ font-weight: 600;
+ white-space: nowrap;
+}
+
+.chartjs-title::before {
+ background-image: url(logo.svg);
+ background-position: left center;
+ background-repeat: no-repeat;
+ background-size: 40px;
+ content: 'Chart.js | ';
+ color: #f27173;
+ font-weight: 600;
+ padding-left: 48px;
+}
+
+.chartjs-caption {
+ font-size: 1.2rem;
+}
+
+.chartjs-links {
+ display: flex;
+ justify-content: center;
+ padding: 8px 0;
+}
+
+.chartjs-links a {
+ align-items: center;
+ display: flex;
+ font-size: 0.9rem;
+ margin: 0.2rem;
+}
+
+.chartjs-links .fa:before {
+ margin-right: 0.5em;
+}
+
+.samples-category {
+ display: inline-block;
+ margin-bottom: 32px;
+ vertical-align: top;
+ width: 25%;
+}
+
+.samples-category > .title {
+ color: #aaa;
+ font-weight: 300;
+ font-size: 1.5rem;
+}
+
+.samples-category:hover > .title {
+ color: black;
+}
+
+.samples-category > .items {
+ padding: 8px 0;
+}
+
+.samples-entry {
+ padding: 0 0 4px 0;
+}
+
+.samples-entry > .title {
+ font-weight: 700;
+}
+
+@media (max-width: 640px) {
+ .samples-category { width: 33%; }
+}
+
+@media (max-width: 512px) {
+ .samples-category { width: 50%; }
+}
+
+@media (max-width: 420px) {
+ .chartjs-caption { font-size: 1.05rem; }
+ .chartjs-title::before { content: ''; }
+ .chartjs-links a { flex-direction: column; }
+ .chartjs-links .fa { margin: 0 }
+ .samples-category { width: 100%; }
+}
+
.analyser table {
color: #333;
font-size: 0.9rem;
projects / thirdparty / Chart.js.git / commitdiff
