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
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
Rank 1
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);
​
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