I have a histogram type highcharts, and I need inside the chart event update function get access to series[0].data for changing points color. I can see series[0].data array with all my points in google dev tools, but actually get an empty array in JS code. After the updated color of points does not change. Example: jsfiddle
There is no such event as chart.events.update. Use the render instead - API: https://api.highcharts.com/highcharts/chart.events.render
Demo: https://jsfiddle.net/BlackLabel/csdnh6e3/
chart: {
events: {
render: function() {
console.log('data :', this.series[0].data);
this.series[0].data.forEach(data => data.update({
color: '#0f5'
}, false)); // after the update() color of points does not change
}
}
},
Related
As shown in the image, I want to show two sunbursts next to each other. I want to implement it with Highchart and react in such a way where,
If user mouse over on any data point on one sunburst, same data point should get highlighted on another chart, while other data points just goes into disabled mode or changes their color to white
In mouseOver event, by using references to the charts, you can programmatically set 'hover' state at the right point:
point: {
events: {
mouseOver: function() {
const chart1 = component.highchartsChart1.current.chart;
const chart2 = component.highchartsChart2.current.chart;
function clearState(chart) {
Highcharts.each(chart.series[0].points, function(p) {
p.setState("");
});
}
if (this.series.chart === chart1) {
clearState(chart2);
chart2.series[0].points[this.index].setState("hover");
} else {
clearState(chart1);
chart1.series[0].points[this.index].setState("hover");
}
}
}
}
Live demo: https://codesandbox.io/s/nn54z2234m
API: https://api.highcharts.com/class-reference/Highcharts.Point#setState
My goal is to get 3 charts, with the most recently selected series in the first chart updating the second chart, and the most recently selected series in the second chart updating the third chart.
I start by setting up 3 divs:
<div id="chart1"></div>
<div id="chart2"></div>
<div id="chart3"></div>
I then generate 3 charts like so (essentially the same, but with different detail levels in the source data):
var chart1 = c3.generate({
bindto: document.getElementById('chart1'),
data: {
x: 'date',
url: 'file1.csv'
},
axis: {
x: {
type: 'timeseries',
tick: {
format: '%Y-%m-%d',
count: 8
},
label: "Date"
},
y: {
label: "Y Label"
}
},
// irrelevant options removed
legend: {
item: {
onclick: (id) => {
chart1.toggle(id);
chart_options2.data.url = 'file2_'+ id +'.csv';
if(chart1.data.shown(id).length == 1 ){
generateChart2(id);
}
}
}
}
});
var chart2 = c3.generate({
bindto: document.getElementById('chart2'),
// etc.
var chart3 = c3.generate({
bindto: document.getElementById('chart3'),
// etc.
The function generateChart2() will use the id of the selected series in chart1 to generate a new chart in the place of chart2. Likewise I have a similar function generateChart3() which will use the id of the selected series in chart2 to generate a new chart in the place of chart3. These functions look like this:
function generateChart2(id) {
c3.generate(chart_options2);
};
With chart_options being identical to the original set up options, except for the updated file source (see chart_options2.data.url = 'file2_'+ id +'.csv'; above).
Initially, these all seem to work ok. The problem arises when a new chart2 is created using the generateChart2() function, and the onclick property no longer seems to work for certain things. Testing with console.log, the onclick still seems to be called, and I can update the chart options var, but I can't use any of the other commands:
onclick: function (id) {
console.log('test'); // returns 'test'
chart2.toggle(id); // doesn't work
chart_options3.data.url = 'file3_'+ id +'.csv'; // works
if(chart2.data.shown(id).length == 1 ){
generateChart3(id); // doesn't work
}
I suspect it has something to do with the namespace, or how I'm using the chart names, or how I'm calling the function. I've spent a couple of days looking at this problem, but all my research hasn't really made it much clearer which direction I should be looking in.
EDIT: I found a workaround, which makes sense for my use case, but doesn't help me learn what I was doing wrong. Now instead of reusing c3.generate to dynamically create a new chart every time a series is selected in the previous chart, I am using unload() and load(). This seems to be working well, but I would very much appreciate an explanation or clarification of what I was doing wrong the first time. Updated code:
onclick: function (id) {
chart1.toggle(id);
if(chart1.data.shown(id).length == 1 ){
chart2.unload();
setTimeout(function () {
chart2.load({
url: 'file2_'+ id +'.csv'
});
}, 1000);
}
}
How can I set the fill color of a Gantt chart shape based on the value of a property in the bound json model?
Here's the code I am using to configure the sap.gantt.config.Shape :-
var oRectangle = new sap.gantt.config.Shape({
key: "Rectangle",
shapeDataName: "schedule",
shapeClassName: "sap.gantt.shape.Rectangle",
shapeProperties: {
time: "{startTime}",
endTime: "{endTime}",
height: 32,
fill: "green",
title: "{name}",
level: 0
}
});
The use case I am trying to address is :-
If there are 4 or more schedules, then fill the shape with GREEN else fill YELLOW.
I have already tried expression binding like :
fill: "{= ${data>/schedule}.length > 4 ? 'green' : 'yellow' }"
But that didn't give any result and filled the shape with the default BLACK color.
Is there some other way of getting it possible?
Also, is there a way we can configure Gantt shapes in XML views itself ratherer than doing all these configurations the in controller?
delete the attribute from your shape definition.
Before you define the oRectangle, put the following code segment:
sap.ui.define(["sap/gantt/shape/Rectangle"], function (Rectangle) {
var shapeRectangle = Rectangle.extend("sap.test.shapeRectangle");
shapeRectangle.prototype.getFill = function (oRawData) {
return oRawData.color;
};
return shapeRectangle;
}, true);
After that, you have to provide the property color to the order in your data model on the same level as startTime, endTime, etc...
Is there a way to update the x-axis on a real time flot chart?
I want something like this -> (http://www.flotcharts.org/flot/examples/realtime/index.html)
but as you can see, there are no values on the x-axis..
So, is there a way to shift the x-axis values as the chart shifts?
Thanks in advance!
You first need to show the x axis:
var plot = $.plot("#placeholder", [ getRandomData() ], {
xaxis: {
show: true
}
});
Then on every data update you need to update the grid as well:
function update() {
plot.setData([getRandomData()]);
plot.setupGrid(); // updating the grid
plot.draw();
setTimeout(update, updateInterval);
}
Check this plunker for example.
I want to be able to have multiple real-time flot charts. I have it working with one flot chart where everything is updated real time via this function:
function updateOnce(plot)
{
plot.setData([{ label: 'G-force', data: getRandomData(), lines: { show: true } }]);
plot.setupGrid();//sensorPlots[i]
plot.draw();
setTimeout(function () { updateOnce(plot); }, 30);
}
Now the problem I have is that I am dynamically generating the plot and adding it to an array. How could I setup this type of function to iterate every the array and run this function for every plot in the array without affecting the others?
I've tried this:
function updateOnce()
{
$.each(sensorPlots, function (i, val) {
val.setData([{ label: 'G-force', data: getRandomData(), lines: { show: true } }]);
val.setupGrid();//sensorPlots[i]
val.draw();
setTimeout(updateOnce, 30);
});
}
sensorPlots is an array filled with `plots`
but then this causes my graph to move faster and faster with every plot that I add.
The problem seems to be that you are declaring a new timeout for every plot every time the timeout function is run. This will lead to the function being called with exponentially increasing frequency which is very bad... What if you do it like this:
function updateOnce() {
$.each(sensorPlots, function (i, val) {
val.setData([{ label: 'G-force', data: getRandomData(), lines: { show: true}}]);
val.setupGrid();//sensorPlots[i]
val.draw();
});
setTimeout(updateOnce, 30);
}
updateOnce();