How to make the background of the series clickable

[kako]

Hi.

It acquires e.dataItem in the SeriesClick event and displays the acquired data with an alert.

So, is there a way to make the background of the series clickable?

[Tsvetina]

Hello Kako,

Instead of seriesClick, you can use the plotAreaClick event to detect a click outside the series. The event arguments include the category value, which you can use to find the corresponding item in the DataSource:

plotAreaClick: function(e){
  var category = e.category;
  var data = e.sender.dataSource.view();

  for(var i = 0; i < data.length; i++){
    if(data[i].year == category){
      var dataItem = data[i];
        alert("Nuclear: " + dataItem.nuclear + "; Wind: " + dataItem.wind);
      break;
    }
  }
}

Here is a Dojo where you can test this code:
https://dojo.telerik.com/iCEsEJih

Regards,
Tsvetina
Progress Telerik

[kako]

Wow! Thank you very much!!

[kako]

Is there a way to change the color of the clicked PlotArea?

I tried it with PlotBands, but it did not work.

If you set pannable to true,I set PlotBand in 2003, but PlotBand moves to a different year every time I pan.

https://dojo.telerik.com/iCEsEJih/2

[Tsvetina]

Hello Kako,

The problem comes from the fact that plot bands are placed at a given slot of the category axis and when the Chart is panned, the category axis slots change (only the visible slots exist and are indexed). If your Chart uses dates as categories, it is possible to set the categoryAxis type to "date" and then you can set the plotBands from and to values to dates instead of slot indexes. This will make the plot bands remain at their correct place while panning:
https://dojo.telerik.com/iCEsEJih/4

Regards,
Tsvetina
Progress Telerik

[kako]

Thanks!

However, why do I see three category axes or four category axes when panning a demo?

Can I always display three category axes?

[Tsvetina]

Hello Kako,

This behavior is not specific to this Chart but also happens with other Charts using a category axis of type data. I will check with the development team to see what is the reason for this behavior and will post back again when I have more information.

Regards,
Tsvetina
Progress Telerik

[Tsvetina]

Hello Kako,

This happens because of a default behavior in the date category axis to round the dates at the axis ends to the prev/next base unit when the category axis min/max enters inside it. You can prevent this by setting roundToBaseUnit: false in your Chart category axis options:

categoryAxis: {
  type: "date",
  max: "2000/01/06",
  roundToBaseUnit: false
}

https://dojo.telerik.com/iCEsEJih/6

Regards,
Tsvetina
Progress Telerik

[kako]

Hello Tsvetina!

Thank you for answering!

I'd like to check it again, but do I have to use "Date" in order to keep the plot band in the correct position during panning?

Can not it be realized by number(ex. 5,6,7,8,9)?

 

[Tsvetina]

Hi Kako,

Yes, when placing plotBands based on index, they change their place when panning, as panning changes the slots indexes. When the category axis type is "date" and plot bands are placed based on the specific date, they remain at the same slot even if it is moved.

Regards,
Tsvetina
Progress Telerik

[kako]

OK.

Tsvetina, I am sincerely grateful for your help!