Telerik Forums / Kendo UI for jQuery
This is a migrated thread and some comments may be shown as answers.

Chart navigator

3 Answers 70 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Nathan
Top achievements
Rank 1
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>
    <style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
</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>

3 Answers, 1 is accepted

Sort by
0
Nathan
Top achievements
Rank 1
answered on 10 Jul 2014, 07:16 PM
Forgot to mention, I've also tried using actual dates instead of strings for all of the dates. This didn't work either.
0
Nathan
Top achievements
Rank 1
answered on 10 Jul 2014, 07:21 PM
Figured it out. Had to use a stockchart. Now I have to figure out how to format the axis to not have dollar signs.
0
Nathan
Top achievements
Rank 1
answered on 10 Jul 2014, 07:39 PM
I got it all figured out, disregard this thread.
Tags
Charts
Asked by
Nathan
Top achievements
Rank 1
Answers by
Nathan
Top achievements
Rank 1
Share this question
or