Is it possible plot two different series in one chart ?

Hello Aravind,

You can combine the following types of charts:

• LineSeries with ColumnSeries or BarSeries
• ScatterSeries with ScatterLineSeries.

The HtmlChart - Mixed Chart Series online demo illustrates the above.

The properties of the charts set in the markup are the same as the ones set in the code behind. Therefore you can use the markup from the Mixed Chart Series demo and consider the HtmlChart - Programmatic Chart Creation demo, in order to recreate them in the code behind. You can also find useful the server-side API of the chart.

Regarding the multiple axis support, you can add more than one YAxes to the chart and associate each of them with the appropriate Series. HtmlChart - Multiple Y-axes demo illustrates this approach. You can also associate multiple YAxes to mixed series types.

Regards,
Danail Vasilev
Telerik

Hi,

I have a problem with a mixed radhtmlchart. I have a chart with line and column series. When I put the pointer over a point of the line series, it shows the tooltip of the bar serie. I mean I can not show the tooltip of the line series if the point is inside the bar.

I hope somebody could help me.

Regards.

 

Carlos

Hi Carlos,

I am not able to reproduce the issue with the code below and the latest Telerik UI version - 2015.2.623. You can find a short video test here - http://screencast.com/t/FjObBGowyJoE


If you are not using the latest version - 2015.2.623, does upgrading to it help?

Regards,
Danail Vasilev
Telerik

All official examples with series written in ASPX files, like this wonderfull example: http://demos.telerik.com/aspnet-ajax/htmlchart/examples/databinding/staticitems/defaultcs.aspx

But is it possible to create DataBinded serie (DataTable) and add some statical series on ​a chart with dynamic DateTime X-axis AND ​without using statical Columns on X-Axis, but with ability for User to dinamically add extended LineSeries?

In the attached files, the modefied previous standart example with dynamic DateTime Axis shows only databinded serie AND only legend from custom created seria. So, NO data from custom LineSeries available on Chart :(.

---------------------------------------------

<telerik:RadHtmlChart runat="server" ID="TemperatureRadHTMLChart" Width="800px" Height="480px">
                        <PlotArea>
                            <XAxis DataLabelsField="TempDate" Type="Date">
                                <TitleAppearance Text="Measure temperature at">
                                </TitleAppearance>
                                <LabelsAppearance>
                                    <DateFormats DaysFormat="dd.MM.yy" MonthsFormat="MM.yy" WeeksFormat="d.M" />
                                    <TextStyle FontSize="9px" />
                                </LabelsAppearance>
                                <MajorGridLines Color="#EFEFEF" Width="1"></MajorGridLines>
                                <MinorGridLines Color="#F7F7F7" Width="1"></MinorGridLines>
                            </XAxis>
                            <YAxis>
                                <TitleAppearance Text="Temperature">
                                </TitleAppearance>
                                <LabelsAppearance DataFormatString="{0:N2}">
                                </LabelsAppearance>
                                <MajorGridLines Color="#EFEFEF" Width="1"></MajorGridLines>
                                <MinorGridLines Color="#F7F7F7" Width="1"></MinorGridLines>
                            </YAxis>
                        </PlotArea>
                        <ChartTitle Text="Temperature in London from different devices">
                        </ChartTitle>
                    </telerik:RadHtmlChart>

 protected void Page_Load(object sender, EventArgs e)
    {
            //=============================== Line for test databound operation ===========================
            #region Seria from DataTable
            LineSeries theLine = new LineSeries();
            theLine.LabelsAppearance.Visible = true;
            theLine.LabelsAppearance.DataFormatString = "At {1} Temp is {0}";// some Labels
            theLine.DataFieldY = "Temparature";    // the databind filed
            theLine.Name = "Datasource Temperature";
            theLine.TooltipsAppearance.Visible = true;
            theLine.TooltipsAppearance.ClientTemplate = "At #=dataItem.SellDate.format(\"dd.MM.yy\")#  <br />Temperature is: #=value.format(\"N2\")#";
            #endregion
            //=============================== Line for testing add operaion ==============================
            #region HandMade LineSeria
            LineSeries theCustomLine = new LineSeries();//Note also that DataFieldX property is available only for a databound numeric series and not for LineSeries.
            theCustomLine.LabelsAppearance.Visible = true;
            theCustomLine.LabelsAppearance.DataFormatString = "{1} {0}";// bla-bla
            theCustomLine.Name = "Custom Temperature";
            theCustomLine.TooltipsAppearance.Visible = true;
            theCustomLine.Appearance.FillStyle.BackgroundColor = Color.BlueViolet;
            decimal theValue = decimal.Parse("3");
            CategorySeriesItem item1 = null;
            for (int i = 0; i < 5; i++) // same points amount as in DataTable od databound LineSeria
            {   
                item1 = new CategorySeriesItem();
                item1.Y = theValue;
                item1.BackgroundColor = Color.BlueViolet;
                theCustomLine.SeriesItems.Add(item1);
            }
            theCustomLine.Visible = true;
            #endregion
            //=============================== Scatter Line for testing add operation ==================================
            #region Some handmade Scatter-points
            ScatterLineSeries theCustomScatterLine = LoadScatterLine();
            #endregion
            //=============================== Legend ================================================
            SensorsRadChart.Legend.Appearance.Position = ChartLegendPosition.Bottom;
            SensorsRadChart.Legend.Appearance.Orientation = ChartLegendOrientation.Horizontal;
            SensorsRadChart.Legend.Appearance.Visible = true;
            //=============================== Adding Lines ==========================================
            SensorsRadChart.PlotArea.Series.Add(theLine);// Adding for DataBinding
            SensorsRadChart.DataSource = GetTableData();     
            SensorsRadChart.PlotArea.Series.Add(theCustomLine);            // Adding Custom Line
            SensorsRadChart.PlotArea.Series.Add(theCustomScatterLine);    // Adding ScatterLine points
            SensorsRadChart.DataBind();                     // Fill Seria, Chart with Data

    }
       protected ScatterLineSeries LoadScatterLine()
        {
            //Instantiate ScatterSeriesItem objects
            ScatterSeriesItem ssi1 = new ScatterSeriesItem();
            ScatterSeriesItem ssi2 = new ScatterSeriesItem();
            ScatterSeriesItem ssi3 = new ScatterSeriesItem();
            ScatterSeriesItem ssi4 = new ScatterSeriesItem();
            //Instantiate DateTime objects
            DateTime date1 = (new DateTime(2011, 06, 03, 0, 0, 0));
            DateTime date2 = (new DateTime(2011, 07, 10, 0, 0, 0));
            DateTime date3 = (new DateTime(2012, 04, 17, 0, 0, 0));
            DateTime date4 = (new DateTime(2012, 05, 24, 0, 0, 0));
            //Set the converted x values to the ScatterSeriesItem objects
            ssi1.X = ConvertToJavaScriptDateTime(date1);
            ssi2.X = ConvertToJavaScriptDateTime(date2);
            ssi3.X = ConvertToJavaScriptDateTime(date3);
            ssi4.X = ConvertToJavaScriptDateTime(date4);
            //Set the y values to the ScatterSeriesItem objects
            ssi1.Y = 3;
            ssi2.Y = null;
            ssi3.Y = 5;
            ssi4.Y = 9;

            ScatterLineSeries theData = new ScatterLineSeries();
            theData.Name = "Handmade ScatterLine";
            theData.SeriesItems.Add(ssi1);
            theData.SeriesItems.Add(ssi2);
            theData.SeriesItems.Add(ssi3);
            theData.SeriesItems.Add(ssi4);
            theData.LabelsAppearance.Visible = true;
            theData.LabelsAppearance.DataFormatString = "{1}  {0:m}"; // bla-bla
            theData.Appearance.FillStyle.BackgroundColor = Color.Brown;
            return theData;
        }

        protected DataTable GetTableData()
        {
            DataTable dt = new DataTable();

            dt.Columns.Add("ID", typeof(int));
            dt.Columns.Add("Temparature", typeof(int));
            dt.Columns.Add("TempDate", typeof(DateTime));

            dt.Rows.Add(1, 2, new DateTime(2011, 06, 12));
            dt.Rows.Add(2, 5, new DateTime(2011, 12, 12));
            dt.Rows.Add(3, 6, new DateTime(2012, 06, 17));
            dt.Rows.Add(4, 4, new DateTime(2012, 09, 18));
            dt.Rows.Add(5, 7, new DateTime(2013, 03, 18));

            return dt;
        }
         protected decimal ConvertToJavaScriptDateTime(DateTime fromDate)
        {// http://docs.telerik.com/devtools/aspnet-ajax/controls/htmlchart/how-to/programmatic-creation-of-seriesitems-with-datetime
            return (decimal)fromDate.Subtract(new DateTime(1970, 1, 1)).TotalMilliseconds;
        }

Hello Mike,

It is fine to bind a DataTable data source to the chart. You can also use category series (e.g., LineSeries) or numeric series (e.g., ScatterLineSeries) with or without a DateAxis. You can combine programmatically created series with a data-binding as well.

You should, however, ensure to use series that are of the same type in a single chart instance:
    - Combine category series - area and line with bar / column.
    - Combine numeric series - scatter with scatterline series.

The HtmlChart - Mixed Chart Series online demo illustrates the above.

If you are still having issues on the matter please elaborate more about the actual and the expected behavior of the control.

Regards,
Danail Vasilev
Telerik

Good day Danail.
1. I'm asking forum who have experience working with Telerik HtmlChart
2. i tried using existing Telerik's example, but almost all of them are in ASPX so that's good to show hierarchy but not to work with real application.
3. i've just tried to add custom made LineSeries in CS with those databinded data from DataTable and found that data from DataTable was shown, but with custom LineSeria only legend was present. Even the amount of items in LineSeria would be the same as in DataTable. But of course the best if Telerik lib can give possibility if custom made LineSeries can have less items then at same time DataTable cause as i see on the forum's themes that there are some performance problems can be with >10(20)K points to draw.
4.i attached the code, modified from existing Telerik lib examples + print screen from latest FireFox with current and expected result.

Hi Mike,

Please find my comments and suggestions below:

    - You can use the same property and tag names from the markup in the code behind as well. This relates to all Telerik UI controls, including RadHtmlChart.
    - For real-life scenarios with Telerik UI controls you can check our integration demos:
           - http://demos.telerik.com/aspnet-ajax/salesdashboard/
           - http://demos.telerik.com/aspnet-ajax/sample-applications/olympic-games/

     - The provided example works properly on my side and renders like that - http://screencast.com/t/S5Xab92saw8. For your convenience I have attached an .aspx page with a full runnable sample on the matter - the only modifications I have made is to add a chart instance in the aspx and include the Telerik.Web.UI and Telerik.Web.UI.HtmlChart namespaces in the code behind.

      - To hide the markers of the series you can use the visible property:

      - Regarding the performance of the chart I can suggest that you examine the following article for details - Performance Optimizations

Regards,
Danail Vasilev
Telerik

The example is working.
I changed it a litle bit to use RadChart inside PageView like:

 

 

 And found, that when doing DataBind inside !Page.IsPostBack - then Graph from DataTable's data is shown OK, even moving through the pages.
BUT the custom "handmade" added lines don't shown except in the legend.
Only if you do DataBind inside Page.IsPostBack - then all kinds of LineSeria will be shown.
So, DataTable strongly recommend to be Cached.... or smth. wrong?

 

But what with Navigator: When using Navigator(changing ) - custom added LineSeria also isn't shown except in the legend (see pic).
Do RadChart have restrictions in this kind of using?
According to the example - Custom/"Handmade" LineSeria - will not be shown except in the legend.
What are any recommendations to make zooming according to Y-axe?

 

 

 

 

 

 

 

 

 

 

Also found after spending hours in ​debugging that ColumnNames in DataTables MUST start from Letter ONLY (NO Digits or other symbols) [in docs didn't find any references on such lemitations except on special characters].

Otherwise DataBinding will be OK, but only legend will be displayed and halted on pressing buttons on it.

 

Hello Mike,

Yes, programmatically created series and items should be recreated with each postback. Another approach is to hardcode them in the markup.

Regards,
Danail Vasilev
Telerik

1. But what with Navigator: When using Navigator(changing ) - custom added LineSeria also isn't shown except in the legend (see pic in previouse post).
Do RadChart have also restrictions in this kind of using ​custom made series?
According to the example - Custom/"Handmade" LineSeria in Layout="Stock" will not be shown except in the legend.
2. There is zoom-func realised for X-Axis, but do ​exist any recommendations/func to make zooming ​for to Y-axe (i saw some references in this post)? Or ​this'll be realised in future ver.?

Hi Mike,

If by the "custom added series" you refer to series with programmatically created items then this is not supported scenario by the stock chart. The stock chart requires that the data comes from a data source. You can add programmatically series in the stock chart but their values should not be added programmatically.

As for the zoom functionality - I am sorry to say that you cannot zoom the y-axis. We have an idea to improve the zooming functionality but how and when this will be done, currently I cannot provide any ETA.

Regards,
Danail Vasilev
Telerik