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

6 posts, 0 answers
  1. Oleg
    Oleg avatar
    8 posts
    Member since:
    Nov 2014

    Posted 18 Nov 2014 Link to this post

    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.
  2. Adrian
    Admin
    Adrian avatar
    167 posts

    Posted 18 Nov 2014 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. DevCraft banner
  4. Oleg
    Oleg avatar
    8 posts
    Member since:
    Nov 2014

    Posted 18 Nov 2014 in reply to Adrian Link to this post

    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?


  5. Adrian
    Admin
    Adrian avatar
    167 posts

    Posted 19 Nov 2014 Link to this post

    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

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  6. Oleg
    Oleg avatar
    8 posts
    Member since:
    Nov 2014

    Posted 19 Nov 2014 in reply to Adrian Link to this post

    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.






  7. Adrian
    Admin
    Adrian avatar
    167 posts

    Posted 21 Nov 2014 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top
DevCraft banner