Scatter line chart colors

7 posts, 1 answers
  1. Henrik
    Henrik avatar
    38 posts
    Member since:
    Nov 2015

    Posted 13 Nov 2018 Link to this post

    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

  2. Tsvetina
    Admin
    Tsvetina avatar
    2481 posts

    Posted 14 Nov 2018 Link to this post

    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
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  3. Henrik
    Henrik avatar
    38 posts
    Member since:
    Nov 2015

    Posted 15 Nov 2018 in reply to Tsvetina Link to this post

    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

     

  4. Tsvetina
    Admin
    Tsvetina avatar
    2481 posts

    Posted 16 Nov 2018 Link to this post

    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
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  5. Henrik
    Henrik avatar
    38 posts
    Member since:
    Nov 2015

    Posted 19 Nov 2018 in reply to Tsvetina Link to this post

    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

  6. Answer
    Tsvetina
    Admin
    Tsvetina avatar
    2481 posts

    Posted 20 Nov 2018 Link to this post

    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
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  7. Henrik
    Henrik avatar
    38 posts
    Member since:
    Nov 2015

    Posted 20 Nov 2018 in reply to Tsvetina Link to this post

    Hi again Tsvetina,

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

    Best regards,

    Henrik

Back to Top