RangeBar with categories

4 posts, 0 answers
  1. Pawel
    Pawel avatar
    2 posts
    Member since:
    Mar 2013

    Posted 11 Aug 2015 Link to this post


    I try to use Telerik.Web.UI -> RadHtmlChart and RangeBarSeries to implement chart as in attachment.

    I have problem with FromField and ToField. This fields have DECIMAL type but i need DATETIME type.
    Also i need to create "stacked" chart: all series located in the same column for specific category

    If i used kendo i gain what i want (found in Your example) as below.
    Can You help me achieve this in HtmlChart?

    <script>

    var data = [{

    id: 1,

    line: "Line1",

    from: new Date("2014/01/01 11:30").getTime(),

    to: new Date("2014/01/01 14:45").getTime(),

    valueColor: "red"

    }, {

    id: 2,

    line: "Line2",

    from: new Date("2014/01/01 09:30").getTime(),

    to: new Date("2014/01/01 09:45").getTime(),

    valueColor: "green"

    }, {

    id: 3,

    line: "Line2",

    from: new Date("2014/01/01 09:45").getTime(),

    to: new Date("2014/01/01 10:00").getTime(),

    valueColor: "blue"

    }, {

    id: 4,

    line: "Line2",

    from: new Date("2014/01/01 10:00").getTime(),

    to: new Date("2014/01/01 10:15").getTime(),

    valueColor: "red"

    }, {

    id: 5,

    line: "Line2",

    from: new Date("2014/01/01 10:15").getTime(),

    to: new Date("2014/01/01 14:00").getTime(),

    valueColor: "green"

    }, {

    id: 6,

    line: "Line2",

    from: new Date("2014/01/01 15:15").getTime(),

    to: new Date("2014/01/01 15:30").getTime(),

    valueColor: "red"

    }, {

    id: 7,

    line: "Line2",

    from: new Date("2014/01/01 15:45").getTime(),

    to: new Date("2014/01/01 16:00").getTime(),

    valueColor: "red"

    }];

    $("#chart").kendoChart(

    {

    dataSource:

    {

    data: SqlDataSource1,

    group: {

    field: "id",

    dir: "desc"

    }

    },

    series:

    [{

    type: "rangeBar",

    gap: 0.1,

    fromField: "from",

    toField: "to",

    categoryField: "line",

    spacing: -1,

    colorField: "valueColor",

    name: "Category: #: group.items[0].field #"

    }],

    valueAxis:

    {

    min: new Date("2014/01/01 08:00").getTime(),

    max: new Date("2014/01/01 17:00").getTime(),

    majorUnit: 60 * 60 * 1000, // 60 minutes in milliseconds

    labels: {

    template: "#= kendo.toString(new Date(value), 'HH:mm') #"

    }

    },

    legend:

    {

    visible: true

    }

    });

    </script>

    I try to use Telerik.Web.UI -> RadHtmlChart and RangeBarSeries to implement chart as in attachment.
     
    I have problem with FromField and ToField. This fields have DECIMAL type but i need DATETIME type.
    Also i need to create "stacked" chart: all series located in the same column for specific category
     
    If i used kendo i gain what i want (found in Your example) as below.
    Can You help me achieve this in HtmlChart?
     

    <script>

    var data = [{

    id: 1,

    line: "Line1",

    from: new Date("2014/01/01 11:30").getTime(),

    to: new Date("2014/01/01 14:45").getTime(),

    valueColor: "red"

    }, {

    id: 2,

    line: "Line2",

    from: new Date("2014/01/01 09:30").getTime(),

    to: new Date("2014/01/01 09:45").getTime(),

    valueColor: "green"

    }, {

    id: 3,

    line: "Line2",

    from: new Date("2014/01/01 09:45").getTime(),

    to: new Date("2014/01/01 10:00").getTime(),

    valueColor: "blue"

    }, {

    id: 4,

    line: "Line2",

    from: new Date("2014/01/01 10:00").getTime(),

    to: new Date("2014/01/01 10:15").getTime(),

    valueColor: "red"

    }, {

    id: 5,

    line: "Line2",

    from: new Date("2014/01/01 10:15").getTime(),

    to: new Date("2014/01/01 14:00").getTime(),

    valueColor: "green"

    }, {

    id: 6,

    line: "Line2",

    from: new Date("2014/01/01 15:15").getTime(),

    to: new Date("2014/01/01 15:30").getTime(),

    valueColor: "red"

    }, {

    id: 7,

    line: "Line2",

    from: new Date("2014/01/01 15:45").getTime(),

    to: new Date("2014/01/01 16:00").getTime(),

    valueColor: "red"

    }];

    $("#chart").kendoChart(

    {

    dataSource:

    {

    data: SqlDataSource1,

    group: {

    field: "id",

    dir: "desc"

    }

    },

    series:

    [{

    type: "rangeBar",

    gap: 0.1,

    fromField: "from",

    toField: "to",

    categoryField: "line",

    spacing: -1,

    colorField: "valueColor",

    name: "Category: #: group.items[0].field #"

    }],

    valueAxis:

    {

    min: new Date("2014/01/01 08:00").getTime(),

    max: new Date("2014/01/01 17:00").getTime(),

    majorUnit: 60 * 60 * 1000, // 60 minutes in milliseconds

    labels: {

    template: "#= kendo.toString(new Date(value), 'HH:mm') #"

    }

    },

    legend:

    {

    visible: true

    }

    });

    </script>

    I try to use Telerik.Web.UI -> RadHtmlChart and RangeBarSeries to implement chart as in attachment.
     
    I have problem with FromField and ToField. This fields have DECIMAL type but i need DATETIME type.
    Also i need to create "stacked" chart: all series located in the same column for specific category
     
    If i used kendo i gain what i want (found in Your example) as below.
    Can You help me achieve this in HtmlChart?
     

    <script>

    var data = [{

    id: 1,

    line: "Line1",

    from: new Date("2014/01/01 11:30").getTime(),

    to: new Date("2014/01/01 14:45").getTime(),

    valueColor: "red"

    }, {

    id: 2,

    line: "Line2",

    from: new Date("2014/01/01 09:30").getTime(),

    to: new Date("2014/01/01 09:45").getTime(),

    valueColor: "green"

    }, {

    id: 3,

    line: "Line2",

    from: new Date("2014/01/01 09:45").getTime(),

    to: new Date("2014/01/01 10:00").getTime(),

    valueColor: "blue"

    }, {

    id: 4,

    line: "Line2",

    from: new Date("2014/01/01 10:00").getTime(),

    to: new Date("2014/01/01 10:15").getTime(),

    valueColor: "red"

    }, {

    id: 5,

    line: "Line2",

    from: new Date("2014/01/01 10:15").getTime(),

    to: new Date("2014/01/01 14:00").getTime(),

    valueColor: "green"

    }, {

    id: 6,

    line: "Line2",

    from: new Date("2014/01/01 15:15").getTime(),

    to: new Date("2014/01/01 15:30").getTime(),

    valueColor: "red"

    }, {

    id: 7,

    line: "Line2",

    from: new Date("2014/01/01 15:45").getTime(),

    to: new Date("2014/01/01 16:00").getTime(),

    valueColor: "red"

    }];

    $("#chart").kendoChart(

    {

    dataSource:

    {

    data: SqlDataSource1,

    group: {

    field: "id",

    dir: "desc"

    }

    },

    series:

    [{

    type: "rangeBar",

    gap: 0.1,

    fromField: "from",

    toField: "to",

    categoryField: "line",

    spacing: -1,

    colorField: "valueColor",

    name: "Category: #: group.items[0].field #"

    }],

    valueAxis:

    {

    min: new Date("2014/01/01 08:00").getTime(),

    max: new Date("2014/01/01 17:00").getTime(),

    majorUnit: 60 * 60 * 1000, // 60 minutes in milliseconds

    labels: {

    template: "#= kendo.toString(new Date(value), 'HH:mm') #"

    }

    },

    legend:

    {

    visible: true

    }

    });

    </script>

  2. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1494 posts

    Posted 14 Aug 2015 Link to this post

    Hi Pawel,

    You can use the get_kendoWidget() method in order to get a reference to the kendo widget and then utilize the Kendo UI's method setOptions (http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#methods-setOptions) to set the desired options. For example:
    ASPX:
    <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server">
        <ClientEvents OnLoad="OnLoad" />
    </telerik:RadHtmlChart>
    <div id="chart"></div>
    <script>
        function OnLoad(chart) {
            var kendoWidget = chart.get_kendoWidget();
            kendoWidget.setOptions({
                dataSource:
                {
                    data: data,
                    group: {
                        field: "id",
                        dir: "desc"
                    }
                },
     
                series:
                [{
                    type: "rangeBar",
                    gap: 0.1,
                    fromField: "from",
                    toField: "to",
                    categoryField: "line",
                    spacing: -1,
                    colorField: "valueColor",
                    name: "Category: #: group.items[0].field #"
                }],
     
                valueAxis:
                {
                    min: new Date("2014/01/01 08:00").getTime(),
                    max: new Date("2014/01/01 17:00").getTime(),
                    majorUnit: 60 * 60 * 1000, // 60 minutes in milliseconds
                    labels: {
                        template: "#= kendo.toString(new Date(value), 'HH:mm') #"
                    }
                },
                legend:
                {
                    visible: true
                }
            });
        }
    </script>



    Regards,
    Danail Vasilev
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Pawel
    Pawel avatar
    2 posts
    Member since:
    Mar 2013

    Posted 18 Aug 2015 in reply to Danail Vasilev Link to this post

    Thank You, but how to use it with codebehind on server side. Creating and databinding on the server with data like below:

                        System.Data.DataTable dt = new DataTable("Utilization");
                        dt.Columns.Add("From", typeof(DateTime));
                        dt.Columns.Add("To", typeof(DateTime));
                        dt.Columns.Add("Line", typeof(string));
                        dt.Columns.Add("Color", typeof(string));
                        var dr = dt.NewRow();
                        dr["From"] = new DateTime(2014, 11, 1, 11, 30, 0);
                        dr["To"] = new DateTime(2014, 11, 1, 14, 45, 0);
                        dr["Line"] = "Line1";
                        dr["Color"] = "red";
                        dt.Rows.Add(dr);

                        dr = dt.NewRow();
                        dr["From"] = new DateTime(2014, 11, 1, 9, 30, 0);
                        dr["To"] = new DateTime(2014, 11, 1, 9, 45, 0);
                        dr["Line"] = "Line2";
                        dr["Color"] = "green";
                        dt.Rows.Add(dr);

                        dr = dt.NewRow();
                        dr["From"] = new DateTime(2014, 11, 1, 9, 45, 0);
                        dr["To"] = new DateTime(2014, 11, 1, 10, 0, 0);
                        dr["Line"] = "Line2";
                        dr["Color"] = "blue";
                        dt.Rows.Add(dr);

                        dr = dt.NewRow();
                        dr["From"] = new DateTime(2014, 11, 1, 10, 0, 0);
                        dr["To"] = new DateTime(2014, 11, 1, 10, 15, 0);
                        dr["Line"] = "Line2";
                        dr["Color"] = "red";
                        dt.Rows.Add(dr);

                        dr = dt.NewRow();
                        dr["From"] = new DateTime(2014, 11, 1, 10, 15, 0);
                        dr["To"] = new DateTime(2014, 11, 1, 14, 0, 0);
                        dr["Line"] = "Line2";
                        dr["Color"] = "green";
                        dt.Rows.Add(dr);

                        dr = dt.NewRow();
                        dr["From"] = new DateTime(2014, 11, 1, 14, 0, 0);
                        dr["To"] = new DateTime(2014, 11, 1, 15, 15, 0);
                        dr["Line"] = "Line2";
                        dr["Color"] = "blue";
                        dt.Rows.Add(dr);

                        dr = dt.NewRow();
                        dr["From"] = new DateTime(2014, 11, 1, 15, 15, 0);
                        dr["To"] = new DateTime(2014, 11, 1, 15, 30, 0);
                        dr["Line"] = "Line2";
                        dr["Color"] = "red";
                        dt.Rows.Add(dr);

                        dr = dt.NewRow();
                        dr["From"] = new DateTime(2014, 11, 1, 15, 30, 0);
                        dr["To"] = new DateTime(2014, 11, 1, 15, 45, 0);
                        dr["Line"] = "Line2";
                        dr["Color"] = "green";
                        dt.Rows.Add(dr);

     

  5. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1494 posts

    Posted 21 Aug 2015 Link to this post

    Hello Pawel,

    I can suggest that you try the following:

      - Data bind the chart:

    RadHtmlChart1.DataSource = dt;
    RadHtmlChart1.DataBind();
      
       - Add some series to the chart, in order to serialize the data source on the client-side:

    <PlotArea>
        <Series>
            <telerik:RangeBarSeries DataFromField="From" DataToField="To">
            </telerik:RangeBarSeries>
        </Series>
    </PlotArea>
       
        - Ensure you are using the exact data source field names in the series properties.

        - Get the chart's data source on the client-side - eval(chart.get_dataSourceJSON()) , add some logic to get the time and pass it to the SetOptions method - data: myData.

    Regards,
    Danail Vasilev
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top