Multiple Y axis in line chart

Multiple Y axis in line chart

Posted by: sachinhegde70 on 14 September 2017, 11:57 am EST

• 

  sachinhegde70

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:57 am EST

  How to get multiple Y axis corresponds to different values of X however there will be only one X axis.

  Currently I have the following code

  <wj-flex-chart #zoomChart plotMargin=“NaN NaN NaN 80” chartType=“Line” bindingX=“xVal” [itemsSource]=“data”>
  
  <wj-flex-chart-legend position=“Right”></wj-flex-chart-legend>
  
  <wj-flex-chart-axis wjProperty=“xAxis” [axisLine]=“false” (rangeChanged)=“rangeChanged()”></wj-flex-chart-axis>
  
  <wj-flex-chart-axis wjProperty=“yAxis” binding=“close” (rangeChanged)=“rangeChanged()”></wj-flex-chart-axis>
  
  <wj-flex-chart-series binding=“IInductor” name=“IInductor” axisX=“xAxis” axisY=“yAxis”></wj-flex-chart-series>
  
  </wj-flex-chart>

• 

  manish-gupta1

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:57 am EST

  Hi,
  
  As per understanding, you would like to display no of Y axis equals to no of series in the FlexChart. If yes, currently , FlexChart supports only two Y axis.

  Please refer to the following demo sample that implements the same:

  http://demos.wijmo.com/5/Angular2/Explorer/Explorer/#/chart/axes

  Thanks,
  
  Manish Kumar Gupta

• 

  sachinhegde70

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:57 am EST

  Thank you Manish,

  We wanted more no of Y axis, any alternative solution available?

• 

  manish-gupta1

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:57 am EST

  Hi,
  
  We are sorry, there is no alternative solution.
  
  We have created an enhancement request for this with tracking id 250314. This will be implemented in the future if this is found feasible.
  
  We will let you know as soon as we get any update on this.

  Thanks,
  
  Manish Kumar Gupta

• 

  manish-gupta1

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:57 am EST

  Hi,
  
  Here are the answers for your queries:
  
  >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
  
  We want to format the x axis to scientific notation
  
  <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<

  For this, you need to format JSON data before binding to FlexChart.
  
  For reference, please see the attached sample that implements the same.

  >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
  
  Pan demo(http://demos.wijmo.com/5/Angular2/FlexChartZoom/FlexChartZoom/) showing loading of the chart area after mouse up (Not showing the chart area on the go).
  
  <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
  
  The sample is working fine at our end.
  
  The working of the sample is following:

  • Chart area shows on page load automatically, it may take some time in loading due to poor network connection.
  • You can zoom in using mouse scroll up and zoom out by scroll down mouse.
  • If you would like to use Pan modde, click and drag mouse to zoom in/out.

  >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
  
  Annotation layer (changing z index of the annotation to place annotation above or below on an element)
  
  <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
  
  Just for information,
  
  Since FlexChart is rendered using SVG element, it does not support Z-Index. For this, you need to render element according to desired sequence because last element always displays on top.

  Alternatively, you can set opacity using style property.

  For reference, please see the attached sample that implements the sample.

  >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
  
  Tooltip
  
  <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<

  For this, you need to handle mousemove event and change tooltip content accordingly.

  >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
  
  Auto-scaling and Fixed-scaling of axis
  
  <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
  
  As per our understanding, you would like to set min and max value for X/Y axis. If yes , you need to set axis min and max property.

  >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
  
  How to make Interpolation configuration (Linear interpolation vs quadratic or cubic) : different ways of connecting datapoints.
  
  <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
  
  Currenty, there is no way to accomplishing this. We have escalated this issue to our development team for further discussion with tracking id 250937. As soon as we get any update on this, we will let you know.

  Currently, Wijmo 5 does not support Histogram Chart. We have created an enhancement request for this with tracking id 250938. This will be implemented in the future if found feasible.

  Hope it clears!!

  Thanks,
  
  Manish Kumar Gupta

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 20 January 2018, 9:10 am EST

  Hi ,
  
  We are sorry for the late reply.

  Do the you want analytics module?

  http://demos.wijmo.com/5/Angular/FlexChartAnalytics/FlexChartAnalytics/#/trendline

  ~Manish

• 

  deawang

  • Post Options:
  • Link
    Copy

  Posted 30 September 2019, 1:36 pm EST

  how is the request for multiple Y axis going, created in tracking id 250314? we are looking for this feature as well.