Chart in Sales Dashboard

Thread is closed for posting
2 posts, 0 answers
  1. Richard
    Richard avatar
    1 posts
    Member since:
    Sep 2014

    Posted 15 Oct 2014 Link to this post

    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>

     

  2. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1493 posts

    Posted 17 Oct 2014 Link to this post

    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.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top