This is a migrated thread and some comments may be shown as answers.

Chart in Sales Dashboard

1 Answer 81 Views

Chart (Obsolete)

This is a migrated thread and some comments may be shown as answers.

Richard asked on 15 Oct 2014, 08:26 AM

HI All, I hope someone can help me here. I am trying to work my through the sales dashboard on the website and see how it all hangs together. I have probably got my head around 80% of it, but I can not work out how the chart on the stats page is driven. There is no data source or sql statement to the database and it is not driven my a xml file. I am just starting with the Telerik product but I am a sql developer and have done asp, so this one is pushing my knowledge. but bet it is a simple fix. Link to website is

http://demos.telerik.com/aspnet-ajax/salesdashboard/

The script I think it needs to be focused on is below, but I can not see how or where. Guru needed to guide

Script in question

<telerik:RadHtmlChart ID="RadHtmlChartOrdersPercent"
runat="server"
Width="700px"


Height="600px">


<Appearance>


<FillStyle
BackgroundColor="Black"></FillStyle>


</Appearance>


<ChartTitle
Text="Representative
Sales vs. Total Sales">


</ChartTitle>


<Legend>


<Appearance
Position="Top"
/>


</Legend>


<PlotArea>


<Appearance>


</Appearance>


<YAxis>


<MajorGridLines
Visible="true"></MajorGridLines>


<MinorGridLines
Visible="false"></MinorGridLines>


<LabelsAppearance
DataFormatString="{0:C0}">


</LabelsAppearance>


    </YAxis>


<XAxis>


<MajorGridLines
Visible="false"
/>


<MinorGridLines
Visible="false"
/>


</XAxis>


<Series>


<telerik:BarSeries Name="Representative
Sales">


<Appearance>


<FillStyle
BackgroundColor="#b1c85a"></FillStyle>


</Appearance>


<LabelsAppearance
DataFormatString="{0:C0}">


               </LabelsAppearance>


<TooltipsAppearance
BackgroundColor="#b1c85a"
ClientTemplate='Date:
#=category#<br/>Rep Sales hello: #= kendo.toString(value,
"C0")#'>


</TooltipsAppearance>


</telerik:BarSeries>


<telerik:BarSeries Name="Total
Sales">


<Appearance>


<FillStyle
BackgroundColor="#93d6d8"></FillStyle>


</Appearance>


<LabelsAppearance
DataFormatString="{0:C0}">


</LabelsAppearance>


<TooltipsAppearance
BackgroundColor="#93d6d8"
ClientTemplate='Date:
#=category#<br/>Total Sales: #= kendo.toString(value,
"C0")#'>


</TooltipsAppearance>


</telerik:BarSeries>


</Series>


</PlotArea>


</telerik:RadHtmlChart>

1 Answer, 1 is accepted

answered on 17 Oct 2014, 03:09 PM

Hi Richard,

I have already replied to the support ticket that was opened by you on this regard, so that you can find my answer below:

The RadHtmlChart in the mentioned integration demo is created programmatically in the code behind and the data used for it is fetched out by a web service (i.e., SalesDashboardService.svc). See the below code snippet for details:

Statistics.ascx.cs:

protected void Page_Load(object sender, EventArgs e)

{

statsTitle.Text = "Statistics for " + Employee.FirstName + " " + Employee.LastName;

var employeesTotalOrders = this.Service.GetEmployeesTotalOrders(this.StartDate, this.EndDate);

double sum = employeesTotalOrders.Sum(i => i.Value);

foreach (var result in employeesTotalOrders)

{

SeriesItem item = new SeriesItem();

item.Exploded = result.Key == Employee.FirstName + " " + Employee.LastName;

item.YValue = (decimal)((int)((result.Value / sum) * 100));

item.Name = string.Format("Rep Name: {0}<br/>Sales amount:{1:C0}<br/>Percent sales:{2} %",

result.Key,

result.Value,

item.YValue);

this.RadHtmlChartTotalOrders.PlotArea.Series[0].Items.Add(item);

}

var totalOrdersPercenentByPreriod = this.Service.GetEmployeeTotalOrdersPercentByPeriod(this.Employee, this.StartDate, this.EndDate);

var repData = totalOrdersPercenentByPreriod["RepData"];

var totalData = totalOrdersPercenentByPreriod["TotalData"];

foreach (var repDataItem in repData)

{

this.RadHtmlChartOrdersPercent.PlotArea.XAxis.Items.Add(repDataItem.Key.ToShortDateString());

SeriesItem item = new SeriesItem();

item.Name = repDataItem.Key.ToShortDateString();

item.YValue = (decimal)repDataItem.Value;

this.RadHtmlChartOrdersPercent.PlotArea.Series[0].Items.Add(item);

item = new SeriesItem();

item.Name = repDataItem.Key.ToShortDateString();

item.YValue = (decimal)totalData[repDataItem.Key];

this.RadHtmlChartOrdersPercent.PlotArea.Series[1].Items.Add(item);

}

Regards,
Danail Vasilev
Telerik

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Chart in Sales Dashboard

1 Answer, 1 is accepted