Progress® Telerik® UI for Blazor Feedback Portal
Back to Feed
Request a Feature Report a Bug
Unplanned
Last Updated: 11 Nov 2019 13:28 by ADMIN
Bill Wolff
Created on: 08 Nov 2019 17:35
Category: Charts
Type: Feature Request
9
scatter chart with date axis
Trying to upgrade an Angular app that uses WijMo charts. It graphs server and web performance data. I can easily make a line or scatter chart but your Blazor component is not very flexible using DateTime on the x axis. I got it to work on a Line but not a ScatterLine. Also, when using the Line with AxisType = Date, I can't get the  BaseUnitStep working. Is there an enumerator for that? It tries to write the x label for every hour over 10 days. 
4 comments
ADMIN
Marin Bratanov
Posted on: 11 Nov 2019 13:28

You're absolutely right, Bill, it should have been a ScatterLine series, I don't know how I messed up the copy-paste. I fixed it.

 

Regards,
Marin Bratanov
Progress Telerik

 UI for Blazor
Bill Wolff
Posted on: 11 Nov 2019 12:36
Changing the ChartSeriesType to ScatterLine works as expected and I can now control the x axis labels.
Bill Wolff
Posted on: 11 Nov 2019 12:30
I tried your sample below and it generates an empty chart. Is it legal to supply XFiled and YField for a Line? I thought they only applied to ScatterLine?
ADMIN
Marin Bratanov
Posted on: 11 Nov 2019 11:02

Hi Bill,

Generally, the x-axis Date feature is designed for categorical charts, such as the line chart. This is why the example we have is made with it. If there is an issue with the base unit step issue with it, please open a new ticket and show me an example.

On dates on the x-axis of a scatter chart - that would be possible because dates are actually numbers, but you may lose things like aggregation - each data point would be independent; and there would be no auto-fitting features.

Also, it has not been implemented yet for the scatter charts (numerical x-axis). It would be enabled in a fashion similar to the categorical date axis - by setting the Type and BaseUnit properties, and the new MajorUnit property would let you control the step of the chart. I made this thread public so you can click the Follow button and get notifications for status updates on this feature: https://feedback.telerik.com/blazor/1441432-scatter-chart-with-date-axis.

In fact, even though it is not implemented yet, you could do it by hardcoding lowercase strings like in the following examle (but that would change once we implement it, the Type and BaseUnit will become enumerations):

 

<TelerikChart>

    <ChartSeriesItems>
        <ChartSeries Type="ChartSeriesType.ScatterLine"
                     Data="@Series1Data"
                     Name="0.8C"
                     XField="@nameof(ModelData.X)"
                     YField="@nameof(ModelData.Y)">
        </ChartSeries>
    </ChartSeriesItems>

    <ChartXAxes>
        <ChartXAxis Type="date" BaseUnit="days" MajorUnit="3">
            <ChartXAxisTitle Text="Time"></ChartXAxisTitle>
            <ChartXAxisLabels Format="{0:dd MMM yyyy}"></ChartXAxisLabels>
        </ChartXAxis>
    </ChartXAxes>


</TelerikChart>

@code {
    public class ModelData
    {
        public DateTime X { get; set; }
        public int Y { get; set; }
    }

    public List<ModelData> Series1Data = new List<ModelData>()
    {
        new ModelData() { X = DateTime.Now.AddDays(1), Y = 10 },
        new ModelData() { X = DateTime.Now.AddDays(2), Y = 20 },
        new ModelData() { X = DateTime.Now.AddDays(3), Y = 25 },
        new ModelData() { X = DateTime.Now.AddDays(4), Y = 40 },
        new ModelData() { X = DateTime.Now.AddDays(5), Y = 50 },
        new ModelData() { X = DateTime.Now.AddDays(6), Y = 60 },
        new ModelData() { X = DateTime.Now.AddDays(7), Y = 70 },
        new ModelData() { X = DateTime.Now.AddDays(8), Y = 80 },
        new ModelData() { X = DateTime.Now.AddDays(9), Y = 100 }
    };
}

 

 

Regards,
Marin Bratanov
Progress Telerik

 UI for Blazor
Create an account Log In
View
Type
Status
Category