{"id":942,"date":"2019-10-22T15:41:27","date_gmt":"2019-10-22T14:41:27","guid":{"rendered":"https:\/\/ibex.tech\/windows-iot\/?p=942"},"modified":"2019-10-22T15:41:27","modified_gmt":"2019-10-22T14:41:27","slug":"cartesianchart-line-series","status":"publish","type":"post","link":"https:\/\/ibex.tech\/csharp\/uwp-programming-in-c\/charts-uwp-programming-in-c\/telerik-ui-for-uwp\/examples-telerik-ui-for-uwp\/cartesianchart-line-series","title":{"rendered":"CartesianChart-Line Series"},"content":{"rendered":"\n

Based on the instructions here: https:\/\/docs.telerik.com\/devtools\/universal-windows-platform\/controls\/radchart\/cartesianchart\/series\/categorical-series\/categorical-lineseries<\/a><\/p>\n\n\n\n

Simple Example<\/h4>\n\n\n\n
In the .xaml file<\/h5>\n\n\n\n

Add this to the start with the other xmlns lines:<\/p>\n\n\n\n

xmlns:telerikChart=\"using:Telerik.UI.Xaml.Controls.Chart\"<\/code><\/pre>\n\n\n\n
Add this where you want your chart:<\/p>\n\n\n\n
    <!-- CHART -->\n    <telerikChart:RadCartesianChart x:Name=\"lineSeries\" PaletteName=\"DefaultLight\">\n        <telerikChart:RadCartesianChart.VerticalAxis>\n            <telerikChart:LinearAxis\/>\n        <\/telerikChart:RadCartesianChart.VerticalAxis>\n        <telerikChart:RadCartesianChart.HorizontalAxis>\n            <telerikChart:CategoricalAxis\/>\n        <\/telerikChart:RadCartesianChart.HorizontalAxis>\n\n        <telerikChart:LineSeries ItemsSource=\"{Binding}\">\n            <telerikChart:LineSeries.CategoryBinding>\n                <telerikChart:PropertyNameDataPointBinding PropertyName=\"Category\"\/>\n            <\/telerikChart:LineSeries.CategoryBinding>\n            <telerikChart:LineSeries.ValueBinding>\n                <telerikChart:PropertyNameDataPointBinding PropertyName=\"Value\"\/>\n            <\/telerikChart:LineSeries.ValueBinding>\n        <\/telerikChart:LineSeries>\n    <\/telerikChart:RadCartesianChart><\/code><\/pre>\n\n\n\n
In the .cs file<\/h5>\n\n\n\n
using Telerik.UI.Xaml.Controls.Chart;<\/code><\/pre>\n\n\n\n
    public class ChartData\n    {\n        public string Category { get; set; }\n        public double Value { get; set; }\n    }<\/code><\/pre>\n\n\n\n
In your function:<\/p>\n\n\n\n
\t\/\/----- SET CHART DATA -----\n\tList<ChartData> data = new List<ChartData>();\n\tdata.Add(new ChartData() { Category = \"Apples\", Value = 5 });\n\tdata.Add(new ChartData() { Category = \"Oranges\", Value = 9 });\n\tdata.Add(new ChartData() { Category = \"Pineaples\", Value = 8 });\n\n\tthis.lineSeries.DataContext = data;<\/code><\/pre>\n\n\n\n
Example With Custom Colours For Each Line<\/h4>\n\n\n\n
In the .xaml file<\/h5>\n\n\n\n
Add this to the start with the other xmlns lines: <\/p>\n\n\n\n
xmlns:telerikChart=\"using:Telerik.UI.Xaml.Controls.Chart\"<\/code><\/pre>\n\n\n\n
Add this where you want your chart: <\/p>\n\n\n\n
    <!-- THE CHART -->\n    <telerikChart:RadCartesianChart Canvas.Left=\"10\" Canvas.Top=\"510\" Width=\"780\" Height=\"410\" x:Name=\"Chart1\" >\n        <telerikChart:RadCartesianChart.HorizontalAxis>\n            <telerikChart:CategoricalAxis \/>\n        <\/telerikChart:RadCartesianChart.HorizontalAxis>\n        <telerikChart:RadCartesianChart.VerticalAxis>\n            <telerikChart:LinearAxis \/>\n        <\/telerikChart:RadCartesianChart.VerticalAxis>\n\n        <telerikChart:RadCartesianChart.SeriesProvider>\n            <telerikChart:ChartSeriesProvider Source=\"{Binding}\" >\n                <telerikChart:ChartSeriesProvider.SeriesDescriptors>\n\n                    <!-- Chart Line 0 -->\n                    <telerikChart:CategoricalSeriesDescriptor CategoryPath=\"ValueX\"  \n                                                ValuePath=\"ValueY\"  \n                                                ItemsSourcePath=\"Items\" \n                                                CollectionIndex=\"0\">\n                                \n                        <telerikChart:CategoricalSeriesDescriptor.Style >\n                            <Style TargetType=\"telerikChart:LineSeries\" >\n                                <Setter Property=\"StrokeThickness\" Value=\"2\" \/>\n                                <Setter Property=\"Stroke\" Value=\"#F48267\" \/>\n                            <\/Style>\n                        <\/telerikChart:CategoricalSeriesDescriptor.Style>\n                    <\/telerikChart:CategoricalSeriesDescriptor>\n\n                    <!-- Chart Line 1 -->\n                    <telerikChart:CategoricalSeriesDescriptor CategoryPath=\"ValueX\"  \n                                                ValuePath=\"ValueY\"  \n                                                ItemsSourcePath=\"Items\" \n                                                CollectionIndex=\"1\">\n\n                        <telerikChart:CategoricalSeriesDescriptor.Style >\n                            <Style TargetType=\"telerikChart:LineSeries\" >\n                                <Setter Property=\"StrokeThickness\" Value=\"2\" \/>\n                                <Setter Property=\"Stroke\" Value=\"#18E600\" \/>\n                            <\/Style>\n                        <\/telerikChart:CategoricalSeriesDescriptor.Style>\n                    <\/telerikChart:CategoricalSeriesDescriptor>\n\n                    <!-- Chart Line 2 -->\n                    <telerikChart:CategoricalSeriesDescriptor CategoryPath=\"ValueX\"  \n                                                ValuePath=\"ValueY\"  \n                                                ItemsSourcePath=\"Items\" \n                                                CollectionIndex=\"2\">\n\n                        <telerikChart:CategoricalSeriesDescriptor.Style >\n                            <Style TargetType=\"telerikChart:LineSeries\" >\n                                <Setter Property=\"StrokeThickness\" Value=\"2\" \/>\n                                <Setter Property=\"Stroke\" Value=\"#64F4FF\" \/>\n                            <\/Style>\n                        <\/telerikChart:CategoricalSeriesDescriptor.Style>\n                    <\/telerikChart:CategoricalSeriesDescriptor>\n\n                    <!-- Chart Line 3 -->\n                    <telerikChart:CategoricalSeriesDescriptor CategoryPath=\"ValueX\"  \n                                                ValuePath=\"ValueY\"  \n                                                ItemsSourcePath=\"Items\" \n                                                CollectionIndex=\"3\">\n\n                        <telerikChart:CategoricalSeriesDescriptor.Style >\n                            <Style TargetType=\"telerikChart:LineSeries\" >\n                                <Setter Property=\"StrokeThickness\" Value=\"2\" \/>\n                                <Setter Property=\"Stroke\" Value=\"#F4FF67\" \/>\n                            <\/Style>\n                        <\/telerikChart:CategoricalSeriesDescriptor.Style>\n                    <\/telerikChart:CategoricalSeriesDescriptor>\n\n                    <!-- Chart Line 4 -->\n                    <telerikChart:CategoricalSeriesDescriptor CategoryPath=\"ValueX\"  \n                                                ValuePath=\"ValueY\"  \n                                                ItemsSourcePath=\"Items\" \n                                                CollectionIndex=\"4\">\n\n                        <telerikChart:CategoricalSeriesDescriptor.Style >\n                            <Style TargetType=\"telerikChart:LineSeries\" >\n                                <Setter Property=\"StrokeThickness\" Value=\"2\" \/>\n                                <Setter Property=\"Stroke\" Value=\"#DF00F6\" \/>\n                            <\/Style>\n                        <\/telerikChart:CategoricalSeriesDescriptor.Style>\n                    <\/telerikChart:CategoricalSeriesDescriptor>\n\n                    <!-- Chart Line 5 -->\n                    <telerikChart:CategoricalSeriesDescriptor CategoryPath=\"ValueX\"  \n                                                ValuePath=\"ValueY\"  \n                                                ItemsSourcePath=\"Items\" \n                                                CollectionIndex=\"5\">\n\n                        <telerikChart:CategoricalSeriesDescriptor.Style >\n                            <Style TargetType=\"telerikChart:LineSeries\" >\n                                <Setter Property=\"StrokeThickness\" Value=\"2\" \/>\n                                <Setter Property=\"Stroke\" Value=\"#F48267\" \/>\n                            <\/Style>\n                        <\/telerikChart:CategoricalSeriesDescriptor.Style>\n                    <\/telerikChart:CategoricalSeriesDescriptor>\n\n                    <!-- Chart Line 6 -->\n                    <telerikChart:CategoricalSeriesDescriptor CategoryPath=\"ValueX\"  \n                                                ValuePath=\"ValueY\"  \n                                                ItemsSourcePath=\"Items\" \n                                                CollectionIndex=\"6\">\n\n                        <telerikChart:CategoricalSeriesDescriptor.Style >\n                            <Style TargetType=\"telerikChart:LineSeries\" >\n                                <Setter Property=\"StrokeThickness\" Value=\"2\" \/>\n                                <Setter Property=\"Stroke\" Value=\"#5E007A\" \/>\n                            <\/Style>\n                        <\/telerikChart:CategoricalSeriesDescriptor.Style>\n                    <\/telerikChart:CategoricalSeriesDescriptor>\n\n                    <!-- Chart Line 7 -->\n                    <telerikChart:CategoricalSeriesDescriptor CategoryPath=\"ValueX\"  \n                                                ValuePath=\"ValueY\"  \n                                                ItemsSourcePath=\"Items\" \n                                                CollectionIndex=\"7\">\n\n                        <telerikChart:CategoricalSeriesDescriptor.Style >\n                            <Style TargetType=\"telerikChart:LineSeries\" >\n                                <Setter Property=\"StrokeThickness\" Value=\"2\" \/>\n                                <Setter Property=\"Stroke\" Value=\"#1BACFF\" \/>\n                            <\/Style>\n                        <\/telerikChart:CategoricalSeriesDescriptor.Style>\n                    <\/telerikChart:CategoricalSeriesDescriptor>\n\n                            \n                <\/telerikChart:ChartSeriesProvider.SeriesDescriptors>\n            <\/telerikChart:ChartSeriesProvider>\n        <\/telerikChart:RadCartesianChart.SeriesProvider>\n    <\/telerikChart:RadCartesianChart><\/code><\/pre>\n\n\n\n
Setting Properties<\/h4>\n\n\n\n
Setting Axis Names<\/h5>\n\n\n\n
\tthis.Chart1.VerticalAxis.Title = \"My Y Axis\";\n\tthis.Chart1.HorizontalAxis.Title = \"Hour\";<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
Based on the instructions here: https:\/\/docs.telerik.com\/devtools\/universal-windows-platform\/controls\/radchart\/cartesianchart\/series\/categorical-series\/categorical-lineseries Simple Example In the .xaml file Add this to the start with the other xmlns lines: Add this where you want your chart: In the .cs file In your function: Example With Custom Colours For Each Line In the .xaml file Add this to the start with the other […]<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[112],"tags":[],"class_list":["post-942","post","type-post","status-publish","format-standard","hentry","category-examples-telerik-ui-for-uwp"],"_links":{"self":[{"href":"https:\/\/ibex.tech\/csharp\/wp-json\/wp\/v2\/posts\/942","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ibex.tech\/csharp\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ibex.tech\/csharp\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ibex.tech\/csharp\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/ibex.tech\/csharp\/wp-json\/wp\/v2\/comments?post=942"}],"version-history":[{"count":0,"href":"https:\/\/ibex.tech\/csharp\/wp-json\/wp\/v2\/posts\/942\/revisions"}],"wp:attachment":[{"href":"https:\/\/ibex.tech\/csharp\/wp-json\/wp\/v2\/media?parent=942"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ibex.tech\/csharp\/wp-json\/wp\/v2\/categories?post=942"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ibex.tech\/csharp\/wp-json\/wp\/v2\/tags?post=942"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}