ASE Home Page Products Download Purchase Support About ASE
ChartDirector Support
 Forum HomeForum Home   SearchSearch

Message ListMessage List     Post MessagePost Message

  partial view realtime chartdirector - mvc.net
Posted by suria on Aug-28-2017 16:14
| Reply | Monitor
Hi,

I have created a partial view which contain a single chartdirector object.

I would like to populate the partial view multiple times main view on runtime.

I have tried with one instance first. The partial view is rendering properly in main view but it is not responsive. Please advice, How do i achieve it to be auto-resize on different devices and while i resize my internet explorer.


I have tried the following using bootstrap styling  in main and partial view  :


                <div class="col-md-12 text-center">
                    <div id=@ViewBag.CTGID class="col-md-12 text-center">
                        <!-- ****** Here is the chart viewer ****** -->
                        @Html.Raw(ViewBag.Viewer.RenderHTML())<br />
                        <!-- ****** Here is the toco viewer ****** -->
                        @*@Html.Raw(ViewBag.TocoViewer.RenderHTML())<br />*@
                        <!-- ****** Here is the viewport control ****** -->
                        @Html.Raw(ViewBag.ViewPortControl.RenderHTML())
                    </div>
                </div>





Thanks and Regards
Suria

  Re: partial view realtime chartdirector - mvc.net
Posted by Peter Kwan on Aug-29-2017 05:41
| Reply | Monitor
Hi Suria,

I have just tried the following method and it seems to work in my case:

The CSS is:

.aaa {width:100%;}
.aaa div {width:100%;}
.aaa img {width:100%;}

<div class="aaa">
    <!-- ****** Here is the chart viewer ****** -->
    @Html.Raw(ViewBag.Viewer.RenderHTML())<br />
    <!-- ****** Here is the viewport control ****** -->
    @Html.Raw(ViewBag.ViewPortControl.RenderHTML())
</div>

Basically, the container ".aaa" can be any specific size. The ".aaa div" and ".aaa img" sets any div or img inside the container to be the same size as the container.

Note that if you need to dynamically resize the RazorViewPortControl, you would need to use the following updated "cdjcv.js". (The "cdjcv.js" included in the current ChartDirector for .NET download can only work with a dynamically resized RazorChartViewer.)

http://www.chartdir.com/forum/download_thread.php?bn=chartdir_support&pattern=cdjcv.js&thread=1475121954#N1475569096

I have tested with both PNG and SVG output for the charts, and it works in both cases.

Regards
Peter Kwan

  Re: partial view realtime chartdirector - mvc.net
Posted by suria on Aug-30-2017 22:56
| Reply | Monitor
Dear Peter.

Thanks for the reply.

i am trying to include multiple realtime using your sample Viewportcontroldemo. I put the chart into partial view and rendered in main view. It is working fine if i only load one chart at a time. but when i load more than one chart simultaneously, the charts are loading correctly but the viewport does not seem to be working when i scroll it, I have sent you the source code. i have attached the error screen as well

thanks
suria

  Re: partial view realtime chartdirector - mvc.net
Posted by Peter Kwan on Aug-31-2017 00:00
| Reply | Monitor
Attachments:
Hi suria,

I happened to have an ASP.NET MVC example of a page with multiple independent realtime charts with zooming and scrolling and viewport control. (I wrote this for one of our customers as an example.) I have just modified that example to make it "responsive".

Attached please find the example. To test the code, please use the "NetMVCCharts" sample Visual Studio solution, and copy the files as follows:

- copy the "ViewportcontroldemoController.cs" to the "Controllers" folder in NetMVCCharts

- copy the "Viewportcontroldemo" folder to the "Views" folder in NetMVCCharts

- copy the "Scripts" folder to the "Scripts" folder in NetMVCCharts

When you open the NetMVCCharts solution, check that the "Views/Viewportcontroldemo" folder contains two files "Index.cshtml" and "OneChart.cshtml". If it does not have "OneChart.cshtml" in Visual Studio, add it to the solution (the file is already in "Views/Viewportcontroldemo" folder in File Explorer, but may not appear in Visual Studio unless you add it in).

Then you can run the sample code and choose the "Zoom/Scroll Viewport Control" demo.


You mentioned you have a "partial view" that you inserted directly into your "main view". Please make sure the "partial view" is designed so that it can be inserted in to the main view multiple times. For example, the followings are incorrect if present in the "partial view":

- <!DOCTYPE html> : This is an error because a "main view" already contains the "<!DOCTYPE html>", so this line should not be repeated in the "partial view". In fact, all tags that can only occur once (like <html>, <head>, <body>, etc) should not exist in the "partial view", as these tags are already in the "main view".

- <form method="post" id="ZoomScrollTrack">: This can be an error because if the "partial view" more than once, you would end up with multiple <form> tags having the same id. All tags that have a hard coded "id" attribute should not be included in the "partial view". They may need to be replaced with variable ids so they become unique for each instance of the "partial view".

- function setTimeRange(duration) { ...}: This is an error in the "partial view" for similar reasons. It is used more than once so the page will have two different functions with the same name. (The two functions are different because it uses different '@ViewBag.Viewer.ID', so they should not have the same name.


In the example I attached, the "OneChart.cshtml" (which serves as the "partial view" in your code) is referenced but not inserted directly into the "main view", and so it can avoid all these issues.


Regards
Peter Kwan
multi_zoom_scroll.zip
multi_zoom_scroll.zip
28.59 Kb

  Re: partial view realtime chartdirector - mvc.net
Posted by suria on Sep-06-2017 12:44
| Reply | Monitor
Dear Peter,

Thanks for the assistance that you have provided so far. Everything is working now, i managed to use multiple partial view without the use of iframe. I personally feel iframe is a bit heavy. I would like to achieve the below:

The realtime charts should fetch all data from the database for the first time. and then append the new incoming data by polling of interval let say (5 seconds). How do i achieve this without loading the data entirely from beginning to the chart. is there a way to just append the new data to existing viewer if not please assist on how do i get the last datestamp (xaxis) so that i will able to load only the remaining new data to array before passing it to the charts.

thanks
suria

  Re: partial view realtime chartdirector - mvc.net
Posted by Peter Kwan on Sep-06-2017 16:42
| Reply | Monitor
Hi Suria,

You can maintain the data arrays, and append new data to the data arrays, then use the update data arrays to draw the chart. The last timestamp (or datestamp) is in the last element of your "timeStamp" array (the array that contains the x-coordinates of your chart).

You probably already know that to maintain the data arrays across multiple updates, you need to store the data arrays in Session variables or some persistent storage (as ASP.NET will automatically free all regular variables when an HTTP request ends).

In C#, arrays are not resizable, so data cannot be directly appended to an array. So you may want to store the data using List<double> instead (which is resizable). The data arrays can be obtained from the List<double> using the ToArray method of the List.

Hope this can help.

Regards
Peter Kwan