The data for the X-axis are DateTime values. We create an array with the DateTime values that we’ll use and add it to the XData<\/a> property of our chart. Before that we have to delete the predefined array that is added when the control is dropped at the form:<\/p>\n Next, we must make some adjustments in the settings for the X-axis to tell the control that DateTime data is used. We set the DataFormat<\/a> property to DateTime and we specify the time range for the axis. This is how we do this:<\/p>\n The data for the Y-axis are numbers. We can set them through the property grid or set them in code.<\/p>\n The X-axis<\/strong><\/p>\n First, we must change the LabelType<\/a> property of XAxisSettings<\/a> from “ChartData”, which is the default to “AutoScale”. This will make the axis show the time range we’ve set in code above. Then, we change how the DateTime values will be formatted. The Default DateTimeFormat<\/a> shows the full time and date and is not suitable. We change it to “LongDate”, which does not draw any time.<\/p>\n We type “Week” as TitleLabel<\/a> for the axis and set the DrawZero<\/a> property to true to show the first label, which is otherwise omitted.<\/p>\n Upon preview we notice that the labels are too close to the axis, that’s why we use LabelOffset<\/a> and TitleLabelOffset<\/a> to add some space before them. Finally, we change the color of the labels, to make them dark gray rather than black.<\/p>\n The Y-axis<\/strong><\/p>\n Customizing the Y-axis is rather simple. We change the interval with AxisDelta<\/a> to 5 and increase the MaxValue<\/a> to 100. We don’t need decimal fractions for the labels, that’s why we change the NumberFormat<\/a>. We add a TitleLabel<\/a> and change its orientation with TitleLabelOrientation<\/a>. Finally we use LabelBrush<\/a> and TitleLabelBrush<\/a> to change the colors of the labels – we use the same brushes as for the X-axis.<\/p>\n The Grid<\/strong><\/p>\n Initially the chart shows no grid – but we want to show a grid. That’s why we change GridType<\/a> to “Crossed” and set a GridPen<\/a>. The dark gray background of the plot area together with its outlining are set with PlotAreaOutlinePen<\/a> and PlotAreaBrush<\/a>.<\/p>\n This is the code that was generated by the designer because we set the properties through the property grid. If we set them with code, it will be:<\/p>\n We want scatters at data points and we want to show labels above those scatters. The LabelType<\/a> property lets us set the type to be both line and scatters:<\/p>\n This is the default type, so you don’t need to set it if you have not changed it before. We use ShapeBrushes<\/a>, ShapePens<\/a> and ShapeSizes<\/a> to set the brushes and size of the scatters. We can do this in the property grid or in code. Finally, we want to show labels above scatters. We use LabelType<\/a> and LabelFormat<\/a> to set what kind of labels are drawn and since our labels are numbers – how they are formatted.<\/p>\n In code you write:<\/p>\n LineChart1.LabelBorder = MindFusion.Charting.Border.RoundedRect; Here is the final chart:<\/p>\n Line chart with DateTime values in ASP.NET<\/p><\/div>\n You can download the sample from this link:<\/p>\n Download Line Chart for ASP.NET Sample<\/a><\/p>\n The trial version of the component is available from here:<\/p>\n MindFusion.Charting for ASP.NET Trial Version Download<\/a><\/p>\n","protected":false},"excerpt":{"rendered":" In this post we demonstrate how to use MindFusion.Charting for ASP.NET component to create a line chart that shows the number of unique visitors to a store\/website in a period of 6 weeks. Data The data for the X-axis are … Continue reading DateTime dt1 = new DateTime(2013, 6, 14);\nDateTime dt2 = new DateTime(2013, 6, 7);\nDateTime dt3 = new DateTime(2013, 5, 31);\nDateTime dt4 = new DateTime(2013, 5, 24);\nDateTime dt5 = new DateTime(2013, 5, 17);\nDateTime dt6 = new DateTime(2013, 5, 10);\n\nArrayList data = new ArrayList() { dt1, dt2, dt3, dt4, dt5, dt6 };\nLineChart1.XData.Clear();\nLineChart1.XData.Add(data);<\/pre>\nLineChart1.XAxisSettings.DataFormat = MindFusion.Charting.DataFormat.DateTime;\n\nLineChart1.XAxisSettings.StartDateTime = new DateTime(2013, 5, 3);\nLineChart1.XAxisSettings.EndDateTime = new DateTime(2013, 6, 20);\n\/\/set the interval to one week - 7 days\nLineChart1.XAxisSettings.TimeSpan = new TimeSpan(7, 0, 0, 0);<\/pre>\n
LineChart1.YData.Clear();\nArrayList data1 = new ArrayList() { 56, 13, 45, 17, 82, 22 };\nLineChart1.YData.Add(data1);<\/pre>\nXAxisSettings-DateTimeFormat=\"LongDate\" \nXAxisSettings-DrawTicksUniformly=\"False\" XAxisSettings-DrawZero=\"True\" \nXAxisSettings-LabelBrush=\"s:#FF696969\" XAxisSettings-LabelOffset=\"10\" \nXAxisSettings-LabelType=\"AutoScale\" XAxisSettings-TitleLabel=\"Week\" \nXAxisSettings-TitleLabelBrush=\"s:#FF696969\" XAxisSettings-TitleLabelOffset=\"10\"<\/pre>\n
YAxisSettings-AxisDelta=\"5\" \nYAxisSettings-LabelBrush=\"s:#FF696969\" \nYAxisSettings-MaxValue=\"100\" YAxisSettings-NumberFormat=\"Fixed_point_0Digits\" \nYAxisSettings-TitleLabel=\"Unique Visitors\" \nYAxisSettings-TitleLabelBrush=\"s:#FF696969\" \nYAxisSettings-TitleLabelOrientation=\"BottomToTop\"<\/pre>\n
GridPen=\"n:0\/#FFE1E1E1\/0\/0\/0\/\/0\/0\/10\/\" GridType=\"Crossed\" PlotAreaBrush=\"s:#FFC0C0C0\" \nPlotAreaOutlinePen=\"n:0\/#FF787878\/0\/0\/0\/\/0\/0\/10\/\"<\/pre>\n
LineChart1.GridPen = new MindFusion.Drawing.Pen(Color.FromArgb(225,225,225));\nLineChart1.GridType = MindFusion.Charting.GridType.Crossed;\nLineChart1.PlotAreaBrush = new MindFusion.Drawing.SolidBrush(Color.FromArgb(192, 192, 192));\nLineChart1.PlotAreaOutlinePen = new MindFusion.Drawing.Pen(Color.FromArgb(120, 120, 120));<\/pre>\n
\nThe Line Series<\/strong><\/p>\nLineChart1.LineType = MindFusion.Charting.LineTypes.Line | MindFusion.Charting.LineTypes.Scatter;<\/pre>\n
LabelBorder=\"RoundedRect\" LabelBorderBackground=\"s:#FFFFFFE0\" LabelBorderOutline=\"n:0\/#FF787878\/0\/0\/0\/\/0\/0\/10\/\" LabelFormat=\"Fixed_point_0Digits\" LabelType=\"Data\"<\/pre>\n
\nLineChart1.LabelBorderBackground = new MindFusion.Drawing.SolidBrush(Color.FromArgb(255, 255, 224));
\nLineChart1.LabelBorderOutline = new MindFusion.Drawing.Pen(Color.FromArgb(120, 120,120));
\nLineChart1.LabelFormat = MindFusion.Charting.NumberFormat.Fixed_point_0Digits;
\nLineChart1.LabelType = MindFusion.Charting.LabelType.Data;<\/p>\n![\"Line](\"http:\/\/mindfusion.dev\/blog\/wp-content\/uploads\/2013\/06\/asp_line_chart.png\")
<\/a>