combination of a pivot grid control and a chart control

[Jens]

Dear Sir or Madam,

we are right now in the trial period of the Telerik MVC suite.
Especially we are searching for a combination of a pivot grid control and a chart control.
You have on your demo website already such a demo for classic ASPX.
 
Can you also provide such a demo for MVC? This would help us a lot in the evaluation process.
 
Thanks a lot and best regards from Germany.

PS:
the documentation for the classic ASPX components (web form) seems to be much more elaborated than
the one for MVC ..it would be great if this could be aligned. Thanks!

[Georgi Krustev]

Hello Jens,

I answered in the support thread opened on the same subject. I would like to ask to continue our discussion in only one thread to avoid any duplication.

Here is a quote of the answer:

Here is a Kendo Dojo demo, which shows how the PivotGrid widget can be integrated with Kendo Chart. Please note that the demo is a client-side based, but the concept is applicable to ASP.NET MVC too.
Basically, the developer will need to convert the columns and rows tuples along with the data in understandable for Kendo Chart format.

Regards,
Georgi Krustev
Telerik

 

 

[Jens]

Dear Georgi,

thanks a lot for your answer.

To be more precisely we need not only a grid-chart combination on page load
but a continous synchronisation on every dynamic pivot grid action (filter, change of axis assignments, etc.) ..similar to your ASP.NET Ajax demo.

Therefore we need either on clientside or serverside an event to hook in for transforming the data again and again.
For ASP.NET Ajax you use the CellDataBound event.
Could you please suggest for the MVC components for both ways (clientside synch + serverside synch) how to start this?

Thanks a lot
Jens

[Georgi Krustev]

Hello Jens,

The demo I provided specifically disables member expand/collapse. If you enable the member expand (remove the expandMember event handler), you will notice that chart is re-bound on member expand. Filtering also is honored, because the chart is initialized/bound in the dataBound event handler of the PivotGrid, which will be raised on every data source changes.
Here is the updated demo allowing to rebind the chart. Note that collapse member support is not implemented, because member collapsing is done by PivotGrid and not by PivotDataSource, hence the data source always has the last expanded data and the chart is built over the data source's data.

To sum up, if you would like to update the chart on filter/expand action then you will need to wire the dataBound event, like the code in the demo does.

Regards,
Georgi Krustev
Telerik

 

 

[Jens]

Dear Georgi,

thanks a lot for the update as well as the related explanations.

Still this leaves 3 open questions:
1. For things like collapsing, where the datasource is not changing, I would need to check/query the effectively visible data in the grid ..how do I do this?
2. For local datasources (http://demos.telerik.com/aspnet-mvc/pivotgrid/local-flat-data-binding) I provide the data on the serverside. How do I then react to collapsing, filtering, expanding or moving members to another axis? (Especially for relational datasources - so SQL / no OLAP) Do I react only clientside (javascript event)? ..or is there any MVC controller action on serverside which is called on those changes?
3. Why is it not possible in your demo to move a member (e.g. product category) to another axis?

Thanks a lot for your support again!
BR
Jens

[Georgi Krustev]

Hello Jens,

Straight up to your questions:

#1:
Currently, the required information is not accessible outside of the widget and hence detecting which tuple member is expanded would be very hard. We will provide a feasible way to get this information via API. Thus you will be able to check whether the member is expanded or not.
For the time being, lets consider this request as unsupported.

I will write a follow-up to this thread once this functionality is available.

#2:
Yes, the widget provides a client-side cube engine. It requires the data locally in order to build the cube and bind the grid. You will need to provide the all data you want to categorize locally.

#3:
I could not reproduce this (screencast). Please note that the convertData function is designed to work with expanded column header and wit at least one row tuple. This can be changed by the developer in order to accomplish his business requirements.

Regards,
Georgi Krustev
Telerik

 

 

[Jens]

Hi Georgi,

thanks for clarifying, but still I need some information regarding #2
..so sorry for stepping in again..

#1
thanks for pushing this

#2
So does this mean, that after providing the data via MVC controller + HTML helper there is no more client-server communication
for filtering, aggregation, drag&drop and similar grid actions?
So I always must initially send the full raw data of 10000 records to the client to later work & analyze independently on clientside?

I can imagine this kind of approach for a pure clientside javascript component, but for an ASP.NET client server component I don't think this is the optimal and most efficient way. The server part of the component could already process all filters, aggregations etc. and send only the small result to the client on each action... and I think this is also the approach of the Telerik Pivot Grid for ASP.NET AJAX (web forms) component, right?

Is the ASP.NET MVC component so different from its webforms counter part?

#3 Ok thanks, might be a problem with my browser, although it is quite up to date (firefox 31) ..I will try it with another browser as well.

Thanks a lot for your support and your patience ;-)
Jens

[Georgi Krustev]

Hello Jens,

#2:
The purpose of the PivotGrid widget is to show a categorized data. This means that there should an engine which groups the flat data in many levels (based on the defined dimensions) and create a cubical data. Kendo PivotGrid has such a client PivotCube engine which allows the slice and dice functionality to be possible on client. That is why it requires the whole data at once in order to be able to create a cube from it. Please note that modern browsers become more and more capable of such calculations. For instance 10 000 items are not a problem for any modern browser. With regards to the generated traffic, you can cache the data locally (in localStorage for instance) and use it in any subsequent page load.

The Kendo UI PivotGrid (and its ASP.NET MVC wrapper) is different than ASP.NET Ajax controls, because it should function in fully RESTful way. The ASP.NET Ajax controls are generated on the server and output HTML. The Kendo PivotGrid on the other hand should function with different services. In order to work on server, we will need to create a server cube engine, which in the best should function as the SASS. In other words it should be able to categorize the data (build a cube) to slice and dice and most importantly to provide API for communication (something like XMLA standard). This in one way or another will mimic the work and behavior of SASS. For now we do not have any specific plans for such server cube engine.

Regards,
Georgi Krustev
Telerik

 

 

[Georgi Krustev]

Hello Jens,

This is the promised follow-up.

#1:
After further investigation, we found out that expandMember and collapseMember events can be used for collapse/expand filtration of the datasource data. Here is the updated demo showing how to accomplish this goal. Please note that this is a proof-of-concept demo that can have some scenarios that could not be implemented.

Regards,
Georgi Krustev
Telerik

 

 

[Jens]

Dear Georgi,

sorry for the late reply I was sick for a while. Thanks for your suggestions!

Does your proposal regarding chart synchronization also work for flat data?
I have some problems to apply your proposal to my own scenario - to synchronize chart with my own pivotgrid.
However there is no error message at the chart or grid.

Can you suggest any solution?

Thanks
Jens

[Georgi Krustev]

Hello Jens,

The demo was intended to work with OLAP service. Nevertheless, the client cube builder should produce a similar data structure. Could you provide a demo what exactly does not work?

Regards,
Georgi Krustev
Telerik

 

 

[Christian]

Hello Georgi,

I see Jens never responded to this, but I am wondering if there is an example of your demo posted above but for flat data. I currently have a working pivot grid using C# within my cshtml Index view, and I am attempting to integrate a Chart to accompany the data in the Pivot Grid but I am running into some roadblocks as I can't seem to find many examples.

 

Best,

Christian

[Tsvetomir]

Hi Christian,

Generally, the Kendo UI PivotGrid and the Kendo UI Chart have different mechanics in terms of consuming and structuring the data. Even though it is possible to have a shared data source between the two, it would be needed to make tremendous modifications in order for the data to be displayed in the chart. 

What I can recommend is to simply bind the chart separately from the PivotGrid. This way, you would structure the data on the server-side and pass it to the data source of the chart. And then any modifications and enhancements would be easy to work on. 

As per the charts, the Kendo UI suite exposes a plethora of chart options. Demos for each of the types could be found here:

https://demos.telerik.com/aspnet-mvc/

Let me know in case further assistance is required.


Kind regards,
Tsvetomir
Progress Telerik

[Christian]

Hi Tsvetomir,

I suppose to be more clear, I would say I am trying to replicate the demo Georgi implemented above, where the Chart is bound to the pivot grid and responsive to the data being displayed there.

Converting the data is not the issue I'm running into, it's binding the data on the server side, similar to the databound function in Georgi's example.

All the best,

Christian

[Tsvetomir]

Hi Christian,

Thank you for providing additional details on the scenario. 

Generally, the exact same approach could be applied for the ASP.NET MVC wrappers. Since the data is changed, the information has to be handled in the dataBound event handler. What you can do is to create a chart on the page and set its autoBind property to false. This way, the chart would be bound only when the PivotGrid is bound. 

After that in the DataBound event handler you can obtain the instance of the Kendo UI Chart and execute the query() method of the data source:

$("#chart").getKendoChart().dataSource.query({ /*pass the parameters for the chart*/})

The query method allows you to pass your own parameters. So, these parameters should be indicating what data to return from the server-side.

If you would like to dynamically change the default appearance of the Kendo UI Chart or, you would like to change any of the axis/fields, I would recommend using the setOptions() method. This would allow you to change everything related to the configuration of the chart. More information could be found here:

https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart/methods/setoptions

Let me know in case further assistance is required.


Kind regards,
Tsvetomir
Progress Telerik