|
 Javascript : Multiple y-axis in single line chart with zoom, scrolling, dragging between axes |
| Posted by Appan Parige on Nov-12-2018 22:57 |
|
Need to apply different colors to a single line chart (e.g: for a scale of 1-10: 1-5 line red color, 5-10 yellow color)
custom labeling
zoom specific area in specific axis
|
| Re: Javascript : Multiple y-axis in single line chart with zoom, scrolling, dragging between axes |
| Posted by Peter Kwan on Nov-14-2018 16:56 |
|
Hi Appan,
Sorry for the late reply.
To apply different colors to different parts of a line based on the x or y values, you may use an x or y zone color as the line color. The ChartDirector download includes some examples of using zone colors, such as:
https://www.advsofteng.com/doc/cdnet.htm#xzonecolor.htm
https://www.advsofteng.com/doc/cdnet.htm#yzonecolor.htm
For custom labelling, I am not sure exactly how you would like to label things. There are several methods. For example:
(a) Use Layer.addCustomDataLabel to custom labels one or more data points.
(b) Use Layer.addExtraField and Layer.setDataLabelFormat to use a custom text array as the labels for the data points.
Regards
Peter Kwan |
| Re: Javascript : Multiple y-axis in single line chart with zoom, scrolling, dragging between axes |
| Posted by Peter Kwan on Nov-14-2018 18:10 |
|
Hi Appan,
I assume you already know that ChartDirector charts can support zooming and scrolling.
For the "zoom specific area in specific axis", I assume you mean you want the zooming to affect only one axis, which is based on user selection (that is, the user can select one axis to zoom, select another axis to zoom, and so on).
Currently, the WebChartViewer in ChartDirector only has one viewport configuration (that is, one set of [left, right, width, height] for the viewport). So when the user zooms in, all axis scales in the chart will zoom in at the same ratio.
For your case, different axis can be at different zoom and scroll positions, so you need to maintain multiple viewport parameters to keep track of the zoom levels of each axis. You may try the following approach:
- For each axis, maintain 4 parameters for the viewport left, right, width and height. These parameters need to be available to both the server and the browser side, so they need to be stored as custom attributes of the JsChartViewer. See:
https://www.advsofteng.com/doc/cdnet.htm#JsChartViewer.setCustomAttr.htm
- When the user selects an axis, sets the viewport of the WebChartViewer to the viewport parameters for that axis. In this way, when the user drags to zoom in, the viewport parameters for that axis would be updated.
- When the user zooms in, a partial update request should be sent to the server to update the chart. In the "PreUpdate" event handler (which occurs just before sending the update request to the server), copy the updated WebChartViewer viewport positions back to the viewport parameters of the selected axis (the parameters that are stored in as custom attributes). The "Zooming and Scrolling with Track Line" sample code is an example that uses the "PreUpdate" handler and custom attributes.
- On the server side, in our sample code, we usually just use something like:
viewer.syncLinearAxisWithViewPort("y", c.yAxis());
For your case, because each axis has its own viewport, the code needs to change to:
... copy viewport parameters of the axis (in the custom attributes) to the WebChartViewer viewport
... apply syncLinearAxisWithViewPort to that axis
... copy viewport parameters of another axis to the WebChartViewer viewport
... apply syncLinearAxisWithViewPort to that axis
....
Regards
Peter Kwan |
|
Forum Home
Search
Message List
Post Message
(Appan Parige)