Questions on Kendo UI for jQuery Forum

0 answers

133 views

Coloring on a collapsed (timeline view) Range Bar Chart

Hi there;

I've had great success with a range bar chart putting together a timeline -- but I've reached a stumbling block. I'm attempting to show machine runability in a manufacturing environment, so in the timeline I want it green when the machine is running, red when it's not. The timeline just seems to pick the first color though. Attached is the output I'm getting from Kendo, along with a similar mockup from SSRS showing what I'd like to see.

Does anybody have any advice?

Thanks,

Jason

<!DOCTYPE html>

<html>

<head>

<title>Shift Timeline</title>

<meta charset="utf-8">

<link href="content/shared/styles/examples-offline.css" rel="stylesheet">

<link href="styles/kendo.common.min.css" rel="stylesheet">

<link href="styles/kendo.rtl.min.css" rel="stylesheet">

<link href="styles/kendo.default.min.css" rel="stylesheet">

<link href="styles/kendo.default.mobile.min.css" rel="stylesheet">

<script src="js/jquery.min.js"></script>

<script src="js/jszip.min.js"></script>

<script src="js/kendo.all.min.js"></script>

<script src="content/shared/js/console.js"></script>

<script>

</script>

</head>

<body>

<div id="chart"></div>

<div id="timeline"></div>

<script>

var bbxData = [

{ID:3565,MachineName:"DC01",StartDate: new Date("2016-03-09 07:15:10").getTime(), EndDate: new Date("2016-03-09 07:15:32").getTime(),color:"Green"},

{ID:3567,MachineName:"DC01",StartDate: new Date("2016-03-09 07:15:32").getTime(), EndDate: new Date("2016-03-09 08:20:11").getTime(),color:"Green"},

{ID:3734,MachineName:"DC01",StartDate: new Date("2016-03-09 08:20:11").getTime(), EndDate: new Date("2016-03-09 08:20:19").getTime(),color:"Green"},

{ID:3735,MachineName:"DC01",StartDate: new Date("2016-03-09 08:20:19").getTime(), EndDate: new Date("2016-03-09 09:08:10").getTime(),color:"Red"},

{ID:3873,MachineName:"DC01",StartDate: new Date("2016-03-09 09:08:10").getTime(), EndDate: new Date("2016-03-09 10:39:29").getTime(),color:"Red"},

{ID:3012,MachineName:"DC01",StartDate: new Date("2016-03-09 10:39:29").getTime(), EndDate: new Date("2016-03-09 10:41:38").getTime(),color:"Yellow"},

{ID:3026,MachineName:"DC01",StartDate: new Date("2016-03-09 10:41:38").getTime(), EndDate: new Date("2016-03-09 10:42:48").getTime(),color:"Yellow"},

{ID:3033,MachineName:"DC01",StartDate: new Date("2016-03-09 10:42:48").getTime(), EndDate: new Date("2016-03-09 10:43:32").getTime(),color:"Green"},

{ID:3039,MachineName:"DC01",StartDate: new Date("2016-03-09 10:43:32").getTime(), EndDate: new Date("2016-03-09 10:43:48").getTime(),color:"Green"},

{ID:3041,MachineName:"DC01",StartDate: new Date("2016-03-09 10:43:48").getTime(), EndDate: new Date("2016-03-09 10:46:26").getTime(),color:"Green"},

];

$("#chart").kendoChart({

dataSource: {

data: bbxData,

group: {

field: "MachineName",

dir: "desc"

}

},

series: [{

type: "rangeBar",

fromField: "StartDate",

toField: "EndDate",

categoryField: "MachineName",

spacing:-1

}],

valueAxis: {

min: new Date("2016/03/09 01:00 AM").getTime(),

max: new Date("2016/03/09 11:00 PM").getTime(),

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

labels: {

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

}

},

legend: {

visible: false

}

});

</script>

</body>

</html>

Charts

asked on 31 Mar 2017

0 answers

18 views

MVC4 C# Line chart Multi series Need help

Charts

asked on 16 Jul 2015

0 answers

28 views

How can I make chat look like http://finance.yahoo.com/ charts

I would like make a char look like image.

Is it possible?

Charts

asked on 16 May 2015

0 answers

82 views

kendo.dataSource throws warning in Karma/Jasmine tests

So i'm wondering if anyone has been able to "sucessfully" implement karma tests using kendos built in $http.get; the kendo.dataSource. During testing I receive this warning

WARN [web-server]: 404: ...

I've attached a screenshot

It's basically the transport.read trying to get the data for the chart. I've tried to use $httpBackend to resolve this request but I still get the warning. While it's not failing any tests it's really annoying to see.

Here is the plunkr

Charts

asked on 29 Apr 2014

0 answers

53 views

Grouping + Filtering Chart

I'm using a Kendo UI Bar chart and a json file with some dummy data (see attachment)
I needed to group this data, but I repeat this graph for each group, and I will show only the chart of that group.
a picture is added to make it more clear.
Is this possible to do this with Kendo UI or is there another way to do this?

Charts

asked on 22 Apr 2014

0 answers

63 views

Pass data to controller on refresh.

I am trying to pass data to the controller using MVC wrappers. But data not being send, controller is executing but data is not passed. am I doing things correctly?
Thanks

var chart = $("#SalesChart").data("kendoChart");chart.refresh({ data: { "FromDate": $("#FromDate").data("kendoDatePicker").value(), "ToDate": $("#ToDate").data("kendoDatePicker").value() }});

Function GetSalesByDate(salesByDate As BO.Models.Statistics.SalesByDate) As JsonResult

Return Json(BO.Factory.Statistics.GetSalesByDateData(BO.Factory.Statistics.GetSalesByDate))

End Function

@code

Dim SalesChart As Kendo.Mvc.UI.Chart(Of BO.Models.Statistics.SalesTimeSpan) = _

Html.Kendo.Chart(Of BO.Models.Statistics.SalesTimeSpan).Legend(False).

Name("SalesChart").Title("Units sold").Series(Sub(series)

series.Line(Function(model) model.Value, categoryExpression:=Function(model) model.Period).

Aggregate(ChartSeriesAggregate.Avg)

End Sub).

CategoryAxis(Function(axis) axis.Date().BaseUnit(ChartAxisBaseUnit.Days)).

DataSource(Function(ds) ds.Read(Function(read) read.Action("getsalesbydate", "statistics", New With {.area = String.Empty})))

SalesChart.Render()

End Code

Charts

asked on 15 Apr 2014

0 answers

72 views

Important: Shared tooltips not visible in Q3'13 release

Hello,

A defect is preventing the shared tooltips from showing in the official release (v. 2013.3.1119) .
This issue is fixed in internal build v. 2013.3.1121 and later.

The recommended temporary workaround is to set series name:
$("#chart").kendoChart({
series: [{
type: "area",
name: "Series one",
data: [71, 70, 69, 68, 65, 60, 55, 55, 50, 52]
}, {
type: "area",
name: "Series two",
data: [73, 72, 72, 71, 68, 63, 57, 58, 53, 55]
}],
tooltip: {
format: "{0} %"
}
});

Apologies for the caused inconvenience.

Charts

asked on 21 Nov 2013

0 answers

318 views

Custom tooltip.template date format based on categoryAxis baseUnit

If anybody else is wondering, because this code took me forever to figure out, here's how I change the tooltip template date format. Only works with dates, not times. Probably won't be perfect if your time zones are too far apart, but Daylight Saving Time won't screw it up.

$('#DateChart').kendoChart({

...

categoryAxis: {

baseUnit: "fit",

autoBaseUnitSteps: {

seconds: [],

minutes: [],

hours: [],

days: [1],

weeks: [1],

months: [1,3],

years: [1]

},

maxDateGroups: MaxBars,

},

tooltip: {

visible: true,

template: $('#DateChartTemplate').html()

}

});

<script id="DateChartTemplate" type="text/x-kendo-template">

# var BaseUnit = $('\#DateChart').data("kendoChart").options.categoryAxis.baseUnit;

var FirstDate = array[0].Date;

var LastDate = array[array.length - 1].Date;

if (BaseUnit == "days" || (BaseUnit == "fit" &&

Math.round((LastDate - FirstDate) / 86400000) < MaxBars)) { #

#:value#<br />

#=kendo.format("{0:ddd MMM d}", category)#

# } else if (BaseUnit == "weeks" || (BaseUnit == "fit" &&

(Math.round((LastDate - FirstDate) / 86400000)

+ FirstDate.getDay() - LastDate.getDay()) / 7 < MaxBars)) { #

#:value#<br />

#=kendo.format("{0:'Week of' MMM d}", category)#

# } else if (BaseUnit == "months" || (BaseUnit == "fit" &&

(LastDate.getFullYear() - FirstDate.getFullYear()) * 12

+ LastDate.getMonth() - FirstDate.getMonth() < 3 * MaxBars)) { #

#:value#<br />

#=kendo.format("{0:MMMM yyyy}", category)#

# } else { #

#:value#<br />

#=kendo.format("{0:yyyy}", category)#

# } #

</script>

Charts

asked on 17 Oct 2013

0 answers

63 views

Scroll bar for bar and column charts

Hi

I am using bar and column charts to represent my data. The issue is when the data is large, the number of bars increases and is difficult to view the data. when i view in iphone it is still worse. i used pan and zoom for the bar chart but it is ok in browsers and not in iphone(Drag is difficult in iphone). the pan and zoom is also not working fine for column charts. can you provide me with a solution?

Charts

asked on 19 Sep 2013

0 answers

54 views

Legend colors aren't the same as bar color

Hello, I am trying to make a simple stack chart. The problem is the colors on the legend aren't showing the right color for the chart.

I tried changing the color names to HEX and RGB but it still doesn't give me the right colors. I guess it reverts to the default.

Here is an example of the code on jsfiddle:
http://jsfiddle.net/SupremeA1/Cke4n/54/

Charts