I have used https://www.npmjs.com/package/react-chartjs-2, and it displays a chart with data in the first time. But whenever I try to redraw, using new data and datasets it always displays previous graph data on a chart.
I have tried solutions from: https://github.com/reactchartjs/react-chartjs-2
Also tried to give reference
But still, it shows the same data which it loads the first time.
Code to display chart,
<Line
data={graphData}
redraw
options={options}
height="100px"
weight="100px"
/>
In this,
graphData is,
const [graphData, setGraphData] = useState(data);
redraw,
I have also tried to do, redraw={true}
When the data will be modified, I use setGraphData(updatedData) to update the chart, I have also checked whether data is changed or not.
Data in graphData updates but not displayed on graph
Where the data which is assign as a default data for graphData,
const data = {
labels: months,
datasets: [
{
label: "# of Users",
data: [0, 64, 129, 193, 258, 322, 387, 451, 516, 580],
fill: false,
backgroundColor: "rgb(255, 99, 132)",
borderColor: "rgba(255, 99, 132, 0.2)",
yAxisID: "y-axis-1",
},
{
label: "# of Orders",
data: [0, 25, 50, 76, 101, 126, 151, 177, 202, 227],
fill: false,
backgroundColor: "rgb(54, 162, 235)",
borderColor: "rgba(54, 162, 235, 0.2)",
yAxisID: "y-axis-2",
},
],
};
I am creating copy of this data and then assigning in setGraphData()
Anyone can Help me with this! Thank you in advance!!
Without seeing the code, there is only one solution here. Provide a key to the chart component & update the key once the data is updated,
<chart key={getKey()} data={data} />
The get key will create a unique key with respect to the new data.
const getKey = () => {
return data?.map((p) => p.id)?.join();
};
The only thing important here is that the getKey method should return a new value if the data is updated JSON.stringify(data) is the simplest option(I am not sure if it is a good approach to provide the serialized data as key, but surely it will work)
The issue behind re-rendering was a function defined to call, backend API handler and assigning data to the Line chart.
Before - not working
useEffect(() => {
...
the function which has code to call and fetch data from back-end API/handler
}, []);
After - working
useEffect(() => {
...
Code which calls back-end API/handler function to fetch data for graph
...
}, []);
I have also keep redraw,
<Line
key={JSON.stringify(graphData)}
data={graphData}
redraw
options={options}
height="100px"
weight="100px"
/>
Stumbled upon this answer while struggling with this issue. Essentially you have to deep clone the data when copying and mutating any values. Works great because you don't need to set redraw which causes the jittery animation.
Related
Everyone
I am trying to implement wfplayer with artplayer in my react project and came across an issue. Let me show you code first
componentDidUpdate() {
if (this.props.art && !this.wf) {
this.initWFPlayer();
}
}
where initWFPlayer() is the function which contains this.wf and its definition and
this.props.art is the state's variable storing the value of instance of artplayer.
Inside initWFPlayer()
initWFPlayer() {
const { art } = this.props;
const { $video } = art.template;
if ($video.src) {
this.wf = new WFPlayer({
container: this.$waveform.current,
mediaElement: $video,
waveColor: 'rgba(255, 235, 59, 0.95)',
progressColor: 'rgba(255, 255, 255, 0.3)',
cors: true,
scrollable:true
});
this.wf.load(this.props.pcmUrl);
}
}
where pcmUrl is the url of audio that I am getting from DB via some API.
Now, the error I am getting is
I know this issue is coming from componentDidUpdate(). I have checked that if statement is returning true/false as it should return. How can i remove it?
Hi everyone, i'm getting a trouble with customizing TooltipMarker in AntV Ant Design Charts with Line Shape. I have already read many documents and find any solution but none of them can help me to solve my problem.
It is my config about Line Shape:
const data = [
264, 417, 438, 887, 309, 397,
];
const config = {
height: 60,
autoFit: false,
data,
smooth: true,
tooltip: {
showMarkers: true,
marker: {
},
}
};
<TinyLine {...config} />
I have already known that showMarker can be show a marker wheater or not, but i dont know how to cutomize marker
I need to customize from to ( the circle in the line )
I hope someone help me with this problem. Thanks for reading my questions. Have a nice working days.
I have a chart that is being constructed on page x but I want to load that chart in page y. How do I do that?
I'm trying to use a service but it didn't work.
page x
chart = [];
this.chart = new Chart('canvas', {
type: 'line',
data: {
labels: this.datas,
datasets: [{
label: 'Score',
fill: false,
backgroundColor: 'rgb(255, 99, 132)',
borderColor: 'rgb(255, 99, 132)',
data: this.score
}
}
})
this.fichasService.chart = this.chart;
page y
test = this.fichasService.chart;
<canvas id="canvas">{{test}}</canvas>
If I try to draw the chart on page x it works fine, but when a try to draw in the page y it didn't work.
What I'll do is to refactor that graph as a component itself, so it could be reused everywhere easily.
Just declare a component with the logic you already have, and use
<canvas id="canvas">{{test}}</canvas>
as component's template
I have the this jsfiddle, it has the ability to draw a polygon on a map which works perfectly. What I can't figure out is how to style the .Draw interaction.
Currently I have a dashed line for the sections of the polygon that the users has already draw and another dashed line connecting the first drawn point to the last drawn point.
When I write styles it seems to effect both lines.
What I need to have is a dashed black line joining points the user has already drawn, and no line (fully transparent) for the line connecting the last drawn point back to the first drawn point.
This is my current style object:
style: new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'rgba(0, 0, 0, 0.5)',
lineDash: [10, 10],
width: 3
}),
image: new ol.style.Circle({
fill: new ol.style.Fill({ color: [0, 0, 0, 0.2] }),
stroke: new ol.style.Stroke({
color: [0, 0, 0, 0.5],
width: 1
}),
radius: 4
})
})
I have tried adding arrays of colours and styles but can't seem to get it working.
Has anyone come across this and found a fix?
Ok I have cracked this one, I had to take a dive into the library's source to figure it out, so I'm gonna post the answer here in the hope it helps somebody else in the future, so here goes:
What I could see looking as the source code was that when you are using ol.interaction.Draw to draw a polygon there are multiple pieces of geometry being used. There is the underlying Polygon, this is the bit that has a stroke and fill and shows the connecting line (based on it's stroke style). There is a LineString which shows a line for the points the user has drawn only (no fill and no connecting line). And there is a point, which is attached to the mouse pointer. I have left a `console.log()' in the jsfiddle to show all this.
I have created this working jsfiddle. What I have done is, rather than set the styles directly inside ol.interaction.Draw I have used a styleFunction (see code below). I detect each geometry by type and set a specific style for it.
const styleFunction = feature => {
var geometry = feature.getGeometry();
console.log('geometry', geometry.getType());
if (geometry.getType() === 'LineString') {
var styles = [
new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'rgba(255, 102, 0, 1)',
width: 3
})
})
];
return styles;
}
if (geometry.getType() === 'Polygon') {
var styles = [
new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'rgba(255, 102, 0, 0)',
width: 3
}),
fill: new ol.style.Fill({
color: 'rgba(255, 102, 0, 0.3)'
})
})
];
return styles;
}
return false;
};
Hope this helps 🤓
first paremeter is the filename and second is docDefinition(which value i will pass in second parameter) still confuse?
please help me out
The second parameter is an object that have all the options of "pdfmake".
The most fundamental concept to be mastered is the
document-definition-object which can be as simple as:
var docDefinition = { content: 'This is an sample PDF printed withpdfMake' };
or become pretty complex (having multi-level tables,
images, lists, paragraphs, margins, styles etc...).
You can check the documentation on Github https://github.com/bpampuch/pdfmake and do it more complex.
But if you use the function pdfExport, this one create the object with the data grid and it is more easy, Try this:
$scope.gridApi.exporter.pdfExport( uiGridExporterConstants.ALL, uiGridExporterConstants.ALL );
And they have more options that you can change in gridOptions:
exporterPdfDefaultStyle:{ fontSize: 11 },
exporterPdfFilename: 'filename.pdf',
exporterPdfTableHeaderStyle: { bold: true, fontSize: 12, color: 'black' },
exporterPdfTableStyle : { margin: [0, 5, 0, 15] },
exporterPdfHeader : null,
exporterPdfFooter : null,
gridOptions.exporterPdfOrientation : 'landscape',
etc...