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