domurtag

I managed to resolve this by URL-encoding the tooltip, i.e. var fusionFormat = "&label=" + data.label + "&value=" + data.value + "&toolText=" + encodeURIComponent(data.toolText); this.chart.feedData(fusionFormat);

Hi, I use the feedData() function to add data to a RealTimeLine JavaScript chart, e.g. var fusionFormat = "&label=" + data.label + "&value=" + data.value + "&toolText=before,after"; this.chart.feedData(fusionFormat); However, if the tooltip text contains a comma, only the text before the comma is displayed, so in the example about the tooltip displays only "before". Is it possible to include commas in tooltips that are added via feedData() function? Thanks in advance.

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?

I tried adding a toolText attribute to each <set> element, but it didn't change the tooltips.

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>

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.

Thanks for your reply

I'm rendering a ZoomLine using JavaScript (rather than Flash). As you can see in this screenshot, the tooltips for data points that are close to the y-axis are being truncated because there is not enough space between the data point and the y-axis to display the full tooltip. I looked for an option to change the z-index of the tooltip, or add some left padding, but didn't find anything. The chart XML follows (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" decimals="2" sDecimals="2" formatNumberScale="0" forceDecimals="0" decimalSeparator="." thousandSeparator="," showRTMenuItem="0" bgColor="F9F9F9" showBorder="0" xAxisNamePadding="5" yAxisNamePadding="5" manageResize="1" showLegend="0" thousandSeparatorPosition="3" showValue="1" valueBelowPivot="1" borderThickness="0" scrollHeight="15" compactDataMode="0" dataSeparator="|" captionPadding="25" chartTopMargin="20" chartRightMargin="30" numberPrefix="" lineColor="#080808" drawToolbarButtons="0" yAxisName="Transactions" xAxisName="Time" btnResetChartTitle="Reset" btnSwitchToPinModeTitle="Pin" btnSwitchtoZoomModeTitle="Zoom"> <!-- categories and dataset elements omitted --> </chart>

I'm rendering a StackedArea2D using JavaScript (rather than Flash). As you can see in this screenshot, the labels in the legend is being wrapped, which looks ugly and makes the legend difficult to read. The chart XML follows (catategories and datasets omitted for 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" decimals="2" sDecimals="2" formatNumberScale="1" forceDecimals="0" decimalSeparator="." thousandSeparator="," showRTMenuItem="0" bgColor="F9F9F9" showBorder="0" xAxisNamePadding="5" yAxisNamePadding="5" manageResize="1" showLegend="1" thousandSeparatorPosition="2,3" caption="Currency Distribution" numberPrefix="$" adjustDiv="0" yAxisMaxValue="100000000.00" yAxisName="Currency Supply" legendNumColumns="2" interactiveLegend="0" labelStep="8" legendPosition="BOTTOM" minimiseWrappingInLegend="1" legendIconScale="0" stack100Percent="0" showPercentValues="0" showPercentInToolTip="0"> <!-- categories and datasets omitted --> </chart> A lesser problem is that a gradient is being used for the series fill colors, is it possible to use a solid color instead?

Hi, I'm using Fusion Charts v. 3.2.4-sr1.9888 and am using the JavaScript charts renderer. When I display a Zoom Line chart, the tooltips appear when the mouse is hovered over a data point. However, when the chart is zoomed in, most of the tooltips do not appear on mouseover. If I reset the chart to the default zoom level, they appear again. Is there a way to make the tooltips work at all zoom levels? My chart XML is show below (dataset omitted for brevity). <chart canvasBorderColor='606060' canvasBorderThickness='1' canvasBorderAlpha='100' lineWidth='1' divLineColor='606060' divLineAlpha='30' showAlternateVGridColor='0' alternateHGridAlpha='5' showAlternateHGridColor='1' alternateHGridColor='101010' baseFontColor='666666' showValues='0' decimals='2' sDecimals='2' formatNumberScale='0' forceDecimals='0' decimalSeparator='.' thousandSeparator=',' showRTMenuItem='0' bgColor='F9F9F9' showBorder='0' xAxisNamePadding='5' yAxisNamePadding='5' manageResize='1' showLegend='0' thousandSeparatorPosition='3' caption='Number of Transactions' showValue='1' valueBelowPivot='1' borderThickness='0' scrollHeight='10' captionPadding='5' chartTopMargin='30' chartRightMargin='30' showToolTip='1' numberPrefix='' lineColor='#080808' drawToolbarButtons='0' yAxisName='' xAxisName='' btnResetChartTitle='Reset' btnSwitchToPinModeTitle='Pin' btnSwitchtoZoomModeTitle='Zoom'> <categories> <category label=' '/> </categories> <dataset> <set value='0'/> </dataset> <trendlines> <line startValue='' displayvalue=' ' dashed='1'/> </trendlines> </chart>

Thanks a lot, the labels are displayed properly after switching to the JavaScript charts

I'm using the Column 2D chart in Fusion Charts v. 3.2.4. Sometimes when the x-axis labels are too long, they are truncated with ellipsis, e.g. see the label circled below: Even though I've added useEllipsesWhenOverflow="0" to the chart XML the labels are still being truncated, why? The chart XML is shown in full below: <?xml version="1.0"?> <chart canvasBorderColor="606060" canvasBorderThickness="1" canvasBorderAlpha="100" lineWidth="1" divLineColor="606060" divLineAlpha="30" showAlternateVGridColor="0" alternateHGridAlpha="5" showAlternateHGridColor="1" alternateHGridColor="101010" baseFontColor="666666" showValues="0" decimals="2" sDecimals="2" formatNumberScale="0" thousandSeparatorPosition="3" forceDecimals="0" decimalSeparator="." thousandSeparator="," numberPrefix="" showRTMenuItem="0" bgColor="F3F3F3" showBorder="0" xAxisNamePadding="5" yAxisNamePadding="5" manageResize="1" showLegend="0" caption="eCurrency Holder Distribution" yAxisName="Count" xAxisName="Currency Range" plotSpacePercent="0" slantLabels="1" useEllipsesWhenOverflow="0"> <set label="long label" value="58" color="#080808"/> <set label="long label" value="45" color="#080808"/> <!-- remainder of chart data omitted --> </chart>

Hi, I'm using an angular gauge which is updated in real-time with values received from the server. If the upper limit of the gauge is currently 200, and I receive a value of 250, then I want to increase the upper limit of the gauge to something slightly larger than 250 before displaying this new value. My effort at implementing this is shown below: chart.addEventListener("RealtimeUpdateComplete", function (event, parameter) { var newValue = event.sender.getData(1); var currentUpperLimit = parseInt(chart.getChartAttribute("upperLimit")); if (newValue > currentUpperLimit) { var newUpperLimit = newValue * 1.2; chartRef.setChartAttribute("upperLimit", newUpperLimit); chartRef.setChartAttribute("upperLimitDisplay", newUpperLimit); } } ); This seemed to be the right approach, however when a value is received from the server which is larger than the upper limit of the gauge, the variable newValue is always set to 0. Strangely, this variable is set correctly when the value received is lower than the gauge's upper limit. Is there another way to change the upper limit of the gauge at runtime so that it always exceeds the current value of the gauge?