Ajax contorl toolkit LineChart Demonstration

The LineChart control enables you to render a line chart from one or more series of values. This control is compatible with any browser which supports SVG including Internet Explorer 9 and above.

This control can display two types of LineCharts: Basic and Stacked.

The control above is initialized with this code. The italic properties are optional:

<ajaxToolkit:LineChart ID="LineChart1" runat="server" 
ChartWidth="450" ChartHeight="300" ChartType="Basic" 
ChartTitle="United States versus European Widget Production" 
CategoriesAxis="2007,2008,2009,2010,2011,2012" 
ChartTitleColor="#0E426C" CategoryAxisLineColor="#D08AD9" 
ValueAxisLineColor="#D08AD9" BaseLineColor="#A156AB">
<Series>
    <ajaxToolkit:LineChartSeries Name="United States" 
    LineColor="#6C1E83" Data="110, 189, 255, 95, 107, 140" />
    <ajaxToolkit:LineChartSeries Name="Europe"  
    LineColor="#D08AD9" Data="49, 77, 95, 68, 70, 79" />
</Series>
</ajaxToolkit:LineChart>
    

• ChartHeight - This property enables you to customize the height of the chart.
• ChartWidth - This property enables you to customize the width of the chart.
• ChartTitle - This property enables you to set the title of the chart.
• CategoryAxis - This is a required property. You need to provide a set of values for the category axis to create a line chart.
• ChartType - This property enables you to render two types of line charts 1. Basic 2. Stacked.
• Theme - This property enables you to control the appearance of the line chart with a Cascading Style Sheet file.
• ValueAxisLines - This property enables you to set the interval size for the value axis line.
• ChartTitleColor - This property enables you to set the font color of the chart title.
• CategoryAxisLineColor - This property enables you to set the color of the category axis lines.
• ValueAxisLineColor - This property enables you to set the the color of the value axis lines.
• BaseLineColor - This property enables you to set the color of the base lines of the chart.
• TooltipBackgroundColor - This property enables you to set the background color of the tooltip box.
• TooltipFontColor - This property enables you to set the font color of the tooltip box.
• TooltipBorderColor - This property enables you to set the border color of the tooltip box.
• AreaDataLabel - This property enables you to set the text/label that will be shown in the tooltip and describe about area data value.

• Name - This property is required.
• Data - This property is required and provides data for a particular series.
• LineColor - This property enables you to set the color of line for a particular series.