xAxisID | `String` | The ID of the x axis to plot this dataset on
yAxisID | `String` | The ID of the y axis to plot this dataset on
fill | `Boolean` | If true, fill the area under the line
-cubicInterpolationMode | `String` | Algorithm used to interpolate a smooth curve from the discrete data points. Options are 'default' and 'monotone'. The 'default' algorithm uses a custom weighted cubic interpolation, which produces pleasant curves for all types of datasets. The 'monotone' algorithm is more suited to `y = f(x)` datasets : it preserves monotonicity (or piecewise monotonicity) of the dataset being interpolated, and ensures local extremums (if any) stay at input data points. If unknown or `undefined`, this options is treated as 'default'.
+cubicInterpolationMode | `String` | Algorithm used to interpolate a smooth curve from the discrete data points. Options are 'default' and 'monotone'. The 'default' algorithm uses a custom weighted cubic interpolation, which produces pleasant curves for all types of datasets. The 'monotone' algorithm is more suited to `y = f(x)` datasets : it preserves monotonicity (or piecewise monotonicity) of the dataset being interpolated, and ensures local extremums (if any) stay at input data points. If left untouched (`undefined`), the global `options.elements.line.cubicInterpolationMode` property is used.
lineTension | `Number` | Bezier curve tension of the line. Set to 0 to draw straightlines. This option is ignored if monotone cubic interpolation is used. *Note* This was renamed from 'tension' but the old name still works.
backgroundColor | `Color` | The fill color under the line. See [Colors](#chart-configuration-colors)
borderWidth | `Number` | The width of the line in pixels
--- /dev/null
+<!doctype html>
+<html>
+
+<head>
+ <title>Line Chart - Cubic interpolation mode</title>
+ <script src="../dist/Chart.bundle.js"></script>
+ <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
+ <style>
+ canvas{
+ -moz-user-select: none;
+ -webkit-user-select: none;
+ -ms-user-select: none;
+ }
+ </style>
+</head>
+
+<body>
+ <div style="width:75%;">
+ <canvas id="canvas"></canvas>
+ </div>
+ <br>
+ <br>
+ <button id="randomizeData">Randomize Data</button>
+ <script>
+
+ 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 datapoints = [0, 20, 20, 60, 60, 120, NaN, 180, 120, 125, 105, 110, 170];
+ var config = {
+ type: 'line',
+ data: {
+ labels: ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"],
+ datasets: [{
+ label: "Cubic interpolation (monotone)",
+ data: datapoints,
+ borderColor: 'rgba(255, 0, 0, 0.7)',
+ backgroundColor: 'rgba(0, 0, 0, 0)',
+ fill: false,
+ cubicInterpolationMode: 'monotone'
+ }, {
+ label: "Cubic interpolation (default)",
+ data: datapoints,
+ borderColor: 'rgba(0, 0, 255, 0.3)',
+ backgroundColor: 'rgba(0, 0, 0, 0)',
+ fill: false,
+ }, {
+ label: "Linear interpolation",
+ data: datapoints,
+ borderColor: 'rgba(0, 0, 0, 0.10)',
+ backgroundColor: 'rgba(0, 0, 0, 0)',
+ fill: false,
+ lineTension: 0
+ }]
+ },
+ options: {
+ responsive: true,
+ title:{
+ display:true,
+ text:'Chart.js Line Chart - Cubic interpolation mode'
+ },
+ tooltips: {
+ mode: 'label'
+ },
+ hover: {
+ mode: 'dataset'
+ },
+ scales: {
+ xAxes: [{
+ display: true,
+ scaleLabel: {
+ display: true
+ }
+ }],
+ yAxes: [{
+ display: true,
+ scaleLabel: {
+ display: true,
+ labelString: 'Value'
+ },
+ ticks: {
+ suggestedMin: -10,
+ suggestedMax: 200,
+ }
+ }]
+ }
+ }
+ };
+
+ window.onload = function() {
+ var ctx = document.getElementById("canvas").getContext("2d");
+ window.myLine = new Chart(ctx, config);
+ };
+
+ $('#randomizeData').click(function() {
+ for (var i = 0, len = datapoints.length; i < len; ++i) {
+ datapoints[i] = Math.random() < 0.05 ? NaN : randomScalingFactor();
+ }
+ window.myLine.update();
+ });
+
+ </script>
+</body>
+
+</html>
\ No newline at end of file
borderJoinStyle: custom.borderJoinStyle ? custom.borderJoinStyle : (dataset.borderJoinStyle || lineElementOptions.borderJoinStyle),
fill: custom.fill ? custom.fill : (dataset.fill !== undefined ? dataset.fill : lineElementOptions.fill),
steppedLine: custom.steppedLine ? custom.steppedLine : helpers.getValueOrDefault(dataset.steppedLine, lineElementOptions.stepped),
+ cubicInterpolationMode: custom.cubicInterpolationMode ? custom.cubicInterpolationMode : helpers.getValueOrDefault(dataset.cubicInterpolationMode, lineElementOptions.cubicInterpolationMode),
// Scale
scaleTop: scale.top,
scaleBottom: scale.bottom,
var meta = me.getMeta();
var area = me.chart.chartArea;
- // only consider points that are drawn in case the spanGaps option is ued
+ // Only consider points that are drawn in case the spanGaps option is used
var points = (meta.data || []).filter(function(pt) { return !pt._model.skip; });
var i, ilen, point, model, controlPoints;
return Math.max(Math.min(pt, max), min);
}
- if (me.chart.options.elements.line.cubicInterpolationMode == 'monotone') {
+ if (meta.dataset._model.cubicInterpolationMode == 'monotone') {
helpers.splineCurveMonotone(points);
}
else {
projects / thirdparty / Chart.js.git / commitdiff
