Hi,
When I did some practices with your example app, I found some features does not work as I expected.
Here is CandlestickChartFragment.java and I wrote additional lines on xAxis builder, yAxis builder and surface.chartModifiers,
public class CandlestickChartFragment extends ExampleBaseFragment {
@BindView(R.id.chart)
SciChartSurface surface;
@Override
protected int getLayoutId() {
return R.layout.example_single_chart_fragment;
}
@Override
protected void initExample() {
PriceSeries priceSeries = DataManager.getInstance().getPriceDataIndu(getActivity());
int size = priceSeries.size();
final IAxis xAxis = sciChartBuilder.newCategoryDateAxis()
.withVisibleRange(size - 30, size)
.withGrowBy(0, 0.1)
// Start additional lines
.withAutoFitMarginalLabels(false)
.withTextFormatting("yyyy-MM-dd")
.withCursorTextFormating("MM-dd")
// End additional lines
.build();
final IAxis yAxis = sciChartBuilder.newNumericAxis()
// Start additional lines
.withAutoFitMarginalLabels(false)
.withTextFormatting("$ #.#")
.withCursorTextFormating("#.#")
// End additional lines
.withGrowBy(0d, 0.1d)
.withAutoRangeMode(AutoRange.Always)
.build();
IOhlcDataSeries<Date, Double> dataSeries = new OhlcDataSeries<>(Date.class, Double.class);
dataSeries.append(priceSeries.getDateData(), priceSeries.getOpenData(), priceSeries.getHighData(), priceSeries.getLowData(), priceSeries.getCloseData());
final FastCandlestickRenderableSeries rSeries = sciChartBuilder.newCandlestickSeries()
.withStrokeUp(0xFF00AA00)
.withFillUpColor(0x8800AA00)
.withStrokeDown(0xFFFF0000)
.withFillDownColor(0x88FF0000)
.withDataSeries(dataSeries)
.build();
UpdateSuspender.using(surface, new Runnable() {
@Override
public void run() {
Collections.addAll(surface.getXAxes(), xAxis);
Collections.addAll(surface.getYAxes(), yAxis);
Collections.addAll(surface.getRenderableSeries(), rSeries);
Collections.addAll(surface.getChartModifiers(), sciChartBuilder.newModifierGroupWithDefaultModifiers()
// Start additional lines
.withCursorModifier().withShowAxisLabels(true).withShowTooltip(true).build()
// End additional lines
.build());
sciChartBuilder.newAnimator(rSeries).withWaveTransformation().withInterpolator(new DecelerateInterpolator()).withDuration(3000).withStartDelay(350).start();
}
});
}
}
The result is below picture. I also attached the same image.
https://imgur.com/a/5Eqo8Gd
Displayed xAxis values are [27 Sep, 04 Oct, 11 Oct, 18 Oct, 25 Oct, 01 Nov].
The problems are
1. xAxis(CategoryDate) tick values should be started with year, even though it does not have enough margin. It looks updated format is not applied.
2. Cursor should be shown on touch event, but it does not be displayed at all.
I ran above code on [Samsung Galaxy S9, API 26] and [Xiaomi Mi A1, API 25] and same problems are happened.
Could I know what I missed?
- Changhee Lee asked 5 years ago
- last active 5 years ago
我想实现一个功能,需要改变选中区域里面的几根蜡烛颜色为除了涨跌之外的其他颜色,整个功能该怎么实现?
- likui zhong asked 4 years ago
- last active 4 years ago
I’m using a candlestick series in a slightly unconventional use case, essentially to show a range at a given data point, screenshot below.
This works fine if the number of the data points and window size stays the same, but if I resize the window, the bars shrink accordingly, which I want to avoid.
So basically what I need is some kind of rendering mode that takes in a pixel width for the bars.
I’ve attempted to update the DataPointWidth on the series using a combination of the screen width and the number of points, but it’s extremely messy since the change needed isn’t linear.
- Lewis Savage asked 3 years ago
- last active 3 years ago
Hi,
the Tooltip from the rolloverModifier shows for the Open-Values the Label “Open”.
I would like to be able to change that. There might be serveral reasons for that. Maybe the shown data are not “openValues” or the word “open” needs to be translated into another language.
I managed to edit the title of a FastCandlestickRenderableSeries by setting a title and get it into the variable like this:
rolloverTitle = newtitle;
renderableSeries0.rolloverModifierProps.tooltipTitle = rolloverTitle;
unfortunately i did not find a way to set the name/label for the open-,low-,close-, or high-values of this Series.
Can someone give ma a hint how to do this?
- Sebastian Affeld asked 7 months ago
- last active 7 months ago
I want to use a different color for each value in the chart I created here. To put it simply, if the value is greater than 10, I want it to appear yellow, if it is less than green, and red if it is less than 0. thanks
const { sciChartSurface, wasmContext } = await SciChartSurface.create("scichart-root", {
theme: new SciChartJSLightTheme(),
});
sciChartSurface.applyTheme(new SciChartJSLightTheme());
sciChartSurface.xAxes.add(new NumericAxis(wasmContext));
sciChartSurface.yAxes.add(new NumericAxis(wasmContext));
const yAxis = sciChartSurface.yAxes.get(0);
yAxis.visibleRange = new NumberRange(LAL, UAL);
const xAxis = sciChartSurface.xAxes.get(0);
xAxis.visibleRange = new NumberRange(0, endBarIndex);
const dataSeries = new OhlcDataSeries(wasmContext, {
xValues: xValues,
openValues: yValues,
highValues: compositeScanAverageArray,
lowValues: yValues,
closeValues: compositeScanAverageArray,
});
const renderableSeries = new FastCandlestickRenderableSeries(wasmContext, {
dataSeries,
stroke: "white",
strokeThickness: 1,
});
sciChartSurface.renderableSeries.add(renderableSeries);
sciChartSurface.annotations.add(
new SciChart.BoxAnnotation({
stroke: "yellow",
strokeThickness: 1,
fill: "rgba(255, 255, 0, 0.3)",
x1: 0,
x2: endBarIndex,
y1: UAL,
y2: UWL,
})
);
sciChartSurface.annotations.add(
new SciChart.BoxAnnotation({
stroke: "yellow",
strokeThickness: 1,
fill: "rgba(255, 255, 0, 0.3)",
x1: 0,
x2: endBarIndex,
y1: LAL,
y2: LWL,
})
);
sciChartSurface.annotations.add(
new SciChart.BoxAnnotation({
stroke: "green",
strokeThickness: 1,
fill: "rgba(0, 128, 0, 0.3)",
x1: 0,
x2: endBarIndex,
y1: LWL,
y2: UWL,
})
);
sciChartSurface.annotations.add(
new SciChart.LineAnnotation({ stroke: "#FF6600", strokeThickness: 3, x1: startBarIndex, x2: endBarIndex, y1: compositeScanAverage, y2: compositeScanAverage }),
);
sciChartSurface.chartModifiers.add(new MouseWheelZoomModifier());
sciChartSurface.chartModifiers.add(new ZoomPanModifier());
}
- Can Ata Tekirdağlı asked 2 months ago
- last active 2 months ago
When using FastCandlestickRenderableSeries, I want every value to appear on the chart. I tried to use DataLabelProvider for this, but it didn’t work. What can I do.
class CustomDataLabelProvider extends DataLabelProvider {
onDataPoint(renderableSeries, xValue, yValue) {
const labelText = `${yValue.toFixed(2)}`;
const label = document.createElement('div');
label.textContent = labelText;
label.style.position = 'absolute';
label.style.color = 'black';
label.style.fontSize = '12px';
label.style.left = `${this.parentSurface.coordinateCalculator.getCoordinateFrom(xValue) - label.clientWidth / 2}px`;
label.style.top = `${this.parentSurface.coordinateCalculator.getCoordinateFrom(yValue) - label.clientHeight}px`;
this.parentSurface.annotationCanvas.appendChild(label);
}
}
const { sciChartSurface, wasmContext } = await SciChartSurface.create("scichart-root", {
theme: new SciChartJSLightTheme(),
titleStyle: { fontSize: 22 },
});
sciChartSurface.applyTheme(new SciChartJSLightTheme());
sciChartSurface.xAxes.add(new NumericAxis(wasmContext));
sciChartSurface.yAxes.add(new NumericAxis(wasmContext));
const yAxis = sciChartSurface.yAxes.get(0);
yAxis.visibleRange = new NumberRange(LAL, UAL);
const xAxis = sciChartSurface.xAxes.get(0);
xAxis.visibleRange = new NumberRange(0, endBarIndex);
const dataSeries = new OhlcDataSeries(wasmContext, {
xValues: xValues,
openValues: compositeScanAverageArray,
highValues: yValues,
lowValues: compositeScanAverageArray,
closeValues: yValues,
});
sciChartSurface.renderableSeries.add(new FastCandlestickRenderableSeries(wasmContext, {
dataSeries: dataSeries,
strokeThickness: 1,
dataPointWidth: 0.5,
paletteProvider: new CustomPaletteProvider(),
dataLabelProvider: new CustomDataLabelProvider(),
}));
- Can Ata Tekirdağlı asked 2 months ago
- last active 1 month ago