Tooltip, Zoom and Drag features are not working on Kendo Grid using VS2010

[Nadhir]

I'm working on ASP.NET MVC 4 project developed in C# under Visual Studio 2010 and I'm trying to add tooltips, zoom and drag features to my Kendo Chart using the "Kendo UI v2014.3.1119" version. Below the JavaScript code and DataSource i'm currently using:

•  JavaScript:

001.createChart: function () {
002.    var $this = this;
003.    $("." + $this.chartContainerID).kendoChart({
004.        //renderAs: "canvas",
005.        dataSource: {
006.            data: barData,
007.            value: "#={0}!=null"
008.        },
009.        panes: [{
010.            title: "Future / Cash",
011.            height: 300
012.        }, {
013.            name: "premiumPane",
014.            title: "Premium",
015.            padding: "3",
016.            height: 120
017.        }],
018.        categoryAxis: {
019.            pane: "premiumPane"
020.        },
021.        valueAxis: [{
022.            // Default axis
023.            line: {
024.                visible: false
025.            },
026.            labels: {
027.                format: "${0}"
028.            }
029.        }, {
030.            // Premium Axis
031.            name: "premiumAxis",
032.            pane: "premiumPane",
033.            visible: true,
034.            narrowRange: true,
035.            labels: {
036.                step: 3
037.            }
038.        }],
039.        series: [{
040.            // Candlestick serie
041.            type: "candlestick",
042.            openField: "open",
043.            highField: "high",
044.            lowField: "low",
045.            closeField: "close",
046.            color: "green",
047.            downColor: "red",
048.            opacity: 0.3,
049.            line: {
050.                opacity: 0.8,
051.                color: "black"
052.            },
053.            tooltip: {
054.                visible: true,
055.                format: "{4}<br />Open: {0:C}<br />High: {1:C}<br />Low: {2:C}<br />Close: {3:C}"
056.            }
057.        }, {
058.            // Cash price serie
059.            type: "line",
060.            name: "Cash Price",
061.            missingValues: "interpolate",
062.            field: "cash",
063.            color: "rgb(70, 80, 140)",
064.            opacity: 1,
065.            tooltip: {
066.                visible: true,
067.                template: "#= kendo.format('{0:dd/MM/yyyy}', category) # <br /> Cash Prix: #= kendo.format('{0:C}',value) #"
068.            }
069.        }, {
070.            // Premium serie
071.            type: "line",
072.            field: "prim",
073.            axis: "premiumAxis",
074.            tooltip: {
075.                visible: true,
076.                template: "#= kendo.format('{0:dd/MM/yyyy}', category) # <br /> Premium Prix: #= kendo.format('{0:C}',value) #"
077.
078.            }
079.        }
080.        ],
081.        categoryAxis: {
082.            categoryField: "date",
083.            field: "date",
084.            baseUnitStep: "auto",
085.
086.            missingValues: "interpolate",
087.
088.            labels: {
089.                step: 20 // Render every second label
090.            }
091.        },
092.        legend: {
093.            position: "top"
094.        },
095.        transitions: false,
096.        drag: $this.onDrag,
097.        dragEnd: $this.onDragEnd,
098.        zoom: $this.onZoom
099.    });
100.},
101.// Drag handler
102.onDrag: function (e) {
103.    debugger;
104.    var chart = e.sender;
105.    var ds = chart.dataSource;
106.    var delta = Math.round(e.originalEvent.x.initialDelta / DRAG_THR);
107.
108.    if (delta != 0) {
109.        newStart = Math.max(0, viewStart - delta);
110.        newStart = Math.min(barData.length - viewSize, newStart);
111.        ds.query({
112.            skip: newStart,
113.            page: 0,
114.            pageSize: viewSize,
115.            sort: SORT
116.        });
117.    }
118.},
119.onDragEnd: function () {
120.    debugger;
121.    viewStart = newStart;
122.},
123.// Zoom handler
124.onZoom: function (e) {
125.    debugger;
126.    var chart = e.sender;
127.    var ds = chart.dataSource;
128.    viewSize = Math.min(Math.max(viewSize + e.delta, MIN_SIZE), MAX_SIZE);
129.    ds.query({
130.        skip: viewStart,
131.        page: 0,
132.        pageSize: viewSize,
133.        sort: SORT
134.    });
135.
136.    // Prevent document scrolling
137.    e.originalEvent.preventDefault();
138.}

​​

• DataSource:

01.var barData = [
02.    { day: 1, date: "2015/05/01", open: 13, high: 19, low: 9, close: 16, cash: 18, prim: 2 },
03.    { day: 2, date: "2015/05/02", open: 14, high: 16, low: 11, close: 16, cash: 18, prim: 2 },
04.    { day: 3, date: "2015/05/03", open: 16, high: 21, low: 12, close: 18, cash: 16, prim: -2 },
05.    { day: 4, date: "2015/05/04", open: 18, high: 40, low: 11, close: 30, cash: 33, prim: 3 },
06.    { day: 5, date: "2015/05/07", open: 30, high: 45, low: 26, close: 40, cash: 42, prim: 2 },
07.    { day: 6, date: "2015/05/08", open: 40, high: 80, low: 30, close: 70, cash: 66, prim: -4 },
08.    { day: 7, date: "2015/05/09", open: 70, high: 80, low: 40, close: 55, cash: 57, prim: 2 },
09.    { day: 8, date: "2015/05/10", open: 55, high: 65, low: 11, close: 30, cash: 35, prim: 5 },
10.    { day: 9, date: "2015/05/11", open: 30, high: 45, low: 16, close: 20, cash: 18, prim: -2 },
11.    { day: 10, date: "2015/05/12", open: 30, high: 45, low: 16, close: 20, cash: 18, prim: -2 },
12.    { day: 11, date: "2015/05/13", open: 40, high: 80, low: 30, close: 70, cash: 66, prim: -4 },
13.    {day: 14, date: "2015/05/16", open: 30, high: 45, low: 23, close: 40, cash: 43, prim: 4 },
14.    { day: 15, date: "2015/05/17", open: 40, high: 80, low: 30, close: 70, cash: 73, prim: 3 },
15.    { day: 16, date: "2015/05/18", open: 70, high: 80, low: 40, close: 55, cash: 56, prim: 1 },
16.    { day: 17, date: "2015/05/19", open: 55, high: 65, low: 11, close: 30, cash: 33, prim: 3 },
17.    { day: 18, date: "2015/05/20", open: 30, high: 45, low: 26, close: 40, cash: 42, prim: 2 },
18.    { day: 19, date: "2015/05/21", open: 40, high: 80, low: 30, close: 70, cash: 72, prim: 2 },
19.    { day: 20, date: "2015/05/22", open: 70, high: 80, low: 40, close: 55, cash: 57, prim: 2 },
20.    { day: 21, date: "2015/05/23", open: 70, high: 80, low: 40, close: 55, cash: 56, prim: 1 },
21.    { day: 22, date: "2015/05/24", open: 55, high: 65, low: 11, close: 30, cash: 33, prim: 3 },
22.    { day: 23, date: "2015/05/25", open: 30, high: 45, low: 26, close: 40, cash: 42, prim: 2 },
23.    { day: 24, date: "2015/05/26", open: 40, high: 80, low: 30, close: 70, cash: 72, prim: 2 },
24.    { day: 25, date: "2015/05/27", open: 70, high: 80, low: 40, close: 55, cash: 57, prim: 2 },
25.    { day: 26, date: "2015/05/28", open: 55, high: 65, low: 11, close: 30, cash: 33, prim: 3 },
26.    { day: 27, date: "2015/05/29", open: 30, high: 45, low: 26, close: 40, cash: 42, prim: 2 },
27.    { day: 28, date: "2015/05/30", open: 40, high: 80, low: 30, close: 70, cash: 72, prim: 2 },
28.    { day: 29, date: "2015/05/31", open: 70, high: 80, low: 40, close: 55, cash: 57, prim: 2 }
29.];

​​

My issue is that tooltips, zoom and drag features are not displayed / working but my kendo chart is well displayed.

Could anyone help me, please?

Thanks.

Regards,

[Daniel]

Hello,

Could you check if there are any JavaScript errors? If there aren't any then could you check this example and let me know if it works as expected or if I am missing something?


Regards,
Daniel
Telerik

 

 

[Nadhir]

Hello Daniel,

Thank you for your reply.

Yes, it worked as expected. In my case, there are no javascript errors but when I use this code, the "onDrag", "onDragEnd" and "onZoom"functions are unreachable.

However, when I replaced the 3 following lines:

drag: $this.onDrag,
dragEnd: $this.onDragEnd,
zoom: $this.onZoom

by

drag: $this.onDrag(xxx),
dragEnd: $this.onDragEnd,
zoom: $this.onZoom(xxx)

I reached the "onDrag", "onDragEnd" and "onZoom" functions but they crash because "e" was undefined.

I think if I find the relevant parameter (event) to replace the "xxx", my issue will be solved.

Do you have any idea, please?

Thanks in advance.

Best regards,

Nadhir

P.S.: When I test the example in a new ASP.NET project, it worked (tooltips, zoom, drag) but when I did the same thing into my main project, it didn't.

[Nadhir]

Hi,

I forgot to note that I'm trying to display my charts on a "Kendo Window" (the problem comes from here). Indeed, my charts are well displayed and drag, zoom & tooltips work perfectly when I display the chart on the main interface (not on the popup (Kendo Window)).

Does anyone know if there is a specific code to add to enable tooltips, drag & zoom on charts into Kendo Window, please?

Thank you in advance.

Best regards,

Nadhir

[Nadhir]

Hi all,

The issue has been solved.

I post my solution if it could be helpful for someone facing the same issue.

The issue comes from the Kendo Window definition used at the beginning as follows:

• Old Cshtml code

<div class="k-chart k-stockchart" style="display: none;">
  @(Html.Kendo().Window()
      .Name("chartsWindow")
      .Title("")
      .Content("")
      .Iframe(true)
      .Draggable()
   )
  <div id="chartContainer" style="width: 780px;">
  </div>
</div>

In this case, the Kendo Chart is well displayed but tooltip, zoom & drag features don't work.

So, I replaced the code above by the following:

• New Cshtml code

<div id="chartsWindow" style="display: none;">

      <div id="chartContainer" style="width: 760px; height: 500px;">

      </div>

</div>

• New JavaScript code

$("#chartsWindow").kendoWindow({

            title: "Courbes des Cash, Futures et/ou Primes",

            width: 800,

            height: 540,

            actions: ['Refresh', 'Close'],

            visible: false,

            draggable: false,

            //iframe: true

            modal: true,

            resizable: false

        });

 

        var window = $('#chartsWindow').data('kendoWindow').center();

 

        window.open();

Regards,