Multiple Line Series

4 posts, 0 answers
  1. Michael
    Michael avatar
    3 posts
    Member since:
    Apr 2012

    Posted 14 Oct 2013 Link to this post

    Hi Guys,

    I'm trying to create a chart with multiple line series' below is my code:

    sql = string.Format(@"SELECT     dbo.ProductSales.OrderDate, dbo.ProductSales.ProductID, dbo.ProductSales.UnitsSold, dbo.Product.Name
                                        FROM         dbo.ProductSales INNER JOIN
                          dbo.Product ON dbo.ProductSales.ProductID = dbo.Product.ProductID
                                        WHERE     (DistributionCentreID = 3) AND (dbo.Product.ProductID = 10)
                                        GROUP BY dbo.ProductSales.OrderDate, dbo.ProductSales.ProductID, dbo.ProductSales.UnitsSold, dbo.Product.Name
                                        HAVING      (OrderDate >= CONVERT(DATETIME, '01/10/2013', 103)) AND (OrderDate <= CONVERT(DATETIME, '10/10/2013', 103))");
            SqlUtils db = new SqlUtils("Charon");
                DataTable dt = db.FillTable(sql);
                RadHtmlChart htmlChart = new RadHtmlChart();
                htmlChart.ID = "htmlChart";
                htmlChart.Width = Unit.Pixel(680);
                htmlChart.Height = Unit.Pixel(400);
                htmlChart.Legend.Appearance.Position = ChartLegendPosition.Bottom;
                htmlChart.PlotArea.XAxis.TitleAppearance.Text = "Date";
                htmlChart.PlotArea.YAxis.TitleAppearance.Text = "Units Sold";
                htmlChart.PlotArea.XAxis.MajorTickType = TickType.Outside;
                htmlChart.PlotArea.XAxis.MinorTickType = TickType.Outside;
                //htmlChart.PlotArea.XAxis.DataLabelsField = row["OrderDate"].ToString();
                foreach (DataRow row in dt.Rows)
                    var lineSeries = new LineSeries { Name = row["Name"].ToString() };
                    lineSeries.LabelsAppearance.Visible = true;
                    lineSeries.TooltipsAppearance.Color = System.Drawing.Color.White;
                    lineSeries.TooltipsAppearance.DataFormatString = string.Format("{0} x {1}", row["UnitsSold"], row["Name"]);
                    lineSeries.DataFieldY = "UnitsSold";
                    lineSeries.DataFieldX = "OrderDate";
                    //SeriesItem seriesItem = new SeriesItem();
                    var unitsSold = (int)row["UnitsSold"];
                    CategorySeriesItem seriesItem1 = new CategorySeriesItem();
                    seriesItem1.Y = unitsSold;
                //LineChart.DataSource = trendAnalysisbyDate(1);

    Example Data & how the chart currently looks is attached...

    I've just hidden the Name column.. just a text string..

    I want the chart to show Units Sold on the left (y axis) and the order date on the bottom (x axis) and the product name to the be label/ledgend..

    Any help would be great. Thanks!

  2. Danail Vasilev
    Danail Vasilev avatar
    1502 posts

    Posted 16 Oct 2013 Link to this post

    Hi Michael,

    You can display data in the RadHtmlChart in several ways:
    • Declarative Creation - Setting items in the markup (statically) using the SeriesItems collection of the desired chart series.
    • DataBinding - the 'DataField' properties (e.g. DataFieldY, DataFieldX, etc.) of each series indicates the column from the datasource that is used to load data for the SeriesItems.
    • Programmatic Creation - SeriesItems can be created on the server like any other objects, then added to the SeriesItems collection of the desired series.

    More information on the matter is available in HtmlChart - Static Items online demo.

    From the provided code it seems that your are combining DataBinding and Programmatic Creation approach.

    What I can suggest is that you choose one of these approaches. Such example can be found in HtmlChart - DataSet and HtmlChart - Programmatic Chart Creation online demos.

    Note also that DataFieldX property is available only for a databound numeric series and not for LineSeries. The configuration of the RadHtmlChart depends on the type of the chart. There are charts which use category XAxis (i.e. Area, Bar, Line, Column, Candlestick) and charts which use numeric XAxis (i.e. Scatter, ScatterLine, Bubble). You can go through Chart Types section of the online demos in order to examine the different chart types..

    Danail Vasilev
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  3. s
    s avatar
    2 posts
    Member since:
    Aug 2014

    Posted 25 Aug 2014 Link to this post


    I am also Programmatically creating an Line series as described in ""  

    i am using following way to add series item in the series and then add series in chart.

    foreach (DataRow row in GetChartData().Rows)            {                decimal? currentVolts = (decimal?)row["Volts"];                if (!(row["mATheoretical"] is DBNull))                {                    decimal? currentMATheoretical = (decimal?)row["mATheoretical"];                         ScatterSeriesItem theoreticalItem = newScatterSeriesItem(currentVolts, currentMATheoretical);                    theoreticalData.SeriesItems.Add(theoreticalItem);                }                decimal? currentMAExperimental = (decimal?)row["mAExperimental"];                    ScatterSeriesItem experimentalItem = new ScatterSeriesItem(currentVolts, currentMAExperimental);                experimentalData.SeriesItems.Add(experimentalItem);            }            scatterChart.PlotArea.Series.Add(theoreticalData);            scatterChart.PlotArea.Series.Add(experimentalData);             HtmlChartHolder.Controls.Add(scatterChart);        }

    As per our requirement, I have to adopt the upper stated method (i.e. creating seriesitem and series programmatically and then add them in to chart.)
    Now i want to show tooltip apart of x-axis and y-axis that we provided in series item. how can i achieve that? 


  4. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 25 Aug 2014 in reply to s Link to this post


    I guess you want to show the ToolTip for the x-axis and y-axis item in the RadHtmlChart. By default RadHtmlChart will show ToolTip based on the x axis and y axis value. In the Provided demo it has mentioned in that Page_Init event. Please elaborate your requirement if it doesn't help.

Back to Top