Mirrors/Chart.js
1
0
Fork 0
mirror of https://github.com/chartjs/Chart.js.git synced 2024-10-07 20:59:08 +02:00
Code Issues Packages Projects Releases Wiki Activity
cfb5fba527
Chart.js/samples/charts/line/skip-points.html

96 lines
1.8 KiB
HTML
Raw Normal View History

Reorganized sample files into sub directories. Added a helper containing colours that should be used by all samples. I added new samples to explain behaviour and modified all samples to have consistent styling. In updating the samples, I removed the use of jQuery and instead use standard methods. For the custom tooltip samples, I updated the styling to show color boxes like the regular tooltips.
2016-10-21 05:12:10 +02:00
<!doctype html>
<html>
<head>
Setup HTML and JS linters for samples (#5195)
2018-02-03 13:28:54 +01:00
<title>Line Chart</title>
Use `Chart.min.js` in samples (#5958) Samples are supposed to show good practices and in most cases we don't use the time scale but require `Chart.bundle.js`, which is not correct. Instead, we should require the non-bundled version in its minified version (`Chart.min.js`). Paradoxically, time based examples don't use `Chart.bundle.js` but require moment manually side to `Chart.min.js`, which IMO is also the correct way since it allows users to configure and use moment globally (TZ, locales, etc.) and doesn't enforce a specific moment version. Also remove the `data-labelling.html` example because we now have an [official plugin](https://github.com/chartjs/chartjs-plugin-datalabels) that implements this feature and don't want to deal with user custom code anymore.
2019-01-06 15:56:58 +01:00
<script src="../../../dist/Chart.min.js"></script>
Setup HTML and JS linters for samples (#5195)
2018-02-03 13:28:54 +01:00
<script src="../../utils.js"></script>
<style>
canvas {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
</style>
Reorganized sample files into sub directories. Added a helper containing colours that should be used by all samples. I added new samples to explain behaviour and modified all samples to have consistent styling. In updating the samples, I removed the use of jQuery and instead use standard methods. For the custom tooltip samples, I updated the styling to show color boxes like the regular tooltips.
2016-10-21 05:12:10 +02:00
</head>
<body>
Setup HTML and JS linters for samples (#5195)
2018-02-03 13:28:54 +01:00
<div style="width:75%;">
<canvas id="canvas"></canvas>
</div>
<script>
var config = {
type: 'line',
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
label: 'My First dataset',
borderColor: window.chartColors.red,
fill: false,
// Skip a point in the middle
data: [
randomScalingFactor(),
randomScalingFactor(),
NaN,
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor()
],
Reorganized sample files into sub directories. Added a helper containing colours that should be used by all samples. I added new samples to explain behaviour and modified all samples to have consistent styling. In updating the samples, I removed the use of jQuery and instead use standard methods. For the custom tooltip samples, I updated the styling to show color boxes like the regular tooltips.
2016-10-21 05:12:10 +02:00
Setup HTML and JS linters for samples (#5195)
2018-02-03 13:28:54 +01:00
}, {
label: 'My Second dataset',
borderColor: window.chartColors.blue,
fill: false,
// Skip first and last points
data: [
NaN,
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
NaN
],
}]
},
options: {
responsive: true,
title: {
display: true,
text: 'Chart.js Line Chart - Skip Points'
},
tooltips: {
mode: 'index',
},
hover: {
mode: 'index'
},
scales: {
Convert axis options from arrays to objects (#6773) * Convert axis options from arrays to objects * Updated all chart type defaults * Throw errors when axis type or position are not specified * Avoid raising unnecessary errors when merging options into the default configs * Fix additional tests * Ensure scale defaults are set if type is not explicitly defined * Another step * Include `scale` as `firstIDs.r` * update docs * Update for buildOrUpdateScales * Update migration guide * Add test back
2019-11-22 00:46:49 +01:00
x: {
Setup HTML and JS linters for samples (#5195)
2018-02-03 13:28:54 +01:00
display: true,
scaleLabel: {
display: true,
labelString: 'Month'
}
Convert axis options from arrays to objects (#6773) * Convert axis options from arrays to objects * Updated all chart type defaults * Throw errors when axis type or position are not specified * Avoid raising unnecessary errors when merging options into the default configs * Fix additional tests * Ensure scale defaults are set if type is not explicitly defined * Another step * Include `scale` as `firstIDs.r` * update docs * Update for buildOrUpdateScales * Update migration guide * Add test back
2019-11-22 00:46:49 +01:00
},
y: {
Setup HTML and JS linters for samples (#5195)
2018-02-03 13:28:54 +01:00
display: true,
scaleLabel: {
display: true,
labelString: 'Value'
},
Convert axis options from arrays to objects (#6773) * Convert axis options from arrays to objects * Updated all chart type defaults * Throw errors when axis type or position are not specified * Avoid raising unnecessary errors when merging options into the default configs * Fix additional tests * Ensure scale defaults are set if type is not explicitly defined * Another step * Include `scale` as `firstIDs.r` * update docs * Update for buildOrUpdateScales * Update migration guide * Add test back
2019-11-22 00:46:49 +01:00
}
Setup HTML and JS linters for samples (#5195)
2018-02-03 13:28:54 +01:00
}
}
};
Reorganized sample files into sub directories. Added a helper containing colours that should be used by all samples. I added new samples to explain behaviour and modified all samples to have consistent styling. In updating the samples, I removed the use of jQuery and instead use standard methods. For the custom tooltip samples, I updated the styling to show color boxes like the regular tooltips.
2016-10-21 05:12:10 +02:00
Setup HTML and JS linters for samples (#5195)
2018-02-03 13:28:54 +01:00
window.onload = function() {
var ctx = document.getElementById('canvas').getContext('2d');
window.myLine = new Chart(ctx, config);
};
</script>
Reorganized sample files into sub directories. Added a helper containing colours that should be used by all samples. I added new samples to explain behaviour and modified all samples to have consistent styling. In updating the samples, I removed the use of jQuery and instead use standard methods. For the custom tooltip samples, I updated the styling to show color boxes like the regular tooltips.
2016-10-21 05:12:10 +02:00
</body>
</html>
Reference in New Issue Copy Permalink