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

Multiple Line Series

3 Answers 240 Views

Chart (HTML5)

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

Michael asked on 14 Oct 2013, 04:12 PM

datalooks.PNG

chartlooks.PNG

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

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.

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.

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

Multiple Line Series

3 Answers, 1 is accepted