I have an issue with spline chart update with every second. Chart redraw every time so it is not showing constant wave.
Here is image how it looks
I have tried like this
this.timeinterval = setInterval(() => {
const x = (new Date()).getTime() + 7200000; // current time
if (this.voltage) {
this.chart['series'][0].addPoint([x, this.voltage], true, true);
}
}, 250);
How can i fix it to go smoothly.
Related
I would appreciate help to copy a line from one MT4 chart to another programatically. If I draw a line on a one hour time frame I would like the line to be recreated on my 15 min chart time frame as well as my 1 min time frame. So I have three charts and drawing a line on the one chart should recreate the line on the other two charts as well. The line that I draw on my 1 hour time frame will be drawn with a mouse rather than the line being drawn programatically.
This seems to be the answer:
void OnChartEvent(const int id,
const long &lparam,
const double &dparam,
const string &sparam)
{
//---
long lNextChartID = 0, lSecondChartID = 0;
datetime dtOpenTime,dtCloseTime;
double dOpenPrice,dClosePrice;
if(id==CHARTEVENT_OBJECT_CREATE)
{
if(ObjectType(sparam) == OBJ_TREND)
{
lNextChartID = ChartNext(ChartID());
lSecondChartID == ChartNext(lNextChartID);
dtOpenTime = ObjectGet(sparam,OBJPROP_TIME1);
dtCloseTime = ObjectGet(sparam,OBJPROP_TIME2);
dOpenPrice = ObjectGet(sparam,OBJPROP_PRICE1);
dClosePrice = ObjectGet(sparam,OBJPROP_PRICE2);
if(ChartSymbol(lNextChartID) == ChartSymbol(0) &&
ChartPeriod(lNextChartID) < ChartPeriod(0))
{
ObjectCreate(lNextChartID,sparam + "1",OBJ_TREND,0,dtOpenTime,dOpenPrice,dtCloseTime,dClosePrice);
}
}
}
}
I have a chart like this, you can see that only about 22 points in the chart from left to right. I want to increase this, so that there are more points. Right now it seems very jumpy, but the range is only between 10-11.5, I want to "zoom out" so the line almost looks flat, and these huge peaks and valleys look like little bumps. I've combed over the highcharts documentation and cannot find this config setting.
In the initial creation of the spline chart, an array of point is created, in the default case it is 49 samples, here I changed it to 200, which did what I needed.
series: [{
name: 'Random data',
data: (function () {
// generate an array of random data
var data = [],
time = (new Date()).getTime(),
i;
for (i = -200; i <= 0; i += 1) {
data.push({
x: time + i * 1000,
y: Math.random()
});
}
return data;
}())
}]
I have a pie chart in Highcharts that reduces each slice to create a "fan" effect. Each slice is working great. However, the labels need to be handled as well. I tried the following:
new Highcharts.chart(div, pieOptions,
function(chartObj) {
var j = 0;
$.each(chartObj.series[0].data, function(i, point) {
point.labelDistance = j;
j -= 25;
});
});
This actually updates the label distance properly in the logged out data, but not in the visual itself. I've also tried reloading the chart each time.
Here is a jsfiddle: https://jsfiddle.net/s2pdroze/1/
Summary: I'm looking for each label on each slice to move slight more inward on each iteration.
I'm currently working on a graph, which should visualise a fixed time frame. I want to have the start and end of the timeframe fixed on the width of the graph and want to set a custom amount of ticks in between, depending on the timeframe.
I tried to find something in the highcharts docu, but it seems there is nothing for gwt as "tickpositioner" or "tickpositions" for javascript would do.
Has anybody an idea how to approach a solution in gwt to achieve this behaviour please?
I found a solution where i set the tickpositioner in the JSONObject and implement the function in javascript. Mind the "positions.info" because due to the tickpositioner function, label predefined label formatting gets lost.
void setXaxisTicks(XAxis xAxis, Long start, Long end) {
JSONObject options = xAxis.getOptions();
options.put("tickPositioner", null);
configureXAxis(options.getJavaScriptObject(), start, end);
}
private native void configureXAxis(JavaScriptObject javaScriptObject, Number start, Number end) /*-{
javaScriptObject.tickPositioner = function () {
var positions = [],
tick = Math.floor(start),
increment = Math.ceil((end - start));
for (tick; tick - increment <= end; tick += increment) {
positions.push(tick);
}
tLen = positions.length;
positions.info = {
unitName: "minute",
higherRanks: {},
totalRange: positions[tLen - 1] - positions[0]
};
return positions;
};
}-*/;
I'm seeing some odd behavior in a Highcharts line chart. I have multiple series displayed, and need to let the user change what's called the "Map level" on the chart, which is a straight line across all time periods. Assuming that the correct series is
chart.series[i]
and that the new level that I want it set to is stored in var newMapLevel,
I'm changing that series' data like so:
data = chart.series[i].data;
for(j=0; j<data.length; j++){
data[j].y = newMapLevel;
}
chart.series[i].setData(data);
Calling this function has the desired effect UNLESS the new map level y_value is ONE greater than the highest y_value of all other series, in which case the y-axis scale blows up. In other words, if the y_axis scale is normally from 0 to 275,000, and the highest y_value of any of the other series is, say, 224,000, setting the new map level value to 224,001 causes the y_axis scale to become 0 to 27500M. Yes, that's 27.5 billion.
Might this be a bug in Highcharts? Or is there a better way to change the data in a series?
I've posted a fiddle: http://jsfiddle.net/earachefl/4FuNE/4/
I got my answer from the Highcharts forum:
http://highslide.com/forum/viewtopic.php?f=9&t=13594&p=59888#p59888
This doesn't work as smoothly as I'd like. When you go from 8 as your line to 2 as your line, the scale doesn't adjust back down until you enter another value. Perhaps it's a start in the right direction.
$(document).ready(function(){
$('#clickme').click(function(){
var newMapLevel = $('#newMAP').val();
if(newMapLevel){
for(i=0; i<chart.series.length; i++){
if(chart.series[i].name == 'Map Level'){
data = chart.series[i].data;
for(j=0; j<data.length; j++){
data[j].y = newMapLevel;
}
// get the extremes
var extremes = chart.yAxis[0].getExtremes();
//alert("dataMin: " + extremes.dataMin);
//alert("dataMax: " + extremes.dataMax);
// define a max YAxis value to use when setting the extremes
var myYMax = extremes.dataMax;
if (newMapLevel >= myYMax) {
myYMax = Number(newMapLevel) + 1; // number conversion required
}
if (myYMax > chart.yAxis[0].max) {
alert('cabbbie');
myYMax = chart.yAxis[0].max + 1;
}
//alert("myYMax: " + myYMax);
chart.yAxis[0].setExtremes(extremes.dataMin, myYMax)
// finally, set the line data
chart.series[i].setData(data);
}
}
}
}); });