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

Chart navigator

3 Answers 118 Views

Charts

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

Nathan asked on 10 Jul 2014, 07:12 PM

I'm having trouble getting the navigator to display.

See below code that should run in the dojo.

I've also tried this from the stock chart example:

navigator: {

series: {

type: "area",

field: "value"

},

select: {

from: "7/6/2014",

to: "7/7/2014"

}

},

<!DOCTYPE html>

<html>

<head>

<base href="http://demos.telerik.com/kendo-ui/financial/index">

<style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>

<title></title>

<link href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.common.min.css" rel="stylesheet" />

<link href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.default.min.css" rel="stylesheet" />

<link href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.dataviz.min.css" rel="stylesheet" />

<link href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.dataviz.default.min.css" rel="stylesheet" />

<script src="http://cdn.kendostatic.com/2014.1.528/js/jquery.min.js"></script>

<script src="http://cdn.kendostatic.com/2014.1.528/js/kendo.all.min.js"></script>

</head>

<body>

<div id="example">

<div class="demo-section k-content">

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

</div>

<script>

var categories = ["7/5/2014", "7/6/2014", "7/7/2014", "7/8/2014"];

var initialData = [{ value: 33, date: "7/5/2014" }, { value: 20, date: "7/6/2014" }, { value: 15, date: "7/7/2014" }, { value: 21, date: "7/8/2014" },

{ value: 5, date: "7/5/2014" }, { value: 3, date: "7/6/2014" }, null, { value: 25, date: "7/8/2014" },

{ value: 1, date: "7/5/2014" }, { value: 1, date: "7/6/2014" }, { value: 1, date: "7/7/2014" }, { value: 1, date: "7/8/2014" },

{ value: 10, date: "7/5/2014" }, { value: 10, date: "7/6/2014" }, { value: 1, date: "7/7/2014" }, { value: 7, date: "7/8/2014" },

]

var initialSeries = [{

name: "Product Nuggets",

data: [{ value: 33, date: "7/5/2014" }, { value: 20, date: "7/6/2014" }, { value: 15, date: "7/7/2014" }, { value: 21, date: "7/8/2014" }],

color: "#f43c42"

},

{

name: "Product Costco Colombian Blend",

data: [{ value: 5, date: "7/5/2014" }, { value: 3, date: "7/6/2014" }, { value: 3, date: "7/6/2014" }, { value: 25, date: "7/8/2014" }],

color: "#f3ac32"

}, {

name: "Station Line",

data: [{ value: 1, date: "7/5/2014" }, { value: 1, date: "7/6/2014" }, { value: 1, date: "7/7/2014" }, { value: 1, date: "7/8/2014" }],

color: "#b8b8b8"

}, {

name: "Blox 130514000002",

data: [{ value: 10, date: "7/5/2014" }, { value: 10, date: "7/6/2014" }, { value: 1, date: "7/7/2014" }, { value: 7, date: "7/8/2014" }],

color: "#bb6e36"

}];

function createChart() {

$("#chart").kendoChart({

title: {

text: "Recall"

},

legend: {

visible: true,

position: "left"

},

seriesDefaults: {

type: "line",

missingValues: "gap",

//stack: {

// type: "1"

//}

},

series: initialSeries,

valueAxis: {

line: {

visible: false

},

minorGridLines: {

visible: true

}

},

dateField: "date",

dataSource: { data: initialData },

categoryAxis: {

categories: categories,

majorGridLines: {

visible: false

}

},

navigator: {

series: [

{ field: "value", type: "area"}

]

},

tooltip: {

visible: true,

shared: true,

format: "N0"

//template: "#= series.name #: #= value #"

}

});

}

$(document).ready(createChart);

$(document).bind("kendo:skinChange", createChart);

</script>

</div>

</body>

</html>

Chart navigator

3 Answers, 1 is accepted