How to dynamically change a chart's element's colours when selecting an element from the chart

[Oleg]

The scenario is as follows:
I have a column chart with several series . When I select one of the columns, I would like to change the colour of the other columns to a dim color (For instance grey) and the selected column should be in a highlighted colour (for instance bright yellow, and not necessarily the original colour of the chart)
I don't understand how I can do this.

Thanks.

[Adrian]

Hi Avner,

Thank you for writing to us.

To achieve the desired scenario, you should use TKChartDelegate. You can use TKChartDelegate's chart:didSelectPoint:inSeries:atIndex: and chart:didDeselectPoint:inSeries:atIndex to save the selected data point index. Then you can use chart:paletteItemForSeries:atIndex: method to determine what palette item you should return if there is selected data point. Please consider the code snippet below:

- (TKChartPaletteItem *)chart:(TKChart *)chart paletteItemForSeries:(TKChartSeries *)series atIndex:(NSUInteger)index
{
    if (_selectedIndex != -1) {
        TKChartPaletteItem *item = [[TKChartPaletteItem alloc] init];
        if (_selectedIndex == index) {
            item.fill = [TKSolidFill solidFillWithColor:[UIColor yellowColor]];
        }
        else {
            item.fill = [TKSolidFill solidFillWithColor:[UIColor grayColor]];
        }

        return item;
    }

    return nil;
}

- (void)chart:(TKChart *)chart didSelectPoint:(id<TKChartData>)point inSeries:(TKChartSeries *)series atIndex:(NSInteger)index
{
    _selectedIndex = index;
}

- (void)chart:(TKChart *)chart didDeselectPoint:(id<TKChartData>)point inSeries:(TKChartSeries *)series atIndex:(NSInteger)index
{
    _selectedIndex = -1;
}

Do not forget to set TKChart's delegate property:

_chart.delegate = self;

I hope this helps. Please do not hesitate to contact us in case you need further assistance.

Regards,
Adrian
Telerik

 

 

[Oleg]

Great. Thanks!

Another quick question.

I have multiple series on the same chart (for instance multiple column series). I select one of the items from a series and change the colour of the chart's elements as you state. How can I do the same on the other series as well?

[Adrian]

Hi Avner,

You can achieve the same for the second column series using the same approach. You should just save the index of the selected series and then use it to determine what palette item to return. Please check the following code snippet:

- (TKChartPaletteItem *)chart:(TKChart *)chart paletteItemForSeries:(TKChartSeries *)series atIndex:(NSUInteger)index
{
    if (_selectedIndex != -1 && _selectedSeriesIndex == series.index) {
        TKChartPaletteItem *item = [[TKChartPaletteItem alloc] init];
        if (_selectedIndex == index) {
            item.fill = [TKSolidFill solidFillWithColor:[UIColor yellowColor]];
        }
        else {
            item.fill = [TKSolidFill solidFillWithColor:[UIColor grayColor]];
        }

        return item;
    }

    return nil;
}

- (void)chart:(TKChart *)chart didSelectPoint:(id<TKChartData>)point inSeries:(TKChartSeries *)series atIndex:(NSInteger)index
{
    _selectedIndex = index;
    _selectedSeriesIndex = series.index;
}

- (void)chart:(TKChart *)chart didDeselectPoint:(id<TKChartData>)point inSeries:(TKChartSeries *)series atIndex:(NSInteger)index
{
    _selectedIndex = -1;
    _selectedSeriesIndex = -1;
}

I hope this helps. 

Regards,
Adrian
Telerik

 

[Oleg]

Thanks.
It's working for all of my column series as expected but not for a line series.
When I select index 0 on the line , the whole line becomes selected , but when I select an index greater than zero , none of the points on the line become selected.

[Adrian]

Hello Avner,

To achieve the same effect in TKChartLineSeries, you should set the series selectionMode property to TKChartSeriesSelectionModeDataPoint and then use chart:paletteItemForPoint:inSeries: method of TKChartDelegate. In this method you should create and return the palette item that suits your needs and the chart will use it to style the series points. In the code snippet below you can see how to achieve the desired scenario:

- (void)viewDidLoad {

    //...

    TKChartLineSeries *lineSeries = [[TKChartLineSeries alloc] initWithItems:dataPoints];
    lineSeries.style.pointShape = [TKPredefinedShape shapeWithType:TKShapeTypeCircle andSize:CGSizeMake(8, 8)];
    lineSeries.selectionMode = TKChartSeriesSelectionModeDataPoint;
    [_chart addSeries:lineSeries];
}

- (TKChartPaletteItem *)chart:(TKChart *)chart paletteItemForPoint:(NSUInteger)index inSeries:(TKChartSeries *)series
{
    if (_selectedIndex != -1) {
        TKChartPaletteItem *item = [[TKChartPaletteItem alloc] init];
        if (_selectedIndex == index) {
            item.fill = [TKSolidFill solidFillWithColor:[UIColor yellowColor]];
        }
        else {
            item.fill = [TKSolidFill solidFillWithColor:[UIColor grayColor]];
        }
        return item;
    }
    return nil;
}

- (void)chart:(TKChart *)chart didSelectPoint:(id<TKChartData>)point inSeries:(TKChartSeries *)series atIndex:(NSInteger)index
{
    _selectedIndex = index;
}

- (void)chart:(TKChart *)chart didDeselectPoint:(id<TKChartData>)point inSeries:(TKChartSeries *)series atIndex:(NSInteger)index
{
    _selectedIndex = -1;
}

I hope this helps. I will be glad to help if you need any assistance.

Regards,
Adrian
Telerik