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

Multiple Line Series

3 Answers 105 Views
Chart (HTML5)
This is a migrated thread and some comments may be shown as answers.
Michael
Top achievements
Rank 1
Michael asked on 14 Oct 2013, 04:12 PM
Hi Guys,

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



string
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");
 
        try
        {
            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"];
 
                //lineSeries.SeriesItems.Add(unitsSold);
 
                CategorySeriesItem seriesItem1 = new CategorySeriesItem();
 
                seriesItem1.Y = unitsSold;
 
                lineSeries.SeriesItems.Add(seriesItem1);
 
                htmlChart.PlotArea.Series.Add(lineSeries);
 
            }
 
 
 
            HtmlChartHolder.Controls.Add(htmlChart);
 
            //LineChart.DataSource = trendAnalysisbyDate(1);
            //LineChart.DataBind();
        }
        finally
        {
            db.Close();
        }



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!



3 Answers, 1 is accepted

Sort by
0
Danail Vasilev
Telerik team
answered on 16 Oct 2013, 11:37 AM
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..


Regards,
Danail Vasilev
Telerik
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.
0
NIthalle
Top achievements
Rank 1
answered on 25 Aug 2014, 10:26 AM
Hi,

I am also Programmatically creating an Line series as described in "http://demos.telerik.com/aspnet-ajax/htmlchart/examples/serversideapi/programmaticcreation/defaultcs.aspx?#qsf-demo-source"  

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? 

Thanks.

0
Shinu
Top achievements
Rank 1
answered on 25 Aug 2014, 12:25 PM
Hi,

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.

Thanks,
Shinu.
Tags
Chart (HTML5)
Asked by
Michael
Top achievements
Rank 1
Answers by
Danail Vasilev
Telerik team
NIthalle
Top achievements
Rank 1
Shinu
Top achievements
Rank 1
Share this question
or