Telerik Line Chart - Price development graph

2 Answers 16 Views
Charts
Martin Herløv
Top achievements
Rank 2
Bronze
Iron
Iron
Martin Herløv asked on 02 Feb 2022, 01:04 PM | edited on 02 Feb 2022, 01:05 PM

Hi how can I make a graph like this one?

What I have now

<TelerikChart>
            <ChartTitle Text="Prices"></ChartTitle>
            <ChartTooltip Visible="true"></ChartTooltip>
            <ChartLegend Position="ChartLegendPosition.Bottom"/>
            <ChartSeriesItems>
                <ChartSeries Type="ChartSeriesType.Line"
                             Name="Prices"
                             Data="@Details.PriceGraphs"
                             DashType="@DashType.Solid"
                             XField="@nameof(InstrumentPriceGraph.UpdateDate)"
                             Field="@nameof(InstrumentPriceGraph.Price)">
                </ChartSeries>
            </ChartSeriesItems>
        </TelerikChart>

Model

public class InstrumentPriceGraph
{
    public string CiInstrument { get; set; }
    public DateTime UpdateDate { get; set; }
    public decimal Price { get; set; }
}

2 Answers, 1 is accepted

Sort by
0
Martin Herløv
Top achievements
Rank 2
Bronze
Iron
Iron
answered on 03 Feb 2022, 01:33 PM | edited on 03 Feb 2022, 01:37 PM

I now have this.

Only need to fix the date formatting and setting the min value on the Y axis.

If I use the format. Then the dates will be replaced with the format string. So "1/12" will become {0:yy MM dddd}.

In this example I would like to set the Y min value to 105.


 <TelerikChart Width="100%" Height="100%" RenderAs="RenderingMode.Canvas">
            <ChartTitle Text="Prices"/>
            <ChartTooltip Visible="true"/>
            <ChartLegend Position="ChartLegendPosition.Bottom"/>
            
            <ChartSeriesItems>
                <ChartSeries Type="ChartSeriesType.Line"
                             Name=""
                             Data="@Details.PriceGraphs"
                             DashType="@DashType.Solid"
                             CategoryField="@nameof(InstrumentPriceGraph.UpdateDate)"
                             Field="@nameof(InstrumentPriceGraph.Price)">
                </ChartSeries>
            </ChartSeriesItems>
            
            <ChartCategoryAxes>
                <ChartCategoryAxis Type="ChartCategoryAxisType.Date" BaseUnit="ChartCategoryAxisBaseUnit.Days">
                    <ChartCategoryAxisLabels Step="2" Format="{0:dd-MM-YY}">
                        <ChartCategoryAxisLabelsRotation Angle="-45"/>
                    </ChartCategoryAxisLabels>
                </ChartCategoryAxis>
            </ChartCategoryAxes>

        </TelerikChart>

This is how it looks if I use the format option

0
Hristian Stefanov
Telerik team
answered on 07 Feb 2022, 09:13 AM

Hi Martin,

You are on the right path. It is possible to have a date type of axis. We have the following article in our documentation that shows how to configure date type axis.

Date Axis article

Please follow the steps from there to cover your app requirements. You can take a look at our date axis demo as well.

Additionally, we have an open bug report regarding the Min/Max properties of the Chart.

Chart not displayed if I set Min and Max properties of a Date ChartCategoryAxis

You can also check it out to see how to avoid it. If there is still a problem, I would be glad to help.

Regards,
Hristian Stefanov
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
Charts
Asked by
Martin Herløv
Top achievements
Rank 2
Bronze
Iron
Iron
Answers by
Martin Herløv
Top achievements
Rank 2
Bronze
Iron
Iron
Hristian Stefanov
Telerik team
Share this question
or