Skip to content

Commit

Permalink
Implement feature request #4237: see new sample:
Browse files Browse the repository at this point in the history 
area/multi-axis-with-seriesname-arrays.xml

- also use this facility to simplify the
specification of series inclusion in stacked charts, especially when
combined with other series.

See stacked-column-with-line.xml
and c.f. stacked-column-with-line-new.xml

The new facility should be backward compatible with the existing
style (both described below to the best of my knowledge), via code
that converts the old data structure to the new one.

The current style of mapping multiple series to a y axis is to
include one yaxis config per series but set each yaxis seriesName to
the same series name and then set show: false on all axes that are not
required.

While not the purpose of #4237, it offers a more intuitive alternative
that explicitly configures yaxis elements with the series that will be
referenced to them (seriesName: []). This only requires including the
yaxis elements that will be seen on the chart.

Old way:
  yax:	ser
  0:	0
  1:	1
  2:	1
  3:	1
  4:	1

Axes 0..4 are all scaled and all will be rendered unless the axes are
show: false. If the chart is stacked, it's assumed that series 1..4 are
the contributing series.

New way:
  yax:	ser
  0:	[0]
  1:	[1,2,3,4]

If the chart is stacked (a global chart setting), it must be assumed
that any axis with multiple series is stacked, presumably as separate
sets (not yet implemented).
 

Fix stacked chart y axis scaling: min and max were computed as the
sum of the series min and max, not the min and max od the summed
datapoints in each series.

Note: it is left to the creativity of the user to visually disambiguate
which plot is associated with which Y axis.

Additional checks for undefined elements in CoreUtils.extendArrayProps().

Remove the duplicate outlier in boxplot-scatter.xml.
  • Loading branch information
@rosco54
rosco54 committed Feb 19, 2024
1 parent 80eba01 commit 8a2a26a
Show file tree
Hide file tree
Showing 135 changed files with 2,151 additions and 192 deletions.
227 changes: 227 additions & 0 deletions samples/react/area/multi-axis-with-seriesname-arrays.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,227 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Multi-YAxis-with-seriesName-arrays</title>

<link href="../../assets/styles.css" rel="stylesheet" />

<style>

#chart {
max-width: 650px;
margin: 35px auto;
}

</style>

<script>
window.Promise ||
document.write(
'<script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"><\/script>'
)
window.Promise ||
document.write(
'<script src="https://cdn.jsdelivr.net/npm/eligrey-classlist-js-polyfill@1.2.20171210/classList.min.js"><\/script>'
)
window.Promise ||
document.write(
'<script src="https://cdn.jsdelivr.net/npm/findindex_polyfill_mdn"><\/script>'
)
</script>


<script src="https://cdn.jsdelivr.net/npm/react@16.12/umd/react.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-dom@16.12/umd/react-dom.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/prop-types@15.7.2/prop-types.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
<script src="../../../dist/apexcharts.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-apexcharts@1.3.6/dist/react-apexcharts.iife.min.js"></script>


<script>
// Replace Math.random() with a pseudo-random number generator to get reproducible results in e2e tests
// Based on https://gist.github.com/blixt/f17b47c62508be59987b
var _seed = 42;
Math.random = function() {
_seed = _seed * 16807 % 2147483647;
return (_seed - 1) / 2147483646;
};
</script>

<script>
var generateDayWiseTimeSeries = function (baseval, count, yrange) {
var i = 0;
var series = [];
while (i < count) {
var x = baseval;
var y = Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;

series.push([x, y]);
baseval += 86400000;
i++;
}
return series;
};

var data1 = generateDayWiseTimeSeries(new Date('11 Feb 2017 GMT').getTime(), 10, {
min: 5,
max: 20
});

var data2 = generateDayWiseTimeSeries(new Date('11 Feb 2017 GMT').getTime(), 10, {
min: 10,
max: 20
});

var data3 = generateDayWiseTimeSeries(new Date('11 Feb 2017 GMT').getTime(), 10, {
min: 5,
max: 25
});

var data4 = generateDayWiseTimeSeries(new Date('11 Feb 2017 GMT').getTime(), 10, {
min: 10,
max: 35
});
</script>
</head>

<body>

<div id="app"></div>

<div id="html">
&lt;div id=&quot;chart&quot;&gt;
&lt;ReactApexChart options={this.state.options} series={this.state.series} type=&quot;area&quot; height={350} /&gt;
&lt;/div&gt;
</div>

<script type="text/babel">
class ApexChart extends React.Component {
constructor(props) {
super(props);

this.state = {

series: [{
name: 'Broccoli',
data: data1
},
{
name: 'Spinach',
data: data2
},
{
name: 'Apples',
data: data3
},
{
name: 'Plums',
data: data4
}],
options: {
chart: {
type: 'area',
height: 350,
stacked: false
},
colors: ['#00EE00', '#008800', '#FF0000', '#AA00FF'],
dataLabels: {
enabled: false
},
stroke: {
curve: 'monotoneCubic',
width: [4, 4, 2, 2],
dashArray: [0, 0, 2, 2]
},
legend: {
position: 'top',
horizontalAlign: 'left'
},
yaxis: [
{
seriesName: ['Broccoli', 'Spinach'],
axisTicks: {
show: true,
color: '#008800'
},
axisBorder: {
show: true,
color: '#008800'
},
labels: {
style: {
colors: '#008800',
},
formatter: (val) => {
let ref = val.toFixed(0);
return val == ref ? val : ''
}
},
title: {
text: "Vegetables",
style: {
color: '#008800'
}
},
},
{
seriesName: ['Plums','Apples'],
opposite: true,
axisTicks: {
show: true,
color: '#FF0000'
},
axisBorder: {
show: true,
color: '#FF0000'
},
labels: {
style: {
colors: '#FF0000',
},
formatter: (val) => {
let ref = val.toFixed(0);
return val == ref ? val : ''
}
},
title: {
text: "Fruit",
style: {
color: '#FF0000'
}
},
}
],
xaxis: {
type: 'datetime'
}
},


};
}



render() {
return (
<div>
<div id="chart">
<ReactApexChart options={this.state.options} series={this.state.series} type="area" height={350} />
</div>
<div id="html-dist"></div>
</div>
);
}
}

const domContainer = document.querySelector('#app');
ReactDOM.render(React.createElement(ApexChart), domContainer);
</script>


</body>
</html>
4 changes: 0 additions & 4 deletions samples/react/boxPlot/boxplot-scatter.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -118,10 +118,6 @@
x: new Date('2020-01-01').getTime(),
y: 27
},
{
x: new Date('2020-01-01').getTime(),
y: 78
},
{
x: new Date('2021-01-01').getTime(),
y: 15
Expand Down
Loading

0 comments on commit 8a2a26a

Please sign in to comment.