ithurlow

Hello, I'm creating a chart that has up to 20 bars, and the labels all show up in Chrome. However, if you run the same code in Firefox or IE, you see label stepping happen when it shouldn't. Here's a JSFiddle that shows the issue: http://jsfiddle.net/ghtm181q/1/ Is there a work-around for this? I'm currently running FC version 3.4.1, but it appears to still be an issue in 3.10.1. Thank you.

I noticed the "clipPath" ID field in the generated HTML does not conform to W3C standards in some cases. It appears this ID is generated by some kind of hash, which could start with a number. If the hash does start with a number, this creates invalid XML. This doesn't matter for web browsers, but I'm attempting to pull the SVG into a PDF using Batik, which complains that the XML is incorrect. Here is an example: <span id="myChart" class="fusioncharts-container" style="position: relative; text-align: left; line-height: normal; display: inline-block; zoom: 1; font-weight: normal; font-variant: normal; font-style: normal; text-decoration: none; padding: 0px; margin: 0px; border: none; width: 550px; height: 90px;"><svg height="90" version="1.1" width="550" xmlns="http://www.w3.org/2000/svg" id="raphael-paper-349" style="overflow: hidden; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-user-select: none; cursor: default; position: relative; background-color: rgb(255, 255, 255);"><desc>Bar Chart</desc><defs> <clipPath id="93E06B48-28A1-4AFB-BF62-4E09B356A36C"> <rect x="118" y="15" width="417" height="41" transform="matrix(1,0,0,1,0,0)"></rect></clipPath></defs><g class="raphael-group-350-background"><rect x="0" y="0" width="550" height="90" stroke="none" fill-opacity="0.5" fill="#ffffff" rx="0" ry="0" style="stroke: none; fill-opacity: 0.5; fill: rgb(255, 255, 255);"></rect><rect x="0" y="0" width="550" height="90" stroke="#767575" stroke-opacity="0.5" stroke-width="0" fill="none" rx="0" ry="0" style="stroke: rgb(118, 117, 117); stroke-opacity: 0.5; fill: none;"></rect></g><g class="raphael-group-357-canvas"><rect x="118" y="15" width="417" height="41" rx="0" ry="0" stroke-width="0" stroke="#545454" stroke-opacity="0" stroke-linejoin="miter" fill="none" style="stroke: rgb(84, 84, 84); stroke-opacity: 0; stroke-linejoin: miter; fill: none;"></rect><rect x="118" y="15" width="417" height="41" rx="0" ry="0" stroke-width="0" stroke="none" fill-opacity="1" fill="#ffffff" style="stroke: none; fill-opacity: 1; fill: rgb(255, 255, 255);"></rect></g><g class="raphael-group-360-axisbottom"><g class="raphael-group-363-y-axis-bands"></g><g class="raphael-group-369-x-axis-bands"><rect x="201.4" y="15" width="83.4" height="41" fill-opacity="0" fill="#767575" stroke-width="0" rx="0" ry="0" stroke="#000000" style="fill-opacity: 0; fill: rgb(118, 117, 117); stroke: rgb(0, 0, 0);"></rect><rect x="368.20000000000005" y="15" width="83.39999999999998" height="41" fill-opacity="0" fill="#767575" stroke-width="0" rx="0" ry="0" stroke="#000000" style="fill-opacity: 0; fill: rgb(118, 117, 117); stroke: rgb(0, 0, 0);"></rect></g><g class="raphael-group-375-x-axis-bands"></g><g class="raphael-group-365-y-axis-lines"></g><g class="raphael-group-371-x-axis-lines"><path d="M201.4,15L201.4,56" stroke="#ffffff" stroke-opacity="1" stroke-width="1" stroke-dasharray="1,2" fill="none" shape-rendering="crispEdges" style="stroke: rgb(255, 255, 255); stroke-opacity: 1; fill: none; shape-rendering: crispedges;"></path><path d="M284.8,15L284.8,56" stroke="#ffffff" stroke-opacity="1" stroke-width="1" stroke-dasharray="1,2" fill="none" shape-rendering="crispEdges" style="stroke: rgb(255, 255, 255); stroke-opacity: 1; fill: none; shape-rendering: crispedges;"></path><path d="M368.20000000000005,15L368.20000000000005,56" stroke="#ffffff" stroke-opacity="1" stroke-width="1" stroke-dasharray="1,2" fill="none" shape-rendering="crispEdges" style="stroke: rgb(255, 255, 255); stroke-opacity: 1; fill: none; shape-rendering: crispedges;"></path><path d="M451.6,15L451.6,56" stroke="#ffffff" stroke-opacity="1" stroke-width="1" stroke-dasharray="1,2" fill="none" shape-rendering="crispEdges" style="stroke: rgb(255, 255, 255); stroke-opacity: 1; fill: none; shape-rendering: crispedges;"></path><path d="M535,15L535,56" stroke="#ffffff" stroke-opacity="1" stroke-width="1" stroke-dasharray="1,2" fill="none" shape-rendering="crispEdges" style="stroke: rgb(255, 255, 255); stroke-opacity: 1; fill: none; shape-rendering: crispedges;"></path></g><g class="raphael-group-377-x-axis-lines"></g><g class="fusioncharts-xaxis-0-gridlabels"><text class="fusioncharts-label" fill="#333333" x="100" y="25.25" text-anchor="end" transform="matrix(1,0,0,1,0,0)" stroke="none" style="fill: rgb(51, 51, 51); text-anchor: end; stroke: none;"><tspan dy="2.5" x="100">Test Bar</tspan></text><text class="fusioncharts-label" fill="#333333" x="100" y="45.75" text-anchor="end" transform="matrix(1,0,0,1,0,0)" stroke="none" style="fill: rgb(51, 51, 51); text-anchor: end; stroke: none;"><tspan dy="2.5" x="100">Test No Bar</tspan></text></g><g class="fusioncharts-yaxis-0-gridlabels"><text class="fusioncharts-label" fill="#333333" x="118" y="75" text-anchor="middle" transform="matrix(1,0,0,1,0,0)" stroke="none" style="fill: rgb(51, 51, 51); text-anchor: middle; stroke: none;"><tspan dy="-4.6953125" x="118">0</tspan></text><text class="fusioncharts-label" fill="#333333" x="201.4" y="75" text-anchor="middle" transform="matrix(1,0,0,1,0,0)" stroke="none" style="fill: rgb(51, 51, 51); text-anchor: middle; stroke: none;"><tspan dy="-4.6953125" x="201.4">8</tspan></text><text class="fusioncharts-label" fill="#333333" x="284.8" y="75" text-anchor="middle" transform="matrix(1,0,0,1,0,0)" stroke="none" style="fill: rgb(51, 51, 51); text-anchor: middle; stroke: none;"><tspan dy="-4.6953125" x="284.8">16</tspan></text><text class="fusioncharts-label" fill="#333333" x="368.20000000000005" y="75" text-anchor="middle" transform="matrix(1,0,0,1,0,0)" stroke="none" style="fill: rgb(51, 51, 51); text-anchor: middle; stroke: none;"><tspan dy="-4.6953125" x="368.20000000000005">24</tspan></text><text class="fusioncharts-label" fill="#333333" x="451.6" y="75" text-anchor="middle" transform="matrix(1,0,0,1,0,0)" stroke="none" style="fill: rgb(51, 51, 51); text-anchor: middle; stroke: none;"><tspan dy="-4.6953125" x="451.6">32</tspan></text><text class="fusioncharts-label" fill="#333333" x="535" y="75" text-anchor="middle" transform="matrix(1,0,0,1,0,0)" stroke="none" style="fill: rgb(51, 51, 51); text-anchor: middle; stroke: none;"><tspan dy="-4.6953125" x="535">40</tspan></text></g><g class="fusioncharts-yaxis-1-gridlabels"></g><g class="raphael-group-380-axis-name"></g><g class="raphael-group-394-axis-lines"><path d="M118,56.5L535,56.5" stroke="#000000" stroke-opacity="1" stroke-width="1" fill="none" style="stroke: rgb(0, 0, 0); stroke-opacity: 1; fill: none;"></path></g><g class="raphael-group-398-axis-lines"><path d="M117.5,15L117.5,57" stroke="#999999" stroke-opacity="1" stroke-width="1" fill="none" style="stroke: rgb(153, 153, 153); stroke-opacity: 1; fill: none;"></path></g></g><g class="raphael-group-351-dataset"><g class="raphael-group-400-bars" clip-path="url('#93E06B48-28A1-4AFB-BF62-4E09B356A36C')"><rect x="117" y="19" width="314" height="12" rx="0" ry="0" fill-opacity="1" fill="#536c82" stroke="#333333" stroke-opacity="1" stroke-width="0" stroke-dasharray="0" stroke-linejoin="miter" style="fill-opacity: 1; fill: rgb(83, 108, 130); stroke: rgb(51, 51, 51); stroke-opacity: 1; stroke-linejoin: miter;"></rect><rect x="117" y="40" width="1" height="12" rx="0" ry="0" fill-opacity="1" fill="#536c82" stroke="#333333" stroke-opacity="1" stroke-width="0" stroke-dasharray="0" stroke-linejoin="miter" style="fill-opacity: 1; fill: rgb(83, 108, 130); stroke: rgb(51, 51, 51); stroke-opacity: 1; stroke-linejoin: miter;"></rect></g></g><g class="raphael-group-361-axistop"><g class="raphael-group-362-y-axis-bands"></g><g class="raphael-group-368-x-axis-bands"></g><g class="raphael-group-374-x-axis-bands"></g><g class="raphael-group-364-y-axis-lines"></g><g class="raphael-group-370-x-axis-lines"></g><g class="raphael-group-376-x-axis-lines"></g><g class="fusioncharts-xaxis-0-gridlabels"></g><g class="fusioncharts-yaxis-0-gridlabels"></g><g class="fusioncharts-yaxis-1-gridlabels"></g></g><g class="fusioncharts-datalabels" transform="matrix(1,0,0,1,0,0)"><text class="fusioncharts-label" font-size="10px" text-anchor="start" fill-opacity="1" fill="#536c82" x="435" y="25" stroke="none" style="font-size: 10px; text-anchor: start; fill-opacity: 1; fill: rgb(83, 108, 130); stroke: none;"><tspan dy="3" x="435">30</tspan></text><text class="fusioncharts-label" font-size="10px" text-anchor="start" fill-opacity="1" fill="#536c82" x="120" y="46" stroke="none" style="font-size: 10px; text-anchor: start; fill-opacity: 1; fill: rgb(83, 108, 130); stroke: none;"><tspan dy="3" x="120">0</tspan></text></g><g class="raphael-group-352-hot"><rect x="117" y="19" width="314" height="12.299999999999999" rx="0" ry="0" stroke="#c0c0c0" stroke-opacity="0.000001" stroke-width="0" fill-opacity="0.000001" fill="#c0c0c0" style="stroke: rgb(192, 192, 192); stroke-opacity: 0.000001; fill-opacity: 0.000001; fill: rgb(192, 192, 192);"></rect><rect x="115" y="40" width="5" height="12.299999999999999" rx="0" ry="0" stroke="#c0c0c0" stroke-opacity="0.000001" stroke-width="0" fill-opacity="0.000001" fill="#c0c0c0" style="stroke: rgb(192, 192, 192); stroke-opacity: 0.000001; fill-opacity: 0.000001; fill: rgb(192, 192, 192);"></rect></g><g class="raphael-group-355-buttons"></g></svg></span> I ran this code through this validator, and it failed on the ID section. This was the only way I was able to find the issue. Please advise how I can remedy this. Thank you.

Sorry for the confusion, I'm not using Batik directly, but the framework that is creating my PDF export is using it under the hood. All I need for this to work is a patch that reliably creates HTML IDs that start with an "A-Z" alpha character. Here's an example of how the highcharts.js engine does this (source): /** * Define a clipping rectangle * @param {String} id * @param {Number} x * @param {Number} y * @param {Number} width * @param {Number} height */ clipRect: function (x, y, width, height) { var wrapper, id = PREFIX + idCounter++, clipPath = this.createElement('clipPath').attr({ id: id }).add(this.defs); wrapper = this.rect(x, y, width, height, 0).add(clipPath); wrapper.id = id; wrapper.clipPath = clipPath; wrapper.count = 0; return wrapper; }, They are using a defined prefix for any ID creation, which would solve this issue. Thank you.

Sorry, forgot to include the version and other details: /* FusionCharts JavaScript Library Copyright FusionCharts Technologies LLP License Information at <http://www.fusioncharts.com/license> FusionCharts JavaScript Library Copyright FusionCharts Technologies LLP License Information at <http://www.fusioncharts.com/license> @version 3.4.1 @attributions (infers respective third-party copyrights) Raphael 2.1.0 (modified as 'Red Raphael') <http://raphaeljs.com/license.html> JSON v2 <http://www.JSON.org/js.html> Firebug Lite 1.3.0 <http://getfirebug.com/firebuglite> */

Hello, I've been using FusionCartsXT for a few months now, but I'm having some issues getting some charts to a designer's spec. If possible, I'd like some help with the following questions: 1. In a 2D line chart, is there a way to only show a border on the X and Y axis, but not the border on the two opposite sides? |_ but not --| 2. Is there a way to force pie chart labels to never disappear off the side of the canvas? I currently have the following set: "enableSmartLabels":"1", "manageLabelOverflow": "1", "useEllipsesWhenOverflow": "0" This works in most instances, but if there is not room under a small slice, the label will still hang off (out of view) the right edge of the canvas. I'm currently hacking it to rotate the pie 180 degrees (so the small slices are all on the left side), but that won't work for all of my data sets. 3. Related to #2, can I simply declare where I would like the pie labels to sit on the graph instead? 4. How can I make a very plain bar chart? I can't find where these option lie: I would like no division lines, just labels A visible X axis (line all the way across the bottom) Larger font on the labels Larger font on the bar value Bar value left aligned Documentation referenced: http://docs.fusioncharts.com/charts/contents/ChartSS/Bar2D.html Thank you for any suggestions.

Hello, I see there is a "labelStep" option, but not a matching one for values. I would like the exact same functionality as the "labelStep" where it skips every N labels, to skip every N values on the plot. This is mostly specific to line charts. The data point property "showValue" does not currently meet my requirements. Thank you.

I did discover this hack, but unfortunately, it only works with bar charts that have all of the same color bar. I'm currently using a color palette. It also puts a box around the value on hover of the bar. Is there a way to change the color of the value for each bar value? Better yet, can I force it to never ignore my rule of where to put the value?

I have found a bug when using FusionCharts inside of SmartClient. After upgrading to the newest version, the tooltips no longer display on any chart type. I believe this to be a Z-index or layering issue after some investigation. Here is the code to reproduce the issue: <!doctype html> <html> <head> <SCRIPT>var isomorphicDir="../../isomorphic/";</SCRIPT> <SCRIPT SRC=../../isomorphic/system/modules/ISC_Core.js?isc_version=v9.1p_2014-06-26.js></SCRIPT> <SCRIPT SRC=../../isomorphic/system/modules/ISC_Foundation.js?isc_version=v9.1p_2014-06-26.js></SCRIPT> <SCRIPT SRC=../../isomorphic/system/modules/ISC_Containers.js?isc_version=v9.1p_2014-06-26.js></SCRIPT> <SCRIPT SRC=../../isomorphic/system/modules/ISC_Grids.js?isc_version=v9.1p_2014-06-26.js></SCRIPT> <SCRIPT SRC=../../isomorphic/system/modules/ISC_Charts.js?isc_version=v9.1p_2014-06-26.js></SCRIPT> <SCRIPT SRC=../../isomorphic/system/modules/ISC_DataBinding.js?isc_version=v9.1p_2014-06-26.js></SCRIPT> <SCRIPT SRC=../../isomorphic/skins/Enterprise/load_skin.js?isc_version=v9.1p_2014-06-26.js></SCRIPT> <script type="text/javascript" src="fusioncharts/js/fusioncharts.js"></script> <script type="text/javascript" src="fusioncharts/js/fusioncharts.charts.js"></script> <script type="text/javascript" src="fusioncharts/js/themes/fusioncharts.theme.fint.js"></script> </head> <body> <script> //create simple HTMLFlow and create a target div isc.HTMLFlow.create({ height: "400px", width: "500px", contents: "<div id='chart-container'></div>" }); //create any chart, the tool tips will not show up FusionCharts.ready(function () { var revenueChart = new FusionCharts({ type: 'column2d', renderAt: 'chart-container', id: 'myChart', width: '450', height: '340', dataFormat: 'json', dataSource: { "chart": { "xAxisName": "X Axis Label", "yAxisName": "Y Axis Label", //Place the value inside the plots "placevaluesInside": "0", "valueFontColor": "333333", "rotateValues": "0", "baseFontSize": "14", "yAxisValuesPadding":"10", "labelPadding": "10", "showToolTip ": "1 ", //Theme "theme" : "fint" }, "data":[ { "label":"Label 1", "value":"70", }, { "label":"Label 2", "value":"20" }, { "label": "Label 3", "value": "3" }, { "label":"Label 4", "value":"4" }, { "label":"Label 5", "value":"1" } ] } }); revenueChart.render(); }); </script> </body> </html> Thank you.

Hi, Any update on this issue? It would also work if there is an API hook for when the label in a bar chart spills over the side. There must be a function that decides when the labels will break their "placevaluesinside" property, correct? I checked the API docs, but I didn't see anything there. I also have another question: When it comes to the labels, I can use "labelStep" to skip labels, but it doesn't seem like I can do the same for the value portion. For instance, is there a way to feed daily data into a chart, but only plot Sunday data? Thanks again.

I also found a similar bug where white labels disappear when they spill out from the end of a bar chart. Any idea how to deal with this issue? Fiddle: http://jsfiddle.net/jocda03m/

Thank you for the feedback. The upgrade solved almost all of my problems. Here are a couple fiddles (forked from FC examples) that show the pie chart label issue: No labels showing: http://jsfiddle.net/kv4j1dhh/ Cut off labels: http://jsfiddle.net/kv4j1dhh/1/ Thanks again.

I was able to figure out these options: "divlinecolor": "FFFFFF", "baseFontSize": "16"