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

rad html column chart dynamic series

5 Answers 485 Views
Chart (HTML5)
This is a migrated thread and some comments may be shown as answers.
Navneet
Top achievements
Rank 1
Navneet asked on 07 Nov 2012, 12:06 PM
any example with xaxis also dymanic Like:

5 Answers, 1 is accepted

Sort by
0
Danail Vasilev
Telerik team
answered on 08 Nov 2012, 02:55 PM
Hello Navneet,

If I understand correctly your question you are trying to programmatically declare XAxis items to the chart.
If this is the case I am attaching a simple example where I am using a dataset.

What I do is bind the dataset to the RadHtmlChart and then tell the XAxis Labels which column to get from the dataset through the DataLabelsField property:
protected void Page_Load(object sender, System.EventArgs e)
 {
     DataSet myDS = GetData();
     RadHtmlChart1.DataSource = myDS;
     RadHtmlChart1.PlotArea.XAxis.DataLabelsField = "Name";
     RadHtmlChart1.DataBind();
 }
You can also set this property in the markup of the control.

In case you are creating the entire chart programmatically you can take a look at the following examples and use them as a starting point for your implementation:
http://www.telerik.com/help/aspnet-ajax/htmlchart-use-explicit-items.html - see the second section
http://demos.telerik.com/aspnet-ajax/htmlchart/examples/serversideapi/programmaticcreation/defaultcs.aspx


Kind Regards,

All the best,
Danail Vasilev
the Telerik team
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 their blog feed now.
0
Navneet
Top achievements
Rank 1
answered on 09 Nov 2012, 04:37 AM
Hi Thanks for response, It show perfect but need to display bar color changes means i have multiple series.....
no single series..
0
Accepted
Danail Vasilev
Telerik team
answered on 09 Nov 2012, 11:51 AM
Hello Navneet,

A single series uses the same color for all its items by design. The concept is that these items have to be grouped by this color so that the reader can easily identify this. The feature of modify colors for separate items within a series is logged and you can follow it, vote and comment in this URL.

On using more than one series - you can add as much series as you want. I am giving you an example with two series.
The change in the markup could look like:
<Series>
    <telerik:ColumnSeries Name="Products" DataFieldY="Price1">
        <TooltipsAppearance DataFormatString="${0}" />
        <LabelsAppearance Visible="false" />
    </telerik:ColumnSeries>
     <telerik:ColumnSeries Name="Products" DataFieldY="Price2">
        <TooltipsAppearance DataFormatString="${0}" />
        <LabelsAppearance Visible="false" />
    </telerik:ColumnSeries>
</Series>

Where "Price1" is the data for the first ColumnSeries and "Price2" is the data for the second ColumnSeries.

In the code behind I am inserting another column "Price2" (in orange color) for the second series and its values (in yellow color).
private DataSet GetData()
{
    DataSet ds = new DataSet("Bookstore");
    DataTable dt = new DataTable("Products");
    dt.Columns.Add("Id", Type.GetType("System.Int32"));
    dt.Columns.Add("Name", Type.GetType("System.String"));
    dt.Columns.Add("Price1", Type.GetType("System.Double"));
    dt.Columns.Add("Price2", Type.GetType("System.Double"));
    dt.Rows.Add(1, "Pen", 5.45, 6.45);
    dt.Rows.Add(2, "Audio book", 9.95, 10.95);
    dt.Rows.Add(3, "Pencil", 1.99, 3.99);
    dt.Rows.Add(4, "Book", 15.95, 12.95);
    dt.Rows.Add(5, "Newspaper", 0.95, 0.33);
    dt.Rows.Add(6, "Magazine", 3.95, 2.55);
    ds.Tables.Add(dt);
    return ds;
}

Please find attached the whole example.

Greetings,
Danail Vasilev
the Telerik team
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 their blog feed now.
0
Hugo Augusto
Top achievements
Rank 2
Iron
Veteran
Iron
answered on 31 Oct 2019, 06:46 PM

How can you do this but without knowing which columns you have? In your dataset you define them on code and I can't have that. Please check my question at https://www.telerik.com/forums/multiple-column-series-per-date

Thanks!

0
Vessy
Telerik team
answered on 01 Nov 2019, 03:32 PM

Hi Hugo,

I have just answered your other post on the same matter, please, refer my answer here:

telerik.com/forums/multiple-column-series-per-date

Regards,
Vessy
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Chart (HTML5)
Asked by
Navneet
Top achievements
Rank 1
Answers by
Danail Vasilev
Telerik team
Navneet
Top achievements
Rank 1
Hugo Augusto
Top achievements
Rank 2
Iron
Veteran
Iron
Vessy
Telerik team
Share this question
or