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

RangeBar chart not working with DateTime

1 Answer 107 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Grzegorz
Top achievements
Rank 1
Grzegorz asked on 13 Aug 2015, 06:42 AM
I try to used 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 (but i need use RadHtmlChart):


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

1 Answer, 1 is accepted

Sort by
0
Stamo Gochev
Telerik team
answered on 17 Aug 2015, 07:17 AM
Hello Grzegorz,

You can find detailed suggestions on how to handle the situation in this forum post.

I also kindly remind you to send us only one question regarding the same problem as this creates unnecessary duplicates.

Regards,
Stamo Gochev
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
Charts
Asked by
Grzegorz
Top achievements
Rank 1
Answers by
Stamo Gochev
Telerik team
Share this question
or