SciChart® the market leader in Fast WPF Charts, WPF 3D Charts, iOS Chart, Android Chart and JavaScript Chart Components

1 vote
10k views

Hi folks,

I’ve just upgraded a project to SciChart version 3.x. I got most everything working, but one issue remains…

In 1.x and 2.x, I was able to hide cursor labels by adding an empty AxisLabelTemplate like this:

<s:CursorModifier x:Name="MainCursor" ShowAxisLabels="True" ShowTooltip="False" LineOverlayStyle="{x:Null}">
     <s:CursorModifier.AxisLabelTemplate>
         <!-- This empty template hides Themes cursor labels -->
         <ControlTemplate TargetType="s:TemplatableControl" />
      </s:CursorModifier.AxisLabelTemplate>
 </s:CursorModifier>

In 3.x, this doesn’t quite seem to work. I have no y-axis cursor label, but I do have an x-axis cursor label. (My axes are treated differently; one is in XAML, and one is in code since I swap between linear and log axes occasionally.)

How can I get rid of the x-axis cursor?

Thanks,
–George

  • yefchak asked 8 years ago
  • last active 8 years ago
0 votes
1k views

I’m trying to have a transparent axisLabelFill for my yAxis and a black axisLabelFill for my xAxis. How can I achieve that?

0 votes
4k views

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?

1 vote
540 views

Hello I have been having a difficult time getting the correct time displayed on my xAxis and labels.

Passing in an xValue to an OHLC data series of 60 and the setting cursorLabelFormat: ENumericFormat.Date_DDMMHHMM this should produce a label “01/01 00:01” With the year as 1970.

When the computers timezone is set to UTC + 0 this behaves as expected.

However when the computers timezone is set to anything negative (UTC – 7) the label is formatted as “31/12 00:01” with the year 1969. If scichart is trying to convert to local time I would expect a reading of “31/12 17:01” 1969.

And when the timezone is set to anything positive (UTC + 7) the label is formatted as it is UTC +0 “01/01 00:01” 1970 again I would expect the hour to corrispond to the UTC offset if scichart is trying to convert to local time.

Looking at the later case I would assume that no time conversion is taking place which is what I would prefer. But looking at the former case (UTC -X) there appears to be some manipulation happening somewhere, I just have not been able to find any documentation explaining this. Am I missing something to get this to work properly out of the box without a custom label provider?

Thank you,

Update:

I do not want to worry about timezones. I want sciChart to plot the time that I give it. Again this is acting as expected when the computer timezone is in anything greater than UTC 0. But when the computer timezone is less than UTC 0 the label and axes are showing a date 24 hours prior to what I give it.

See attached images for the error. Note the only change that is happening is changing the computer timezone from UTC – 4 to UTC + 4.

See below for code setting up the chart.

Why is changing the computer timezone affecting the data labels?

export async function example(element) {
    let { sciChartSurface, wasmContext } = chartInstances.hasOwnProperty(element.id) && chartInstances[element.id];

    // initialize sciChart and add created chart to chartInstances
    if (sciChartSurface === undefined) {
        const newContext = await SciChartSurface.create(element.id);
        sciChartSurface = newContext.sciChartSurface;
        wasmContext = newContext.wasmContext;
        chartInstances[element.id] = { sciChartSurface, wasmContext };
    }

    //create and add xAxis
    let xAxis = new CategoryAxis(wasmContext, {
        drawLabels: true,
        drawMajorTickLines: true,
        drawMinorTickLines: true,
        axisAlignment: EAxisAlignment.Bottom,
        autoRange: EAutoRange.Once,
        cursorLabelFormat: ENumericFormat.Date_DDMMHHMM,
        labelFormat: ENumericFormat.Date_DDMMYYYY,
    });

    sciChartSurface.xAxes.add(xAxis);

    //create and add yAxis
    let yAxis = new NumericAxis(wasmContext, {
        maxAutoTicks: 5,
        autoRange: EAutoRange.Always,
        growBy: new NumberRange(0.3, 0.11),
        axisAlignment: EAxisAlignment.Right,
        labelPrecision: 4
    });
    sciChartSurface.yAxes.add(yAxis);

    //add chart modifiers
    sciChartSurface.chartModifiers.add(new ZoomPanModifier({ xyDirection: EXyDirection.XDirection }));
    sciChartSurface.chartModifiers.add(new ZoomExtentsModifier({ xyDirection: EXyDirection.XDirection }));
    sciChartSurface.chartModifiers.add(new MouseWheelZoomModifier({ xyDirection: EXyDirection.XDirection }));
    sciChartSurface.chartModifiers.add(new RolloverModifier({ modifierGroup: "first", showTooltip: false }));
    sciChartSurface.chartModifiers.add(new CursorModifier(
        {
            crosshairStroke: "#9598a1",
            crosshairStrokeDashArray: [10, 5],
        }));

    //apply desired theme
    sciChartSurface.applyTheme(new SciChartJSDarkTheme());

    //create three bars 
    _ohlcDataSeries = new OhlcDataSeries(wasmContext, {
        xValues: [60,120,180], //1 min, 2 min, 3 min post epoch
        openValues: [10,10,10],
        highValues: [15,15,15],
        lowValues: [5,5,5],
        closeValues: [11,11,11],
        dataSeriesName: "PriceDataSeries"
    });

    //create and style fastCandRendSeries
    const fcRendSeries = new FastCandlestickRenderableSeries(wasmContext,
        {
            dataSeries: _ohlcDataSeries,
            strokeThickness: 1,
            dataPointWidth: 0.5,
            brushUp: "#50ff50B2",
            brushDown: "#ff5050B2",
            strokeUp: "#50ff50",
            strokeDown: "#ff5050",
            animation: new WaveAnimation({ fadeEffect: true, duration: 800 })
        });
    sciChartSurface.renderableSeries.add(fcRendSeries);
}
  • Leland asked 5 months ago
  • last active 5 months ago
0 votes
4k views

How can I apply my style and template to my axes if I created the axes as NumericAxisViewModel in code and bound them to my SciChartSurface in my xaml view?

Regards,
Roland

  • Roland D asked 3 years ago
  • last active 2 months ago
Showing 5 results
This template supports the sidebar's widgets. Add one or use Full Width layout.