admin管理员组文章数量:1026654
I have a website that is using the reactjs react-timeseries-charts component for displaying graphs.
For some reason, when using any other browser besides safari, it works as intended with no errors. When i try and open with Safari, the bar charts and line graphs come up blank and through an error in react-dom.development.js saying "unable to parse: d=12345NaN, 45678NaN". I don't quite understand how to troubleshoot errors logged in react-dom.development.js. Clearly the "NaNs" are the problem, but I dont know where they are coming from. When I examine the DOM elements, on Safari, the tag has x="NaN" that is not present in chrome, so the actual width of the bars is not being properly set. The X-axis is also not rendering.
[Chrome][1] [1]: .png
Here is the relevant snippet from render():
render(){
return(<div className="chart" id="chart" onTouchMove={this.handleTouchMove} onTouchStart={this.handleTouchStart} onTouchEnd={this.handleTouchEnd}>
<ChartContainer
timeRange={this.state.timerange}
width={this.state.width}
utc={true}
format={this.formatTime}
onBackgroundClick={() => this.setState({ selection: null })}
onTimeRangeChanged={this.handleTimeRangeChange}
timeAxisAngledLabels={false}
timeAxisTickCount={this.state.tickCount}
enablePanZoom={true}
minDuration={this.state.minDuration}
minTime={this.state.window_min}
maxTime={this.state.window_max}
paddingTop={this.state.paddingTop}
paddingLeft={this.state.paddingLeft}
paddingBottom={this.state.paddingBottom}
paddingRight={this.state.paddingRight}
timeAxisStyle={{
ticks: {
stroke: "#000000",
opacity: 1
},
values: {
fill: "#000000",
"font-size": "1.75vw",
},
axis: {
stroke: "#000000"
}
}}
>
<ChartRow height={this.state.height}>
<YAxis
id="axis"
label=""
min={0}
max={this.state.y_max > this.state.rate ? this.state.y_max : (this.state.rate*1.1)}
width="80" //changed
type="linear"
labelOffset={2}
style={{
label: {
fill:"#000000"
},
values: {
fill: "#000000",
"font-size": "1.75vw",
},
ticks: {
opacity: 1,
stroke:"#000000"
},
axis: {
stroke: "#000000"
}
}}
format={function (n){ return Number(n).toFixed(1)}}
/>
<Charts>
<BarChart
axis="axis"
style={column_style}
spacing={this.state.spacing}
columns={this.state.active_columns}
offset={3}
series={this.state.Series}
infoTimeFormat={(index) =>
(<tspan style={{ fill: "black", fontSize: "0.8rem", fontWeight: "bold" }}>Hour: {moment(index.begin()).utc().format("HHmm")}</tspan>)} //Info box time display and format
info={infoValues} //Info box on hover
infoWidth={130}
infoHeight={40}
infoStyle={{
label: {
fill: "#000000",
"font-size": "0.8rem",
},
values: {
fill: "#000000"
},
box: {
stroke: "#000000",
opacity: 0.4,
}
}}
infoOffsetY={150} //Info box stem height
stemStyle={{
stroke: "#000000",
cursor: "crosshair"
}}
markerStyle={{ fill: "#000000" }}
highlighted={ this.state.highlight }
onHighlightChange={highlight => this.setState({ highlight })}
/>
</Charts>
</ChartRow>
</ChartContainer>
</div>);
}
Here is the relevant function for setting the timeseries:
let points = [];
let one = 0, two = 0, three = 0, four = 0;
for(let i in data){
if(some condition){
one++;
}else if (some other condition){
two++;
}else if (some other condition){
three++;
}else{
four++;
}
}
points.push({
"index": time,
"one": one,
"two": two,
"three": three,
"four": four
});
for (let i in data) {
const d = new Date(data[i].index);
const index = Index.getIndexString(interval, d);
points.push([index, data[i].one, data[i].two, data[i].three, data[i].four]);
if (points.length > 0) {
const series = new TimeSeries({
name: "BarChart",
columns: ["index", "one", "two", "three", "four"],
points: points
});
I made some changes to mask the nature of the code and what it is for, so there may be some typos with regards to that.
I do know that react-timeseries-charts is throwing errors for NaN height and y values when the data points contains a value of 0 for one of the four values (one, two, three, four), but it still renders in chrome.
Any help would be appreciated.
I have a website that is using the reactjs react-timeseries-charts component for displaying graphs.
For some reason, when using any other browser besides safari, it works as intended with no errors. When i try and open with Safari, the bar charts and line graphs come up blank and through an error in react-dom.development.js saying "unable to parse: d=12345NaN, 45678NaN". I don't quite understand how to troubleshoot errors logged in react-dom.development.js. Clearly the "NaNs" are the problem, but I dont know where they are coming from. When I examine the DOM elements, on Safari, the tag has x="NaN" that is not present in chrome, so the actual width of the bars is not being properly set. The X-axis is also not rendering.
[Chrome][1] [1]: https://i.sstatic/MB3Q6NAp.png
Here is the relevant snippet from render():
render(){
return(<div className="chart" id="chart" onTouchMove={this.handleTouchMove} onTouchStart={this.handleTouchStart} onTouchEnd={this.handleTouchEnd}>
<ChartContainer
timeRange={this.state.timerange}
width={this.state.width}
utc={true}
format={this.formatTime}
onBackgroundClick={() => this.setState({ selection: null })}
onTimeRangeChanged={this.handleTimeRangeChange}
timeAxisAngledLabels={false}
timeAxisTickCount={this.state.tickCount}
enablePanZoom={true}
minDuration={this.state.minDuration}
minTime={this.state.window_min}
maxTime={this.state.window_max}
paddingTop={this.state.paddingTop}
paddingLeft={this.state.paddingLeft}
paddingBottom={this.state.paddingBottom}
paddingRight={this.state.paddingRight}
timeAxisStyle={{
ticks: {
stroke: "#000000",
opacity: 1
},
values: {
fill: "#000000",
"font-size": "1.75vw",
},
axis: {
stroke: "#000000"
}
}}
>
<ChartRow height={this.state.height}>
<YAxis
id="axis"
label=""
min={0}
max={this.state.y_max > this.state.rate ? this.state.y_max : (this.state.rate*1.1)}
width="80" //changed
type="linear"
labelOffset={2}
style={{
label: {
fill:"#000000"
},
values: {
fill: "#000000",
"font-size": "1.75vw",
},
ticks: {
opacity: 1,
stroke:"#000000"
},
axis: {
stroke: "#000000"
}
}}
format={function (n){ return Number(n).toFixed(1)}}
/>
<Charts>
<BarChart
axis="axis"
style={column_style}
spacing={this.state.spacing}
columns={this.state.active_columns}
offset={3}
series={this.state.Series}
infoTimeFormat={(index) =>
(<tspan style={{ fill: "black", fontSize: "0.8rem", fontWeight: "bold" }}>Hour: {moment(index.begin()).utc().format("HHmm")}</tspan>)} //Info box time display and format
info={infoValues} //Info box on hover
infoWidth={130}
infoHeight={40}
infoStyle={{
label: {
fill: "#000000",
"font-size": "0.8rem",
},
values: {
fill: "#000000"
},
box: {
stroke: "#000000",
opacity: 0.4,
}
}}
infoOffsetY={150} //Info box stem height
stemStyle={{
stroke: "#000000",
cursor: "crosshair"
}}
markerStyle={{ fill: "#000000" }}
highlighted={ this.state.highlight }
onHighlightChange={highlight => this.setState({ highlight })}
/>
</Charts>
</ChartRow>
</ChartContainer>
</div>);
}
Here is the relevant function for setting the timeseries:
let points = [];
let one = 0, two = 0, three = 0, four = 0;
for(let i in data){
if(some condition){
one++;
}else if (some other condition){
two++;
}else if (some other condition){
three++;
}else{
four++;
}
}
points.push({
"index": time,
"one": one,
"two": two,
"three": three,
"four": four
});
for (let i in data) {
const d = new Date(data[i].index);
const index = Index.getIndexString(interval, d);
points.push([index, data[i].one, data[i].two, data[i].three, data[i].four]);
if (points.length > 0) {
const series = new TimeSeries({
name: "BarChart",
columns: ["index", "one", "two", "three", "four"],
points: points
});
I made some changes to mask the nature of the code and what it is for, so there may be some typos with regards to that.
I do know that react-timeseries-charts is throwing errors for NaN height and y values when the data points contains a value of 0 for one of the four values (one, two, three, four), but it still renders in chrome.
Any help would be appreciated.
Share Improve this question asked Nov 19, 2024 at 17:57 squidmonkeysquidmonkey 197 bronze badges1 Answer
Reset to default 0Closing this. the documentation says react-timeseries-charts does not support safari.
Ended up migrating to ChartJS instead.
I have a website that is using the reactjs react-timeseries-charts component for displaying graphs.
For some reason, when using any other browser besides safari, it works as intended with no errors. When i try and open with Safari, the bar charts and line graphs come up blank and through an error in react-dom.development.js saying "unable to parse: d=12345NaN, 45678NaN". I don't quite understand how to troubleshoot errors logged in react-dom.development.js. Clearly the "NaNs" are the problem, but I dont know where they are coming from. When I examine the DOM elements, on Safari, the tag has x="NaN" that is not present in chrome, so the actual width of the bars is not being properly set. The X-axis is also not rendering.
[Chrome][1] [1]: .png
Here is the relevant snippet from render():
render(){
return(<div className="chart" id="chart" onTouchMove={this.handleTouchMove} onTouchStart={this.handleTouchStart} onTouchEnd={this.handleTouchEnd}>
<ChartContainer
timeRange={this.state.timerange}
width={this.state.width}
utc={true}
format={this.formatTime}
onBackgroundClick={() => this.setState({ selection: null })}
onTimeRangeChanged={this.handleTimeRangeChange}
timeAxisAngledLabels={false}
timeAxisTickCount={this.state.tickCount}
enablePanZoom={true}
minDuration={this.state.minDuration}
minTime={this.state.window_min}
maxTime={this.state.window_max}
paddingTop={this.state.paddingTop}
paddingLeft={this.state.paddingLeft}
paddingBottom={this.state.paddingBottom}
paddingRight={this.state.paddingRight}
timeAxisStyle={{
ticks: {
stroke: "#000000",
opacity: 1
},
values: {
fill: "#000000",
"font-size": "1.75vw",
},
axis: {
stroke: "#000000"
}
}}
>
<ChartRow height={this.state.height}>
<YAxis
id="axis"
label=""
min={0}
max={this.state.y_max > this.state.rate ? this.state.y_max : (this.state.rate*1.1)}
width="80" //changed
type="linear"
labelOffset={2}
style={{
label: {
fill:"#000000"
},
values: {
fill: "#000000",
"font-size": "1.75vw",
},
ticks: {
opacity: 1,
stroke:"#000000"
},
axis: {
stroke: "#000000"
}
}}
format={function (n){ return Number(n).toFixed(1)}}
/>
<Charts>
<BarChart
axis="axis"
style={column_style}
spacing={this.state.spacing}
columns={this.state.active_columns}
offset={3}
series={this.state.Series}
infoTimeFormat={(index) =>
(<tspan style={{ fill: "black", fontSize: "0.8rem", fontWeight: "bold" }}>Hour: {moment(index.begin()).utc().format("HHmm")}</tspan>)} //Info box time display and format
info={infoValues} //Info box on hover
infoWidth={130}
infoHeight={40}
infoStyle={{
label: {
fill: "#000000",
"font-size": "0.8rem",
},
values: {
fill: "#000000"
},
box: {
stroke: "#000000",
opacity: 0.4,
}
}}
infoOffsetY={150} //Info box stem height
stemStyle={{
stroke: "#000000",
cursor: "crosshair"
}}
markerStyle={{ fill: "#000000" }}
highlighted={ this.state.highlight }
onHighlightChange={highlight => this.setState({ highlight })}
/>
</Charts>
</ChartRow>
</ChartContainer>
</div>);
}
Here is the relevant function for setting the timeseries:
let points = [];
let one = 0, two = 0, three = 0, four = 0;
for(let i in data){
if(some condition){
one++;
}else if (some other condition){
two++;
}else if (some other condition){
three++;
}else{
four++;
}
}
points.push({
"index": time,
"one": one,
"two": two,
"three": three,
"four": four
});
for (let i in data) {
const d = new Date(data[i].index);
const index = Index.getIndexString(interval, d);
points.push([index, data[i].one, data[i].two, data[i].three, data[i].four]);
if (points.length > 0) {
const series = new TimeSeries({
name: "BarChart",
columns: ["index", "one", "two", "three", "four"],
points: points
});
I made some changes to mask the nature of the code and what it is for, so there may be some typos with regards to that.
I do know that react-timeseries-charts is throwing errors for NaN height and y values when the data points contains a value of 0 for one of the four values (one, two, three, four), but it still renders in chrome.
Any help would be appreciated.
I have a website that is using the reactjs react-timeseries-charts component for displaying graphs.
For some reason, when using any other browser besides safari, it works as intended with no errors. When i try and open with Safari, the bar charts and line graphs come up blank and through an error in react-dom.development.js saying "unable to parse: d=12345NaN, 45678NaN". I don't quite understand how to troubleshoot errors logged in react-dom.development.js. Clearly the "NaNs" are the problem, but I dont know where they are coming from. When I examine the DOM elements, on Safari, the tag has x="NaN" that is not present in chrome, so the actual width of the bars is not being properly set. The X-axis is also not rendering.
[Chrome][1] [1]: https://i.sstatic/MB3Q6NAp.png
Here is the relevant snippet from render():
render(){
return(<div className="chart" id="chart" onTouchMove={this.handleTouchMove} onTouchStart={this.handleTouchStart} onTouchEnd={this.handleTouchEnd}>
<ChartContainer
timeRange={this.state.timerange}
width={this.state.width}
utc={true}
format={this.formatTime}
onBackgroundClick={() => this.setState({ selection: null })}
onTimeRangeChanged={this.handleTimeRangeChange}
timeAxisAngledLabels={false}
timeAxisTickCount={this.state.tickCount}
enablePanZoom={true}
minDuration={this.state.minDuration}
minTime={this.state.window_min}
maxTime={this.state.window_max}
paddingTop={this.state.paddingTop}
paddingLeft={this.state.paddingLeft}
paddingBottom={this.state.paddingBottom}
paddingRight={this.state.paddingRight}
timeAxisStyle={{
ticks: {
stroke: "#000000",
opacity: 1
},
values: {
fill: "#000000",
"font-size": "1.75vw",
},
axis: {
stroke: "#000000"
}
}}
>
<ChartRow height={this.state.height}>
<YAxis
id="axis"
label=""
min={0}
max={this.state.y_max > this.state.rate ? this.state.y_max : (this.state.rate*1.1)}
width="80" //changed
type="linear"
labelOffset={2}
style={{
label: {
fill:"#000000"
},
values: {
fill: "#000000",
"font-size": "1.75vw",
},
ticks: {
opacity: 1,
stroke:"#000000"
},
axis: {
stroke: "#000000"
}
}}
format={function (n){ return Number(n).toFixed(1)}}
/>
<Charts>
<BarChart
axis="axis"
style={column_style}
spacing={this.state.spacing}
columns={this.state.active_columns}
offset={3}
series={this.state.Series}
infoTimeFormat={(index) =>
(<tspan style={{ fill: "black", fontSize: "0.8rem", fontWeight: "bold" }}>Hour: {moment(index.begin()).utc().format("HHmm")}</tspan>)} //Info box time display and format
info={infoValues} //Info box on hover
infoWidth={130}
infoHeight={40}
infoStyle={{
label: {
fill: "#000000",
"font-size": "0.8rem",
},
values: {
fill: "#000000"
},
box: {
stroke: "#000000",
opacity: 0.4,
}
}}
infoOffsetY={150} //Info box stem height
stemStyle={{
stroke: "#000000",
cursor: "crosshair"
}}
markerStyle={{ fill: "#000000" }}
highlighted={ this.state.highlight }
onHighlightChange={highlight => this.setState({ highlight })}
/>
</Charts>
</ChartRow>
</ChartContainer>
</div>);
}
Here is the relevant function for setting the timeseries:
let points = [];
let one = 0, two = 0, three = 0, four = 0;
for(let i in data){
if(some condition){
one++;
}else if (some other condition){
two++;
}else if (some other condition){
three++;
}else{
four++;
}
}
points.push({
"index": time,
"one": one,
"two": two,
"three": three,
"four": four
});
for (let i in data) {
const d = new Date(data[i].index);
const index = Index.getIndexString(interval, d);
points.push([index, data[i].one, data[i].two, data[i].three, data[i].four]);
if (points.length > 0) {
const series = new TimeSeries({
name: "BarChart",
columns: ["index", "one", "two", "three", "four"],
points: points
});
I made some changes to mask the nature of the code and what it is for, so there may be some typos with regards to that.
I do know that react-timeseries-charts is throwing errors for NaN height and y values when the data points contains a value of 0 for one of the four values (one, two, three, four), but it still renders in chrome.
Any help would be appreciated.
Share Improve this question asked Nov 19, 2024 at 17:57 squidmonkeysquidmonkey 197 bronze badges1 Answer
Reset to default 0Closing this. the documentation says react-timeseries-charts does not support safari.
Ended up migrating to ChartJS instead.
本文标签： reactjsreacttimeseriescharts not plotting on safari onlyerror parsing d1234NaN Stack Overflow
版权声明：本文标题：reactjs - react-timeseries-charts not plotting on safari only - error parsing d=1234NaN, - Stack Overflow 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/questions/1742408322a1959974.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论