Akash Biswas

  • Content count

  • Joined

  • Last visited

About Akash Biswas

  • Rank
    Junior Member

Recent Profile Visitors

464 profile views
  1. Hi, Yes, you could configure the bgImage using the below set of attributes accordingly. bgImageHAlign, bgImageVAlign : used to align the image vertically and horizontally, respectively. bgImageScale : used to increase or decrease the scale of the image. bgImageDisplayMode : used to specify the mode in which the background image is to be displayed. Refer to the documentation link : http://www.fusioncharts.com/dev/basic-chart-configurations/border-and-background.html#customizing-the-background-image Thanks, Akash.
  2. Hi, Attribute "canvasBgAlpha" reference link : http://www.fusioncharts.com/dev/basic-chart-configurations/canvas.html#changing-the-canvas-fill-color Attribute "plotFillAlpha" reference link : http://www.fusioncharts.com/dev/basic-chart-configurations/data-plot.html#customizing-data-plot-transparency Hope this helps. Thanks, Akash.
  3. Hi, Are you looking for any sort of implementation as in the below fiddle : http://jsfiddle.net/Akash008/bgv553mj/34/ This has the alpha set, to make it transparent so that the image in the background is visible, and the labels are visible in the foreground. Thanks, Akash.
  4. Hi Surya, FusionCharts Box and Whisker chart does not support horizontal box plots instead of vertical. As of now it is implemented for only vertical box plots. For further reference check the documentation link : http://www.fusioncharts.com/dev/chart-guide/box-and-whisker-chart/introduction.html Thanks, Akash.
  5. Hi Andreia, The possible gradient configuration in Horizontal Linear Gauge could be done using the attributes "gaugeFillMix" and "gaugeFillRatio". That specifies the gradient fill formula for the linear gauge scale. Example: {light-10},{light-20},{light-60} And the fill ratio specifies the ratio of each color separated by comma. Example : "30,70" Please check this sample fiddle : http://jsfiddle.net/Akash008/3fweng4a/ For further reference check the documentation link : http://www.fusioncharts.com/dev/gauge-and-widgets-guide/linear-gauge/configuring-gauge-cosmetics.html#configuring-the-gauge-gradient-mix Hope this helps. Thanks, Akash
  6. Hi, In Multi-series Bar Chart or in any chart type that supports Trend-line feature will have it across the entire chart. It is not possible to restrict the trend-line to any dataset. Step Line Charts are multi-series in nature. But it cannot be combined with any other charts like Bar chart. For further reference on Step Line chart check the documentation link : http://www.fusioncharts.com/dev/chart-guide/step-line-chart/introduction.html Alternatively, you can check the Line Annotations instead of Trend-line, that can be placed anywhere on the chart as you require. Please refer to the documentation : http://www.fusioncharts.com/dev/advanced-chart-configurations/annotations/creating-annotations/creating-shape-annotations.html#line Please note : Annotations are static in nature. Thanks, Akash.
  7. Hi Dave, In the provided fiddle, the width of the chart is set in percentage(100%). Hence, FusionCharts charts will dynamically resize the width, if the container div element width is changed. This will also dynamically show/hide the x-axis labels(chart elements) based on the available space in the current window/div size, irrespective of the attributes labelDisplay='rotate' labelStep='1' being set at chart-level. Please find the same chart with fixed width(in pixels) large enough to accommodate the huge number of labels : https://jsfiddle.net/Akash008/36Lwzqd8/ Also note, you have several category objects set to "showLabel" as "0", which will not show up on chart resize, so the discontinuous labels are displayed. However, as a suggestion, you could remove all the "showLabel" entries in the category-level, and set the "labelSteps"(Example - 20 or 30) accordingly to get the labels uniformly displayed on resize as well. Please find the sample fiddle : https://jsfiddle.net/Akash008/36Lwzqd8/1/ Hope this helps. Thanks, Akash.
  8. Hi James, 1. For the quoted text in your previous reply, the rectangle annotation need to be configured manually to set its x, y, toX and toY attributes for positioning. It cannot be dynamically resized at run-time as stated earlier. 2. However, your suggested technique, Math.min(200, 300) JS function can be used to set absolute values in "x" or "y" attributes only. But it cannot accept the Macros as its parameters. "Math.min( $chartStartX+5, $dataset.0.set.0.x-15 )" wont work. Since macros are strings, and are calculated internally if provided to x, y attributes. 3. Your query for getting the "x", "y" values using events is possible. Please check the sample fiddle : https://jsfiddle.net/Akash008/no1mvauc/ (Check the console) Note : This will fetch the value assigned to the "x" or "y" attribute. If Macros are used, it returns the Macro string itself, not the absolute value. As FusionCharts annotations are static in nature, dynamic resizing based on number of dataplots available is not possible. Thanks, Akash.
  9. Hi James, FusionCharts feature of Annotations are itself static in nature, though it can be positioned dynamically using macros. But, if the annotation is going out of the chart canvas, it need to be manually configured accordingly. For the instance in this fiddle, the group of annotations that is chopped off. The Text annotation can be split into two lines using {br} tag so that its length gets reduced, the Rectangle annotation need to be adjusted accordingly, to keep it within the chart canvas. Please check the modified fiddle : http://jsfiddle.net/Akash008/9s8tvgqc/ Hope this helps. Thanks, Akash.
  10. Hi James, FusionCharts Text annotation item-level attribute "align" defines the horizontal alignment of the text to left, center (default), or right. This alignment is with respect to the position where it is placed. In the provided fiddle, the Text annotation is placed on above another Rectangle(Shape) annotation. The text is positioned to the center of the column plot using the macro "$dataset.0.set.1.x". So, "align": "left" will align the text's leftmost character with respect to the position set using macros. and not with respect to the rectangle annotation. Similarly, the text's rightmost character is aligned with respect to the position, when using "align": "right". Please refer to the modified fiddle(only having Text annotation aligned) : http://jsfiddle.net/Akash008/mvufjvy2/ Hope this helps. Feel free to ask if you still have any query regarding annotation alignment. Thanks, Akash.
  11. Hi James, FusionCharts provides the option to show the custom Annotations on the chart both in foreground as well as in background. You need to set the group-level attribute "showBelow" to "0" to display the annotation on top always. Check the modified fiddle : http://jsfiddle.net/Akash008/3jd9kq6q/ Please find the link below for further reference to configure annotations : http://www.fusioncharts.com/dev/advanced-chart-configurations/annotations/grouping-annotations.html#creating-annotation-groups Thanks, Akash.
  12. Hi, To set the semi-transparent colors for the column plots in Candlestick chart you need to set the data-level attribute "alpha" for individual data objects. Please check this sample for reference : http://jsfiddle.net/Akash008/Lr0ebb33/6/ Hope this helps.
  13. Hi Mayur, Please check this fiddle : http://jsfiddle.net/Akash008/8z3om8e4/ The trend-line is plotted on the Secondary y-axis in the above sample. Use the below attribute entry in the "line" object : "parentYAxis": "s" Hope this helps.
  14. Hi Mayur, Yes, you can achieve your stated requirement with the help of a JavaScript function, that will modify your dataSource for those data objects having values greater than 100. That is, the "color" attribute only for the data object value greater that 100 will be set to GREEN. Then render the chart with the modified dataSource. Please check a sample fiddle implementing the above technique : http://jsfiddle.net/Akash008/3a5txvtt/
  15. Hi, The current functionality of Legend interactivity in any Multi-series chart, is when you click on a legend item it hides/shows its respective series, irrespective of other series are hidden/shown. Your requirement is to show the series(Example - A series), only when its respective legend is clicked. Then on legend item click of another series(Example - B series), its series( will be shown, hiding the previous series A. This could be achieved with the below mentioned way : 1. Initially, all the series dataset must be set to visible - false. 2. On "legendItemClicked" event function, first fetch the dataSource from the sender property of the "eventObj". Then iterate through all the dataset objects and set the "visible" attribute to "0" to hide all the series. Then, only the clicked Legend series is enabled using the dataSet index using "dataObj" event parameter. Example : eventObj.sender.args.dataSource.dataset[dataObj.legendItemIndex].visible = 1; 3. Finally, set the modified "sender.args.dataSource" using the API method "setJSONData()" as below : eventObj.sender.setJSONData(eventObj.sender.args.dataSource); Please find a sample fiddle implementing your required functionality using the above technique : http://jsfiddle.net/Akash008/yg6o91gf/2/ Find the links below for further references : Event : http://www.fusioncharts.com/dev/api/fusioncharts/fusioncharts-events.html#event-legendItemClicked API method : http://www.fusioncharts.com/dev/api/fusioncharts/fusioncharts-methods.html#setJSONData Thanks, Akash.