From: Jukka Kurkela Date: Sat, 7 Dec 2019 00:47:00 +0000 (+0200) Subject: Allow pre-parsed data (to scale id's) (#6768) X-Git-Tag: v3.0.0-alpha~205 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=53c6c618c6fc8b30efdb1e7e75a1c4673fe179d2;p=thirdparty%2FChart.js.git Allow pre-parsed data (to scale id's) (#6768) * Allow pre-parsed data (to scale id's) * Only update `count` references in pre-parsed mode * Documentation --- diff --git a/docs/SUMMARY.md b/docs/SUMMARY.md index 98e388cdf..fe64cc3c1 100644 --- a/docs/SUMMARY.md +++ b/docs/SUMMARY.md @@ -8,6 +8,7 @@ * [Usage](getting-started/usage.md) * [Migration Guide](getting-started/v3-migration.md) * [General](general/README.md) + * [Data structures](general/data-structures.md) * [Accessibility](general/accessibility.md) * [Responsive](general/responsive.md) * [Pixel Ratio](general/device-pixel-ratio.md) @@ -17,7 +18,7 @@ * [Options](general/options.md) * [Colors](general/colors.md) * [Fonts](general/fonts.md) - * [Performance](general/performance.md) + * [Performance](general/performance.md) * [Configuration](configuration/README.md) * [Animations](configuration/animations.md) * [Layout](configuration/layout.md) diff --git a/docs/axes/cartesian/category.md b/docs/axes/cartesian/category.md index 69bad1802..36536a9ea 100644 --- a/docs/axes/cartesian/category.md +++ b/docs/axes/cartesian/category.md @@ -17,6 +17,7 @@ let chart = new Chart(ctx, { } }); ``` + As part of axis definition: ```javascript @@ -41,11 +42,12 @@ The category scale provides the following options for configuring tick marks. Th | Name | Type | Default | Description | ---- | ---- | ------- | ----------- | `labels` | `string[]` | - | An array of labels to display. -| `min` | `string` | | The minimum item to display. [more...](#min-max-configuration) -| `max` | `string` | | The maximum item to display. [more...](#min-max-configuration) +| `min` | string|number | | The minimum item to display. [more...](#min-max-configuration) +| `max` | string|number | | The maximum item to display. [more...](#min-max-configuration) ## Min Max Configuration -For both the `min` and `max` properties, the value must be in the `labels` array. In the example below, the x axis would only display "March" through "June". + +For both the `min` and `max` properties, the value must be `string` in the `labels` array or `numeric` value as an index of a label in that array. In the example below, the x axis would only display "March" through "June". ```javascript let chart = new Chart(ctx, { @@ -65,3 +67,7 @@ let chart = new Chart(ctx, { } }); ``` + +## Internal data format + +Internally category scale uses label indices diff --git a/docs/axes/cartesian/linear.md b/docs/axes/cartesian/linear.md index 44e74b9fc..f274fe9a0 100644 --- a/docs/axes/cartesian/linear.md +++ b/docs/axes/cartesian/linear.md @@ -75,3 +75,7 @@ let options = { } }; ``` + +## Internal data format + +Internally, linear scale uses numeric data diff --git a/docs/axes/cartesian/logarithmic.md b/docs/axes/cartesian/logarithmic.md index b9e0d8d1b..1d52efa5c 100644 --- a/docs/axes/cartesian/logarithmic.md +++ b/docs/axes/cartesian/logarithmic.md @@ -5,3 +5,7 @@ The logarithmic scale is use to chart numerical data. It can be placed on either ## Tick Configuration Options The logarithmic scale options extend the [common tick configuration](README.md#tick-configuration). This scale does not define any options that are unique to it. + +## Internal data format + +Internally logarithmic scale uses numeric data diff --git a/docs/axes/cartesian/time.md b/docs/axes/cartesian/time.md index ff3946476..c2d90abad 100644 --- a/docs/axes/cartesian/time.md +++ b/docs/axes/cartesian/time.md @@ -155,6 +155,11 @@ The `ticks.source` property controls the ticks generation. * `'labels'`: generates ticks from user given `labels` ONLY ### Parser + If this property is defined as a string, it is interpreted as a custom format to be used by Moment.js to parse the date. If this is a function, it must return a Moment.js object given the appropriate data value. + +### Internal data format + +Internally time scale uses milliseconds since epoch diff --git a/docs/axes/radial/linear.md b/docs/axes/radial/linear.md index ca89aa324..5b38e03d2 100644 --- a/docs/axes/radial/linear.md +++ b/docs/axes/radial/linear.md @@ -69,6 +69,7 @@ let chart = new Chart(ctx, { In contrast to the `suggested*` settings, the `min` and `max` settings set explicit ends to the axes. When these are set, some data points may not be visible. ## Step Size + If set, the scale ticks will be enumerated by multiple of `stepSize`, having one tick per increment. If not set, the ticks are labeled automatically using the nice numbers algorithm. This example sets up a chart with a y axis that creates ticks at `0, 0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 4.5, 5`. @@ -110,3 +111,7 @@ The following options are used to configure the point labels that are shown on t | `fontSize` | `number` | `10` | font size in pixels. | `fontStyle` | `string` | `'normal'` | Font style to use when rendering point labels. | `lineHeight` | number|string | `1.2` | Height of an individual line of text (see [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height)). + +## Internal data format + +Internally linear radial scale uses numeric data diff --git a/docs/charts/bar.md b/docs/charts/bar.md index e064309d3..a2a40b53c 100644 --- a/docs/charts/bar.md +++ b/docs/charts/bar.md @@ -1,4 +1,5 @@ # Bar + A bar chart provides a way of showing data values represented as vertical bars. It is sometimes used to show trend data, and the comparison of multiple data sets side by side. {% chartjs %} @@ -114,6 +115,7 @@ that derive from a bar chart. **Note:** for negative bars in vertical chart, `top` and `bottom` are flipped. Same goes for `left` and `right` in horizontal chart. Options are: + * `'bottom'` * `'left'` * `'top'` @@ -137,6 +139,7 @@ The interaction with each bar can be controlled with the following properties: All these values, if `undefined`, fallback to the associated [`elements.rectangle.*`](../configuration/elements.md#rectangle-configuration) options. ## Dataset Configuration + The bar chart accepts the following configuration from the associated dataset options: | Name | Type | Default | Description @@ -226,22 +229,7 @@ Sample: |==============| ## Data Structure -The `data` property of a dataset for a bar chart is specified as an array of numbers. Each point in the data array corresponds to the label at the same index on the x axis. - -```javascript -data: [20, 10] -``` - -You can also specify the dataset as x/y coordinates when using the [time scale](../axes/cartesian/time.md#time-cartesian-axis). - -```javascript -data: [{x:'2016-12-25', y:20}, {x:'2016-12-26', y:10}] -``` - -You can also specify the dataset for a bar chart as arrays of two numbers. This will force rendering of bars with gaps between them (floating-bars). First and second numbers in array will correspond the start and the end point of a bar respectively. -```javascript -data: [[5,6], [-3,-6]] -``` +All of the supported [data structures](../general/data-structures.md) can be used with bar charts. ## Stacked Bar Chart @@ -328,3 +316,7 @@ var myBarChart = new Chart(ctx, { The configuration options for the horizontal bar chart are the same as for the [bar chart](#scale-configuration). However, any options specified on the x axis in a bar chart, are applied to the y axis in a horizontal bar chart. The default horizontal bar configuration is specified in `Chart.defaults.horizontalBar`. + +## Internal data format + +`{x, y, _custom}` where `_custom` is optional object defining stacked bar properties: `{start, end, barStart, barEnd, min, max}`. `start` and `end` are the input values. Those two are repeated in `barStart` (closer to origin), `barEnd` (further from origin), `min` and `max`. diff --git a/docs/charts/bubble.md b/docs/charts/bubble.md index d9dd73892..d3f6e281b 100644 --- a/docs/charts/bubble.md +++ b/docs/charts/bubble.md @@ -115,3 +115,7 @@ Bubble chart datasets need to contain a `data` array of points, each points repr ``` **Important:** the radius property, `r` is **not** scaled by the chart, it is the raw radius in pixels of the bubble that is drawn on the canvas. + +## Internal data format + +`{x, y, _custom}` where `_custom` is the radius. diff --git a/docs/charts/line.md b/docs/charts/line.md index cda304b27..be45d6769 100644 --- a/docs/charts/line.md +++ b/docs/charts/line.md @@ -1,4 +1,5 @@ # Line + A line chart is a way of plotting data points on a line. Often, it is used to show trend data, or the comparison of two data sets. {% chartjs %} @@ -29,6 +30,7 @@ A line chart is a way of plotting data points on a line. Often, it is used to sh {% endchartjs %} ## Example Usage + ```javascript var myLineChart = new Chart(ctx, { type: 'line', @@ -138,7 +140,9 @@ The interaction with each point can be controlled with the following properties: | `pointHoverRadius` | The radius of the point when hovered. ### cubicInterpolationMode + The following interpolation modes are supported. + * `'default'` * `'monotone'` @@ -149,7 +153,9 @@ The `'monotone'` algorithm is more suited to `y = f(x)` datasets : it preserves If left untouched (`undefined`), the global `options.elements.line.cubicInterpolationMode` property is used. ### Stepped Line + The following values are supported for `steppedLine`. + * `false`: No Step Interpolation (default) * `true`: Step-before Interpolation (eq. `'before'`) * `'before'`: Step-before Interpolation @@ -172,34 +178,14 @@ The line chart defines the following configuration options. These options are me It is common to want to apply a configuration setting to all created line charts. The global line chart settings are stored in `Chart.defaults.line`. Changing the global options only affects charts created after the change. Existing charts are not changed. For example, to configure all line charts with `spanGaps = true` you would do: + ```javascript Chart.defaults.line.spanGaps = true; ``` ## Data Structure -The `data` property of a dataset for a line chart can be passed in two formats. - -### number[] -```javascript -data: [20, 10] -``` - -When the `data` array is an array of numbers, the x axis is generally a [category](../axes/cartesian/category.md#category-cartesian-axis). The points are placed onto the axis using their position in the array. When a line chart is created with a category axis, the `labels` property of the data object must be specified. - -### Point[] - -```javascript -data: [{ - x: 10, - y: 20 -}, { - x: 15, - y: 10 -}] -``` - -This alternate is used for sparse datasets, such as those in [scatter charts](./scatter.md#scatter-chart). Each data point is specified using an object containing `x` and `y` properties. +See [`Data structures`](../general/data-structures.md) ## Stacked Area Chart @@ -218,3 +204,7 @@ var stackedLine = new Chart(ctx, { } }); ``` + +## Internal data format + +`{x, y}` diff --git a/docs/charts/radar.md b/docs/charts/radar.md index f11eb3888..6b3353304 100644 --- a/docs/charts/radar.md +++ b/docs/charts/radar.md @@ -200,3 +200,7 @@ data: { }] } ``` + +## Internal data format + +`{x, y}` diff --git a/docs/charts/scatter.md b/docs/charts/scatter.md index bc6eefb96..e07cc1a4d 100644 --- a/docs/charts/scatter.md +++ b/docs/charts/scatter.md @@ -48,3 +48,7 @@ data: [{ y: 10 }] ``` + +## Internal data format + +`{x, y}` diff --git a/docs/general/data-structures.md b/docs/general/data-structures.md new file mode 100644 index 000000000..770f1f28c --- /dev/null +++ b/docs/general/data-structures.md @@ -0,0 +1,39 @@ +# Data structures + +The `data` property of a dataset can be passed in various formats. By default, that `data` is parsed using the associated chart type and scales. + +## Primitive[] + +```javascript +data: [20, 10], +labels: ['a', 'b'] +``` + +When the `data` is an array of numbers, values from `labels` array at the same index are used for the index axis (`x` for vertical, `y` for horizontal charts). + +## Object[] + +```javascript +data: [{x: 10, y: 20}, {x: 15, y: 10}] +``` + +```javascript +data: [{x:'2016-12-25', y:20}, {x:'2016-12-26', y:10}] +``` + +```javascript +data: [{x:'Sales', y:20}, {x:'Revenue', y:10}] +``` + +This is also the internal format used for parsed data. Property names are matched to scale-id. In this mode, parsing can be disabled by specifying `parsing: false` at chart options or dataset. If parsing is disabled, data must be in the formats the associated chart type and scales use internally. + +## Object + +```javascript +data: { + January: 10, + February: 20 +} +``` + +In this mode, property name is used for `index` scale and value for `value` scale. For vertical charts, index scale is `x` and value scale is `y`. diff --git a/docs/general/performance.md b/docs/general/performance.md index 9aba3175f..8c0dc11c7 100644 --- a/docs/general/performance.md +++ b/docs/general/performance.md @@ -59,6 +59,10 @@ new Chart(ctx, { }); ``` +## Data structure and format + +Provide prepared data in the internal format accepted by the dataset and scales and set `parsing: false`. See [Data structures](data-structures.md) for more information. + ## Data Decimation Decimating your data will achieve the best results. When there is a lot of data to display on the graph, it doesn't make sense to show tens of thousands of data points on a graph that is only a few hundred pixels wide. diff --git a/src/core/core.datasetController.js b/src/core/core.datasetController.js index b4f709919..a2a93b56a 100644 --- a/src/core/core.datasetController.js +++ b/src/core/core.datasetController.js @@ -473,9 +473,14 @@ helpers.extend(DatasetController.prototype, { const me = this; const {_cachedMeta: meta, _data: data} = me; const {iScale, vScale, _stacked} = meta; - let i, ilen, parsed; - - if (helpers.isArray(data[start])) { + const parsing = resolve([me.getDataset().parsing, me.chart.options.parsing, true]); + let offset = 0; + let i, parsed; + + if (parsing === false) { + parsed = data; + offset = start; + } else if (helpers.isArray(data[start])) { parsed = me._parseArrayData(meta, data, start, count); } else if (helpers.isObject(data[start])) { parsed = me._parseObjectData(meta, data, start, count); @@ -483,8 +488,8 @@ helpers.extend(DatasetController.prototype, { parsed = me._parsePrimitiveData(meta, data, start, count); } - for (i = 0, ilen = parsed.length; i < ilen; ++i) { - meta.data[start + i]._parsed = parsed[i]; + for (i = 0; i < count; ++i) { + meta.data[i + start]._parsed = parsed[i + offset]; } if (_stacked) {