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

Chart in Sales Dashboard

1 Answer 27 Views
Chart (Obsolete)
This is a migrated thread and some comments may be shown as answers.
Richard
Top achievements
Rank 1
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

Sort by
0
Danail Vasilev
Telerik team
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.

 
Tags
Chart (Obsolete)
Asked by
Richard
Top achievements
Rank 1
Answers by
Danail Vasilev
Telerik team
Share this question
or