Sign in to follow this  
domurtag

format tooltips in ZoomLine chart

Recommended Posts

Hi,

 

My JavaScript ZoomLine chart looks like this. The y-axes labels are nicely formatted (currency prefix, number scaling, commas), but the tooltips are unformatted. I would like to format the tooltips identically to the y-axes labels, is this possible? The XML I'm using is shown below (I've omitted the <categories> and <dataset> elements for the sake of brevity):

<chart canvasBorderColor='606060' canvasBorderThickness='1' canvasBorderAlpha='100' lineThickness='0.5' captionOnTop='1' 
divLineColor='606060' divLineAlpha='30' showAlternateVGridColor='0' alternateHGridAlpha='5' showAlternateHGridColor='1' 
alternateHGridColor='101010' baseFontColor='666666' showValues='0' showToolTip='1' pixelsPerPoint='1' showRTMenuItem='0' 
bgColor='F9F9F9' showBorder='0' xAxisNamePadding='5' yAxisNamePadding='5' manageResize='1' showLegend='0' seriesNameInToolTip='0' 
decimals='2' formatNumberScale='1' yAxisValueDecimals='2' thousandSeparatorPosition='3' formatNumber='1' forceDecimals='0' 
forceYAxisDecimals='0' numberScaleValue='1000,1000000,1000000000,1000000000000' numberScaleUnit='k,M,G,T' 
decimalSeparator='.' thousandSeparator=','  valueBelowPivot='1' borderThickness='0' scrollHeight='15' 
compactDataMode='1' dataSeparator='|' captionPadding='25' chartTopMargin='20' chartRightMargin='30' 
lineColor='#080808' drawToolbarButtons='0' yAxisName='Transactions' xAxisName='Time' btnResetChartTitle='Reset' 
btnSwitchToPinModeTitle='Pin' btnSwitchtoZoomModeTitle='Zoom'>
<!-- dataset, categories and trendlines omitted -->
</chart>

Thanks in advance.

Edited by domurtag

Share this post


Link to post
Share on other sites

Hi,

 

My JavaScript ZoomLine chart looks like this. The y-axes labels are nicely formatted (currency prefix, number scaling, commas), but the tooltips are unformatted. I would like to format the tooltips identically to the y-axes labels, is this possible? The XML I'm using is shown below (I've omitted the <categories> and <dataset> elements for the sake of brevity):

<chart canvasBorderColor='606060' canvasBorderThickness='1' canvasBorderAlpha='100' lineThickness='0.5' captionOnTop='1' 
divLineColor='606060' divLineAlpha='30' showAlternateVGridColor='0' alternateHGridAlpha='5' showAlternateHGridColor='1' 
alternateHGridColor='101010' baseFontColor='666666' showValues='0' showToolTip='1' pixelsPerPoint='1' showRTMenuItem='0' 
bgColor='F9F9F9' showBorder='0' xAxisNamePadding='5' yAxisNamePadding='5' manageResize='1' showLegend='0' seriesNameInToolTip='0' 
decimals='2' formatNumberScale='1' yAxisValueDecimals='2' thousandSeparatorPosition='3' formatNumber='1' forceDecimals='0' 
forceYAxisDecimals='0' numberScaleValue='1000,1000000,1000000000,1000000000000' numberScaleUnit='k,M,G,T' 
decimalSeparator='.' thousandSeparator=','  valueBelowPivot='1' borderThickness='0' scrollHeight='15' 
compactDataMode='1' dataSeparator='|' captionPadding='25' chartTopMargin='20' chartRightMargin='30' 
lineColor='#080808' drawToolbarButtons='0' yAxisName='Transactions' xAxisName='Time' btnResetChartTitle='Reset' 
btnSwitchToPinModeTitle='Pin' btnSwitchtoZoomModeTitle='Zoom'>
<!-- dataset, categories and trendlines omitted -->
</chart>

Thanks in advance.

Hi,

 

We would need your complete XML data in order to test the values. In case you have any issues to post it here, please mail it to us at [email protected].

 

Hope this helps. :)

Share this post


Link to post
Share on other sites

Here's the complete chart XML

<chart canvasBorderColor='606060' canvasBorderThickness='1' canvasBorderAlpha='100' lineThickness='0.5' captionOnTop='1' 
divLineColor='606060' divLineAlpha='30' showAlternateVGridColor='0' alternateHGridAlpha='5' showAlternateHGridColor='1' 
alternateHGridColor='101010' baseFontColor='666666' showValues='0' showToolTip='1' pixelsPerPoint='1' showRTMenuItem='0' 
bgColor='F9F9F9' showBorder='0' xAxisNamePadding='5' yAxisNamePadding='5' manageResize='1' showLegend='0' seriesNameInToolTip='0' 
decimals='2' formatNumberScale='1' yAxisValueDecimals='2' numberPrefix='₹' thousandSeparatorPosition='2,3' formatNumber='1' 
forceDecimals='0' forceYAxisDecimals='0' numberScaleValue='1000,1000000,1000000000,1000000000000' 
numberScaleUnit='k,M,G,T' decimalSeparator='.' thousandSeparator=',' caption='' valueBelowPivot='1' borderThickness='0' 
scrollHeight='15' compactDataMode='0' dataSeparator='|' captionPadding='25' chartTopMargin='20' chartRightMargin='30' 
lineColor='#080808' drawToolbarButtons='0' yAxisName='Amount' xAxisName='Time' btnResetChartTitle='Reset' 
btnSwitchToPinModeTitle='Pin' btnSwitchtoZoomModeTitle='Zoom'>
  <categories>
    <category label='0s' color='#080808' />
    <category label='5s' color='#080808' />
    <category label='10s' color='#080808' />
    <category label='15s' color='#080808' />
    <category label='20s' color='#080808' />
    <category label='25s' color='#080808' />
    <category label='30s' color='#080808' />
    <category label='35s' color='#080808' />
    <category label='40s' color='#080808' />
    <category label='45s' color='#080808' />
    <category label='50s' color='#080808' />
    <category label='55s' color='#080808' />
  </categories>
  <dataset>
    <set value='4244.988700394274' />
    <set value='1203.5540076350278' />
    <set value='2411.103542620217' />
    <set value='1593.9894833500462' />
    <set value='4915.008290257828' />
    <set value='1000.8177431602104' />
    <set value='1959.7378825096928' />
    <set value='3735.249238928299' />
    <set value='2445.9970704054385' />
    <set value='1394.9257765851612' />
    <set value='1051.581629581419' />
    <set value='4823.4167406246725' />
  </dataset>
  <trendlines>
    <line startValue='2565.030842171024' displayvalue=' ' dashed='1' />
  </trendlines>
</chart>
Edited by domurtag

Share this post


Link to post
Share on other sites

Hey,

 

If you are rendering ZoomLine chart in JavaScript mode, the cross-hair has been implemented, which will depict showValues exactly as mentioned in the dataset value attribute in the chart in order to

improve the performance and hence does not support toolText attribute. 

 

Thanks.

Share this post


Link to post
Share on other sites

If I understand, you're saying that the tooltips will be formatted the same as in this XML

    <set value='1000.8177431602104' />

It's not possible to format the number in the XML, e.g. the following will not work

    <set value='$1K' />

so therefore it's not possible to format the tooltips, is that right?

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this