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

Do bar chart or area chart has navigator?

11 Answers 164 Views
Charts
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Jianxun
Top achievements
Rank 1
Jianxun asked on 01 Apr 2014, 08:39 AM
I notice stock chart has navigator.  http://demos.telerik.com/kendo-ui/dataviz/financial/index.html
Does other chart such as area chart  support navigator?
Thanks

11 Answers, 1 is accepted

Sort by
0
Iliana Nikolova
Telerik team
answered on 01 Apr 2014, 10:25 AM
Hi Jianxun,

At this point the Navigator is part of Kendo UI StockChart and cannot be used with other chart types, however we keep in mind the idea for a separate Navigator widget for future releases.

On a side note, Kendo UI StockChart series can be different type (area, line, etc.).   

Regards,
Iliana Nikolova
Telerik
 

Build cross-platform mobile apps using Visual Studio and .NET. Register for the online webinar on 03/27/2014, 11:00AM US ET.. Seats are limited.

 
0
Jianxun
Top achievements
Rank 1
answered on 02 Apr 2014, 07:54 AM
Thanks lliana. 
I can use StockChart's line series for the time being.
However,  I found another big problem:  when user zoom in/out the navigating area, some of the data points in the main plotarea may be skipped.   But I want to show all the origin data points in the selected period, do you have any solution to stop StockChart's  from sampling or aggregating data points?
0
Jianxun
Top achievements
Rank 1
answered on 02 Apr 2014, 11:08 AM
I found a workaround for my question above:
 categoryAxis: { 
                maxDateGroups: 10000,
 ...
}
then the stock chart won't do aggregation since my data points quantity is less than 10000
0
Eston
Top achievements
Rank 1
answered on 08 Apr 2014, 05:46 PM
01@(Html.Kendo().Chart<DCS.Models.Data>(Model)
02.        .Name("chart")
03.        .Title("Title").Title(title => title.Visible(false))
04. 
05.        .Legend(legend => legend
06.            .Position(ChartLegendPosition.Bottom).Visible(false)
07.        )
08.            //.ChartArea(chartArea => chartArea.Background("transparent"))
09.        .Series(series =>
10.        {
11.            series.Area(model => model.Compliance).Name("Compliance Rate").Labels(labels => labels.Visible(false));
12.            series.Line(model => model.Compliance).Labels(labels => labels.Visible(false)).Markers(markers => markers.Visible(false));
13. 
14. 
15.        })
16.         .CategoryAxis(axis => axis.Categories(model => model.ReportingPeriod).MajorGridLines(lines => lines.Visible(false)).Select(8, 15).Visible(false))
17.         .ValueAxis(axis => axis.Numeric().Line(line => line.Visible(false)).Max(100).Visible(false).MajorGridLines(lines => lines.Visible(false))
18.            .PlotBands(bands => {bands.Add().From(90).To(100).Color("green").Opacity(0.5); }))
19.        .Events(events => events
20.            .Select("onSelect")
21.         
22.        ).ChartArea(chartArea => chartArea.Height(150))
23.    )
You could try something like this that is similar to the nav bar in stock chart. You'll also need to define:

1.function onSelect(e) {
2.        //Do Something on Select of Nav;
3. 
4.        
5.        
6.    }





You'll have to modify the structure around a little bit for your data however... 
0
Jianxun
Top achievements
Rank 1
answered on 09 Apr 2014, 01:18 AM
Thanks Eston. Which programming language are you using?   ASP.net?   Our project uses kendo only within javascript and html codes.
0
Eston
Top achievements
Rank 1
answered on 09 Apr 2014, 12:59 PM
MVC for .net

I would look at this example from Kendo:

http://demos.telerik.com/kendo-ui/dataviz/api/selection.html?mvc

Should be able to get the other languages there too...
0
Jianxun
Top achievements
Rank 1
answered on 09 Apr 2014, 01:44 PM
Thanks Eston. But i would like find a solution like http://demos.telerik.com/kendo-ui/dataviz/financial/index.html?mvc
the navigor lies below the main chart.
0
Eston
Top achievements
Rank 1
answered on 09 Apr 2014, 01:50 PM
Just put another chart in another div above and have it update its values based on the selected area. Two charts total instead of one Financial, but you can control the layout of the charts rather than being subject to how Financial chart renders and you can add even more charts... 
0
Jianxun
Top achievements
Rank 1
answered on 10 Apr 2014, 12:39 AM
yeah, although it will double the time for drawing two charts, it is a good solution and maybe financial chart do this way too, with some improvement.
0
Jianxun
Top achievements
Rank 1
answered on 22 May 2014, 12:59 PM
Now I have a new problem. How could I catch the event when user change the navigator's selected range?
$("#stock-chart").kendoStockChart({
navigator: {
series: {
type: "line",
field: "volume"
},
select: {
from: "2012/01/01",
to: "2012/03/01"
}
},
...
})
a simple example as above. I just want to do something when user change the selected range of the navigator. anyone can help me?
0
T. Tsonev
Telerik team
answered on 26 May 2014, 07:12 AM
Hi,

I'm closing this thread as duplicate of How to catch the event of StockChart navigator range change

Regards,
T. Tsonev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Charts
Asked by
Jianxun
Top achievements
Rank 1
Answers by
Iliana Nikolova
Telerik team
Jianxun
Top achievements
Rank 1
Eston
Top achievements
Rank 1
T. Tsonev
Telerik team
Share this question
or