Completed
Last Updated: 15 Dec 2018 13:47 by ADMIN
ADMIN
Danail Vasilev
Created on: 14 Apr 2014 14:04
Category: HtmlChart
Type: Feature Request
13
Improve RadHtmlChart To and From properties in PlotBands so that they accepts DateTime object
There are two workarounds you can use in the meantime

- Use string representations of the dates instead of actual dates. In this manner you can bind the chart to strings and use a "regular" categorical axis and then the plot bands will work based on the index of the item. In such a case you will need to aggregate the data yourself before passing it to the chart.
- Using the Kendo Chart widget directly, and here is an example of using date objects and adding plot bands dynamically: https://docs.telerik.com/kendo-ui/controls/charts/how-to/appearance/dynamic-plot-bands

Here is also a basic example of fetching the Kendo Chart scripts through a hidden RadHtmlChart so that you can easily use the Kendo Chart widget

<script>
    var myData = [{
        "day": new Date("2014/01/01")
    }, {
        "day": new Date("2014/01/02")
    }, {
        "day": new Date("2014/01/31")
    }];
 
 
    function addPlotBand() {
        $ = $telerik.$;
 
        var start = new Date(2014, 0, 1 + Math.floor(Math.random() * 30));
        var end = new Date(start.getTime() + 1000 * 3600 * 24); // 24 hours after start
 
        var options = {};
 
        options["categoryAxis"] = {
            plotBands: [{
                from: start,
                to: end,
                color: "green"
            }]
        };
 
        $("#chart2").data("kendoChart").setOptions(options);
    }
 
    function pageLoad() {
        $ = $telerik.$;
        $("#chart2").kendoChart({
            dataSource: {
                data: myData
            },
            categoryAxis: {
                type: "date",
                field: "day"
            }
        });
    }
</script>
<telerik:RadButton ID="RadButton1" runat="server" AutoPostBack="false" OnClientClicked="addPlotBand" Text="add plotband" />
<div id="chart2"></div>
<telerik:RadHtmlChart runat="server" ID="chart" Style="visibility: hidden;">
    <PlotArea>
        <XAxis DataLabelsField="day">
        </XAxis>
    </PlotArea>
</telerik:RadHtmlChart>
5 comments
ADMIN
Marin Bratanov
Posted on: 15 Dec 2018 13:47
This feature will be live with R1 2019
SWAT
Posted on: 15 Nov 2017 12:31
3.5 years and it is still not done. why?
Anil
Posted on: 01 Nov 2016 21:44
Date Axis is the one used by many many people and not releasing it for date Axis is really bad....
GIA
Posted on: 23 Jun 2016 11:20
Would need that, too. 
Not very understandable why that wasn't implemented right away as plotBands were introduced, as a Date X-Axis is like THE standard use of Radhtmlcharts fo most people i spoke with
Michael
Posted on: 16 Apr 2014 07:07
Needed.