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

[Sampathkumar]

Hi, 
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,
Sampath 

 

<div class="roundbox" style="width:450px; height:350px; border: solid 5px steelblue; float:right; margin-top:10px; margin-bottom:20px">
            @(Html.Kendo().Chart<AdvantEdgePortal.Web.ViewModels.DayTimeStamp>()

          .Name("chartcallTimings")
          .Title("Call Timings")

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

          .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
                .Numeric()
                .MajorUnit(1)
                .Min(9)
                .Max(16)
                .Labels(labels => labels.Format("{0:N0}:00"))
            .Line(line => line.Visible(true))
            )

            .ChartArea(chartArea =>
            {
                chartArea.Height(340);
                chartArea.Width(440);
                chartArea.Margin(5);
            })

            )

        </div>

[Tsvetina]

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.

Regards,
Tsvetina
Progress Telerik