Scatter line chart colors

[Henrik]

Hi,

I have a scatter line chart that is supposed to show incidents that occur simultaneously. I am almost there, but have some issues I haven't been able to solve:

1) The color of the lines and markers should all be the same. As it is the color seems to be random.

2) Same goes for the tooltip, as you can see some color combinations makes for very poor visibility. I have tried to set .Color("white") on the tooltip, but it has no effect.

3) Is it possible to set the size of the chart depending on the amount of data? If there are many simultaneous incidents the chart needs to be higher.

4) I would like to have labels instead of tooltips, labels that looks like the toopltips I get when hovering over a line, but they should always be visible for all lines.Is this possible?

Best regards,

Henrik

[Tsvetina]

Hi Henrik,

The series colors appear like this because in a grouped Chart, each group is represented by a different series in the Chart and the Chart applies different colors to different series. To use one color only, set a SeriesColors value that contains a single color only:

.SeriesColors(new string[] { "red" }) // all series will be red

Once the series color is changed, this will automatically apply to tooltips, too.

As for labels, you can use such as well. Here is a sample series labels configuration:

.Series(series => {
    series.ScatterLine(model => model.Date, model => model.Close)
        .Name("#= group.value # (close)")
        .Labels(lbl=>lbl
        .Visible(true)
        .Template("#:kendo.toString(dataItem.Date, 'dd/MM')#, #:dataItem.Close#")
        .Font("12px Tahoma")
        .Background("white")
        .Border(border=>border.Color("red").Width(2))
        );
})

With regard to dynamically changing the Chart height, you can use the Chart DataBound event to check how many groups there are in the data and change the Chart element height. To check the number of groups, run:

var numOfGroups = chart.dataSource.view().length;

Regards,
Tsvetina
Progress Telerik

[Henrik]

Hi Tsvetina,

Many thanks for your reply, I think I can get most things right. But when I set the height of the chart I seem to loose all settings for the chart. See the attached picture, the upper plot is without setting the chart height in the databound event, in the lower plot the height has been changed with

       $("#HandelseKalender").kendoChart({
            chartArea: {
                height: 200
            }
        });

As you can see the x-axis max and min and the axis crossing point has been lost, the labels that I don't want are back etc. The only thing that is right in the lower plot is the chart height. Am I doing something wrong or do I have to set all configurations in the databound event?

 

Best regards,

Henrik

 

[Tsvetina]

Hi Henrik,

Calling kendoChart on an element creates a new Chart using the options specified in the options object. kendo[Widget] should be called only once per element, unless the previous instance of the widget was destroyed before that. To change options of an existing Chart, you can use the setOptions method or apply the options directly and refresh the Chart:

var chart = $("#HandelseKalnder").data("kendoChart");
chart.setOptions({ chartArea: { height: 200 } });

or

var chart = $("#HandelseKalnder").data("kendoChart");
chart.options.chartArea = { height:  200 };
chart.refresh();

Regards,
Tsvetina
Progress Telerik

[Henrik]

Hi Tsvetina,

Thanks, but I must be missing something. When should I call the setOptions method? I cannot do it in an event handler for the chart since this causes an endless loop.

Best regards,

Henrik

[Tsvetina]

Hi Henrik,

Indeed, in a scenario where you want to do a change in the DataBound event, setOptions should not be used. I was describing the two methods in general, but I had to take into account that you want to apply the height when the Chart is bound. In this case, the second approach is the one you should use:

var chart = $("#HandelseKalnder").data("kendoChart");
chart.options.chartArea = { height:  200 };

In the scenario where this is applied in the DataBound event handler, calling chart.refresh() is not needed, as the Chart is yet to be drawn.

Regards,
Tsvetina
Progress Telerik

[Henrik]

Hi again Tsvetina,

Now I got it right. Many thanks for your help and patience.

Best regards,

Henrik