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
Related
How to change the chart title dynamically on hover in Highcharts
JSfiddle
http://jsfiddle.net/q4b7dvmx/1/
tried with setState but its not working perfectly
tooltip:{
enabled: true,
borderRadius: 0,
borderWidth: 0,
shadow: false,
shared: true,
useHTML: true,
zIndex: 99999,
formatter() {
// ToolTip Built Here
const { x , y } = this;
let tooltipString = `<div > ${y}
</div>`;
// that.props.updateDates( this.points[0].series.userOptions.dates[this.points[0].key] );
return tooltipString;
}
}
The easiest way is to change a title text attribute in tooltip formatter function.
tooltip: {
...,
formatter(e) {
const {
x,
y
} = this;
e.chart.title.attr({
text: 'ftest' + ' x value: ' + x
});
}
}
Live demo: http://jsfiddle.net/BlackLabel/tk1avpze/
API Reference: https://api.highcharts.com/class-reference/Highcharts.SVGElement#attr
Do you mean on hover of a data-point? in that case, your demo does nothing to the chart title.
Either way, you should check this post;
How can I access a hover state in reactjs?
EDIT;
Did you see https://api.highcharts.com/highcharts/tooltip.formatter - it adresses the formatter. It seems to be the answer, from the looks of a similar question;
Highcharts.js : get specific value from data to tooltip
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.
I am using rGraph to draw the chart. it is working fine for the first time. when trying to generate the graph with different input data for the second time, without refreshing the page. The graph is generating fine, but the x-axis title is disappearing. can anyone help me with this?
FYI: I am making that div empty, before generating the graph.
Attaching image:
1:
In the first image, you can see the Date.
Here you don't see the Date. when I change the input data and tried to generate the chart.
if(document.getElementById(chartID)){
RG.ObjectRegistry.Remove(document.getElementById(chartID));
}
var barGraph = new RGraph.Bar({
id: chartID,
data: chartData,
options: {
variant: '3d',
variantThreedAngle: 0.05,
colorsStroke: 'rgba(0,0,0,0)',
colors: chartColorArr,
marginTop: 35,
marginLeft: 45,
marginRight: 15,
marginBottom: 85,
xaxisLabels: x_axis_label_Arr,
shadowColor:'#ccc',
shadowOffsetx: 3,
backgroundGridColor: '#eee',
xaxisScaleZerostart: true,
axesColor: '#f2f2f2',
//yaxisScaleUnitsPost: 'H',
//title: 'User Sessions',
//key: [legendsTitle],
keyShadow: true,
keyShadowColor: '#ccc',
keyShadowOffsety: 0,
keyShadowOffsetx: 3,
keyShadowBlur: 15,
variantThreedXaxis : true,
variantThreedYaxis : true,
bevelled : false,
axes : true,
tooltips: chartTooltipArr,
tooltipsEvent : 'onmousemove',
xaxisTitle : **'Date',**
yaxisTitle : yAxisTitle,
xaxisTitleSize : legendFontSize,
yaxisTitleSize : legendFontSize,
xaxisLabelsSize : legendFontSize,
yaxisLabelsSize : legendFontSize,
yaxisTitlePos : 0.1,
colorsSequential : true,
}
});
barGraph.draw();
Thanks
By the looks of the 3D style and some other cues, you're using quite an old version. Here's two modern-style 3D charts:
https://www.rgraph.net/demos/bar-3d-effect-multi-row.html
https://www.rgraph.net/demos/bar-ajax.html
There's more examples in the download archive which are worth looking at.
As for the problem with your chart, I think the easiest solution would be to set the textAccessible option to false:
textAccessible: false,
I have implemented a scatterplot using react-plotly.js I would like the chart to re-size itself when the page layout changes. But currently, the layout of the chart doesn't change by itself. If I explicitly perform some function on the chart which forces the chart to redraw itself then only the chart width changes.
I applied useResizeHandler property and have set autosize to true. But that doesn't make any difference either.
<Plot
useResizeHandler
style={{ width: '100%' }}
data={chartData}
onClick={(data) => this.handlePlotClick(data)}
type={'scatter'}
layout={this.layout} />
const layout = {
autosize: true,
dragmode: true,
margin: {
l: 5,
r: 5,
t: 10,
b: 10,
pad: 0,
autoexpand: true
},
hovermode: 'closest',
hoverlabel: {
bgcolor: 'rgba(0,0,0,1)',
bordercolor: 'rgba(200,200,200,1)'
},
height: '650',
yaxis: {
visible: false
},
xaxis: {
autorange: false,
showline: true,
fixedrange: false, // true disables range selection on main graph
rangeslider: {
range: this.state.sliderRange,
visible: true,
borderwidth: 1,
bordercolor: '#000'
}
}
};
}
As you can see in the screenshot above, the div.svg-container has same width as the main-svg. But it still leaves white space on the right. I am unable to debug why it would behave that way. If I explicitly perform zoom on the chart that will redraw the plot then it will behave correctly. But I would like it to automatically resize when the page layout changes.
I was stuck on this problem too. Try window.dispatchEvent(new Event('resize')) from http://codrate.com/questions/how-can-trigger-the-window-resize-event-manually-in-javascript
I was calling resizeHandler when my chart is resized by dragging.
resizeHandler = () => {
this.child.resizeHandler();
window.dispatchEvent(new Event('resize'));
}
The charts always autoscales when the chart is resized, so I basically trigger the window resize when my chart size is changed. So for you, when you detect the page layout changes you can trigger the window resize.
I am updating a Line chart using HTTP get through ngResource and a rest API.
My technique is to get the JSON dataset and create a new chart every time a user is clicking on a button.
It works great, but at one time, it causes the browser crash. I have tested on Chrome, Firefox on both Windows and Linux.
In my controller :
$scope.labels = $scope.dataFromREST;
$scope.series = ['Series A'];
$scope.data = [$scope.dataFromREST2];
$scope.onClick = function (points, evt) {
console.log(points, evt);
};
$scope.datasetOverride = [{ yAxisID: 'y-axis-1' }];
$scope.options = {
scales: {
yAxes: [
{
id: 'y-axis-1',
type: 'linear',
display: true,
position: 'left'
}
],
xAxes: [{
responsive: true,
ticks: {
autoSkip: true,
maxTicksLimit: 20
}
}]
}
};
In my index.html :
<canvas id="line" class="chart chart-line" chart-data="data"
chart-labels="labels" chart-series="series" chart-options="options"
chart-dataset-override="datasetOverride" chart-click="onClick">
</canvas>
Is there a way to just update or refresh the Line Chart with the $scope.dataFromREST data received and not create a new Chart object every time? (Because I think, the crash come from creating a new chart every time) I see the ".update()" function, but I can't seem to get it to work.
I have also tried the ".destroy()" and I am still getting the browser wind up to crash.
How can I get rid of that crash? Please help!
Yes, there is a way to simply update the underlying chart.js chart data without having to re-instantiate the chart each and every time. You just need to use the update(duration, lazy) function from the API.
Here is an example that I use in one of my apps (modified for your specific case). Note, chart is my chart.js object (what was returned from new Chart()...:
assembledData = {};
assembledData.data = // data from api call in an acceptable data format that chart.js understands
assembledData.colors = // new color definition for your data so it will update correctly
assembledData.labels = // new label definition for your data so it will update correctly
chart.data.datasets[0].data = assembledData.data;
chart.data.datasets[0].backgroundColor = assembledData.colors;
chart.data.labels = assembledData.labels;
chart.update();
Depending on how your chart behaves you may not have to re-define colors and labels on each update.