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

Message ListMessage List     Post MessagePost Message

  two viewport charts within the same page
Posted by Andreas on May-02-2017 13:41
| Reply | Monitor
Hi,
I'm evaluating CD 6.0 for Coldfusion on Windows 7 and I'd like to have two independent charts , each having a viewport and a trackline  according to viewportcontroldemo.cfm - but two of them in one page...
However  something goes wrong because after the first partial update the second chart's viewport and trackline doesn't work any more.
I wonder if you cold send me an example. I am stuck here.
Thank you and best regards,
Andreas

  Re: two viewport charts within the same page
Posted by Peter Kwan on May-02-2017 22:28
| Reply | Monitor
Attachments:
Hi Andreas,

If you have two charts that can perform partialUpdate, in the partialUpdate code, it needs to first distinguish which chart is sending the partialUpdate request and handle it accordingly.

Suppose you have two chart viewers called "viewer" and "viewer2". The partialUpdate code becomes:

// Create the WebChartViewer object
viewer = cd.WebChartViewer(GetPageContext(), "chart1");
viewer2 = cd.WebChartViewer(GetPageContext(), "chart2");

if (viewer.isPartialUpdateRequest()) {
    if (viewer.getSenderClientId() == viewer.getId()) {
        // "viewer" sends partial update
        .... update the chart for viewer ....

        viewer.partialUpdateChart(GetPageContext());
        return;
    } else {
        // "viewer2" sends partialUpdate
        .... update the chart for viewer ....

        viewer2.partialUpdateChart(GetPageContext());
        return;
}
}

I have attached a complete example for your reference. It is based on the original "Zooming and Scrolling with Viewport Control" sample code. I duplicated the code to create two independent charts that have their independent viewport controls.

Hope this can help.

Regards
Peter Kwan
viewportcontroldemo.cfm
viewportcontroldemo.cfm
24.35 Kb

  Re: two viewport charts within the same page
Posted by Andreas on May-03-2017 15:20
| Reply | Monitor
Attachments:
Hi Peter,
this works like a charm, thank you very much!

I've two other questions ;-)

1) Parameter for partialUpdate
I have a "Show Value" button that adds additional layers to my chart. Currently this only works if I refresh the whole page. Is it possible to pass a parameter to the JsChartViewer and let the partialUpdate  do this?

2) Show "calendar week" in viewport's x-axis
I'd like to have the week number displayed as label of the x-axis, e.g. 2017-01  ... 2017-56
This is a problem for me because in the viewport the xAxis is a date object.
I have a custom function to calculate the week number from the day but I found no way to use it for xAxis label formatting...
My workaraound is to use an additional line layer with all values 0 and an extra field with the calendar week strings together with setDataLabelFormat("{field0}");
However this doesn't look good because the label should better be below the xAxis and I also have to solve the problem of overlapping labels...
Do you have an idea?

Thank you very much for your help!

BR Andreas
calendar_week.PNG

  Re: two viewport charts within the same page
Posted by Peter Kwan on May-03-2017 17:36
| Reply | Monitor
Hi Andreas,

1) Parameter for partialUpdate

You can use JsChartViewer.setCustomAttr to set a custom attribute that shows whether you want to display the layer or not. On the server side, you can use WebChartViewer.getCustomAttr to get the attribute during partialUpdate, and draw the chart based on that attribute.

The "Zooming and Scrolling with Track Line" sample code demonstrates this method. In that sample code, you can see there are several check boxes on the left side, which can be used to configure whether to plot a particular line. It uses the custom attributes to transfer the states of the check boxes to the server side.


2) Show "calendar week" in viewport's x-axis

For week numbers, I suggest you use custom labeling. The steps are as follows:

- In the original sample code, there is a line syncDateAxisWithViewPort and also several lines to format the x-axis labels. Please remove all of them, and use the following code instead:

startDate = cd.NTime(viewer.getValueAtViewPort("x", viewer.getViewPortLeft()));
endDate = cd.NTime(viewer.getValueAtViewPort("x", viewer.getViewPortLeft() + viewer.getViewPortWidth()));
c.xAxis().setDateScale(startDate, endDate, cd.NoValue);

..... use your own method to compute the position (the Date) and text for the labels you want to appear, then add the labels using something like:

c.xAxis().addLabel(labelDate, labelText);

To avoid labels overlapping, you need to determine the maximum number of labels that can fit on the chart. It depends on your chart size, font size and the label format. You can then determine the spacing between the labels (as you know the startDate and endDate). As the label spacing must be a multiple of 7 days for your case, you can round the spacing up to the next multiple of 7 days. Now, you just need to determine where is the first label, and you can use a loop to generate all the labels with your chosen spacing.

Regards
Peter Kwan