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

0
0

Legend

I have graphs on two adjacent fragments, and when I select one, then swap to the other, the legend draws like this.
I believe it is because I am setting up & drawing the graph when it is off screen. As when you are viewing a fragment it loads the ones to either side for smooth operation, but is there any way to fix this? Maybe I’m doing something wrong and that’s why I’m getting the weird check boxes.

To be clear, these are all checked, but they look weird to our end-users

Version
2.2.2.2410
  • Yura Khariton
    Hi Peter. Your legend looks custom because for now we don’t support dashed line in legend so I want to ask if tried to use default legend implementation. Also can you post some code which will allow us to reproduce this issue on our side? If you don’t want to share your code on forums you can open a support ticket and attach your project there. Thanks in advance.
  • You must to post comments
0
0

You know, you’re right! I had added that so early in the project, I totally forgot that it was a custom legend! I actually was hoping to limit the maximum height of the legend to only 3 or 4 entries, and having them scroll through those, but that is for a different time. It is tricky because scrolling views with check-boxes both want the touch event.

As for the weird checkbox visuals, I haven’t tried it with a stock legend (as I had forgotten I was using a custom one).

I realise that the dashed line is a bit of a hack, and I could probably have accomplished a similar thing using a dashed drawline, but that is how I was able to get it to look the way I wanted.

loading up the legend is here

LegendModifier legMod = new LegendModifier(new SciChartLegend(getActivity()), new SeriesInfoLegendAdapter(new CustomLegendItemFactory()), true);

legMod.setLegendPosition(Gravity.LEFT | Gravity.TOP, 10);
legMod.setOrientation(Orientation.VERTICAL);
legMod.setSourceMode(SourceMode.AllSeries);
ModifierGroup legendModifier = sciChartBuilder.newModifierGroup()
    .withModifier(legMod)
    .build();

chart.getChartModifiers().add(legendModifier);

This is the legend factory

package com.example.www.Utilities;

import android.app.ActionBar;
import android.support.annotation.NonNull;
import android.support.constraint.ConstraintLayout;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.CheckBox;
import android.widget.LinearLayout;
import android.widget.TextView;

import com.scichart.charting.themes.IThemeProvider;
import com.scichart.charting.themes.ThemeManager;
import com.scichart.charting.visuals.legend.*;
import com.scichart.charting.visuals.renderableSeries.IRenderableSeries;
import com.scichart.charting.visuals.renderableSeries.hitTest.SeriesInfo;
import com.scichart.drawing.common.FontStyle;
import com.example.www.R;

public class CustomLegendItemFactory implements ILegendItemsFactory {

    @Override
    public ILegendItem createLegendItem(ViewGroup parent) {
        return new CustomLegendItem(LayoutInflater.from(parent.getContext()).inflate(R.layout.legend_item, null));
    }
}

class CustomLegendItem extends LegendItemBase {
    protected final LinearLayout item;
    protected final TextView name;
    protected final CheckBox checkBox;
    protected final LegendPointMarker pointMarker;
    protected final LegendPointMarker dashMarkerA;
    protected final LegendPointMarker dashMarkerB;
    protected final LegendPointMarker dashMarkerC;
    protected final ConstraintLayout dashMarker;

    public CustomLegendItem(@NonNull View itemView) {
        super(itemView);

        item = (LinearLayout) itemView;
        name = (TextView) itemView.findViewById(com.scichart.charting.R.id.name);
        checkBox = (CheckBox) itemView.findViewById(com.scichart.charting.R.id.isVisible);
        pointMarker = (LegendPointMarker) itemView.findViewById(com.scichart.charting.R.id.pointMarker);
        dashMarkerA = (LegendPointMarker) itemView.findViewById(R.id.dashMarker1);
        dashMarkerB = (LegendPointMarker) itemView.findViewById(R.id.dashMarker2);
        dashMarkerC = (LegendPointMarker) itemView.findViewById(R.id.dashMarker3);
        dashMarker = itemView.findViewById(R.id.dashMarker);
    }

    @Override
    public void bindSeriesInfo(Object source, SciChartLegend legend) {
        final SeriesInfo seriesInfo = (SeriesInfo) source;

        name.setText(seriesInfo.seriesName);
        LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(ActionBar.LayoutParams.WRAP_CONTENT, ActionBar.LayoutParams.WRAP_CONTENT);
        params.setMarginEnd(5);
        name.setLayoutParams(params);

        checkBox.setVisibility(legend.getShowCheckboxes() ? View.VISIBLE : View.GONE);
        checkBox.setChecked(seriesInfo.isVisible());
        checkBox.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                IRenderableSeries renderableSeries = seriesInfo.renderableSeries;
                renderableSeries.setIsVisible(((CheckBox) view).isChecked());
                renderableSeries.invalidateElement();
            }
        });
        pointMarker.setColor(seriesInfo.seriesColor);
        dashMarkerA.setColor(seriesInfo.seriesColor);
        dashMarkerB.setColor(seriesInfo.seriesColor);
        dashMarkerC.setColor(seriesInfo.seriesColor);

        Boolean isDisp = false;
        if (name.getText().toString().contains("_d"))
            isDisp = true;

        pointMarker.setVisibility(isDisp ? View.GONE : View.VISIBLE);
        dashMarker.setVisibility(isDisp ? View.VISIBLE : View.GONE);

        ThemeManager.applyTheme(this, legend.getTheme(), legend.getContext());
    }

    @Override
    public void applyThemeProvider(IThemeProvider themeProvider) {
        final FontStyle legendLabelTextStyle = themeProvider.getDefaultLabelTextStyle();
        legendLabelTextStyle.initTextView(name);
    }
}

and finally, my legend.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/legend_item"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_margin="@dimen/legendItemMargin"
    android:orientation="horizontal">

    <CheckBox
        android:id="@+id/isVisible"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:textSize="@dimen/legendTextSize"
        android:layout_marginLeft="@dimen/legendItemCheckBoxNegativeMargin"
        android:layout_marginTop="@dimen/legendItemCheckBoxNegativeMargin"
        android:layout_marginRight="@dimen/legendItemCheckBoxNegativeMargin"
        android:layout_marginBottom="@dimen/legendItemCheckBoxNegativeMargin" />

    <com.scichart.charting.visuals.legend.LegendPointMarker
        android:id="@+id/pointMarker"
        android:layout_width="@dimen/legendItemPointMarkerWidth"
        android:layout_height="4sp"
        android:layout_gravity="center"
        android:layout_margin="@dimen/legendItemPointMarkerMargin"
        android:layout_marginTop="@dimen/legendItemPointMarkerMargin"
        android:visibility="visible"/>

    <android.support.constraint.ConstraintLayout
        android:id="@+id/dashMarker"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_marginEnd="@dimen/legendItemPointMarkerMargin"
        android:layout_marginTop="@dimen/legendItemPointMarkerMargin"
        android:visibility="gone">

        <com.scichart.charting.visuals.legend.LegendPointMarker
            android:id="@+id/dashMarker1"
            android:layout_width="10dp"
            android:layout_height="0sp"
            android:layout_gravity="center"
            android:layout_margin="@dimen/legendItemPointMarkerMargin"
            android:layout_marginTop="@dimen/legendItemPointMarkerMargin"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintDimensionRatio="5:2"
            />

        <com.scichart.charting.visuals.legend.LegendPointMarker
            android:id="@+id/dashMarker2"
            android:layout_width="10dp"
            android:layout_height="0sp"
            android:layout_gravity="center"
            android:layout_margin="@dimen/legendItemPointMarkerMargin"
            android:layout_marginTop="@dimen/legendItemPointMarkerMargin"
            app:layout_constraintLeft_toRightOf="@id/dashMarker1"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintDimensionRatio="5:2"
            />

        <com.scichart.charting.visuals.legend.LegendPointMarker
            android:id="@+id/dashMarker3"
            android:layout_width="10dp"
            android:layout_height="0sp"
            android:layout_gravity="center"
            android:layout_margin="@dimen/legendItemPointMarkerMargin"
            android:layout_marginTop="@dimen/legendItemPointMarkerMargin"
            app:layout_constraintLeft_toRightOf="@id/dashMarker2"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintDimensionRatio="5:2"
            />

    </android.support.constraint.ConstraintLayout>

    <TextView
        android:id="@+id/name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical|start"
        android:layout_marginEnd="@dimen/legendItemSeriesNameRightMargin"
        android:layout_marginStart="@dimen/legendItemSeriesNameLeftMargin"
        android:textSize="@dimen/legendTextSize"
        android:textStyle="bold" />

</LinearLayout>
  • You must to post comments
Showing 1 result
Your Answer

Please first to submit.