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

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

4 Answers 98 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Nadhir
Top achievements
Rank 1
Nadhir asked on 10 Jun 2015, 04:31 PM

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,

4 Answers, 1 is accepted

Sort by
0
Daniel
Telerik team
answered on 12 Jun 2015, 12:36 PM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Nadhir
Top achievements
Rank 1
answered on 12 Jun 2015, 01:05 PM

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.

0
Nadhir
Top achievements
Rank 1
answered on 15 Jun 2015, 10:24 AM

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

0
Nadhir
Top achievements
Rank 1
answered on 15 Jun 2015, 06:28 PM

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,

 

Tags
Charts
Asked by
Nadhir
Top achievements
Rank 1
Answers by
Daniel
Telerik team
Nadhir
Top achievements
Rank 1
Share this question
or