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

RangeBar with categories

3 Answers 51 Views
Chart (HTML5)
This is a migrated thread and some comments may be shown as answers.
xx
Top achievements
Rank 1
xx asked on 11 Aug 2015, 11:30 AM

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>

3 Answers, 1 is accepted

Sort by
0
Danail Vasilev
Telerik team
answered on 14 Aug 2015, 08:20 AM
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
0
xx
Top achievements
Rank 1
answered on 18 Aug 2015, 09:47 AM

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);

‚Äč

 

0
Danail Vasilev
Telerik team
answered on 21 Aug 2015, 08:43 AM
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
Tags
Chart (HTML5)
Asked by
xx
Top achievements
Rank 1
Answers by
Danail Vasilev
Telerik team
xx
Top achievements
Rank 1
Share this question
or