This is a migrated thread and some comments may be shown as answers.

Plot scatter chart where the data should be plotted time(example:12:45:12) vs weekday(Monday).

1 Answer 65 Views
This is a migrated thread and some comments may be shown as answers.
Top achievements
Rank 1
Sampathkumar asked on 31 May 2018, 10:23 AM

I am working on the scatter chart where the data should be plotted time(example:12:45:12) vs weekday(Monday).Where X-axis is Weekdays from Monday to Friday and Time is y-axis 9:00 am to 4:00 pm with Interval of 1 hour. I did not found any examples on this unable to achieve this.
Below is the sample code Kindly help me in this regard.

Thanks & Regards,


<div class="roundbox" style="width:450px; height:350px; border: solid 5px steelblue; float:right; margin-top:10px; margin-bottom:20px">

          .Title("Call Timings")

            .DataSource(dataSource => dataSource.Read(
                    read => read.Action("GetCallDataCompletionTime", "Home"))
          .Legend(legend => legend
          .SeriesDefaults(seriesDefaults => seriesDefaults
              .Scatter().Labels(labels => labels

          .Series(series =>
              series.Scatter(m => m.WeekDay, m => m.TimeofDay);
              //series: [{ type: "scatterLine", name: "3.1C", data: [[10, 70], [13, 90], [25, 100]], dashType: "dot" }]

          .CategoryAxis(axis => axis
          .Categories("Monday", "Tuesday", "Wednesday", "Thrusday", "Friday")
          .MajorGridLines(lines => lines.Visible(false))
           .Categories(c => c.WeekDay)
         .ValueAxis(axis => axis
                .Labels(labels => labels.Format("{0:N0}:00"))
            .Line(line => line.Visible(true))

            .ChartArea(chartArea =>



1 Answer, 1 is accepted

Sort by
Telerik team
answered on 01 Jun 2018, 01:25 PM
Hi Sampath,

I am copying the relevant part of my reply from the support thread that you have opened in case someone else needs to implement such a scenario.

The Scatter series can work only with numeric values and values of type Date. It is not possible to have string values in the xAxis or yAxis of a Chart. When one of your values is of type string, you can use regular categorical series (Line, Bar, Column, etc.). 
This being said, here is what I can suggest:

1) If your data can be displayed in a categorical Chart, meaning that there is a single data value per week day, you can switch to using Line series and hide the lines, so only the circle markers are visible (similar to scatter series).
2) If there could be many data items per week day, you can convert the Weekday and Time values to numbers. Weekday can be represented by a number from 1 to 7 and Time can be returned in milliseconds/seconds. Using label templates in the axes, you will be able to format these numbers into user-friendly hours and days. This approach might require conversion of your data in order to get the values in the required format.

For further assistance, you can post your questions and additional information about the requirement in the support thread.

Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Asked by
Top achievements
Rank 1
Answers by
Telerik team
Share this question