Geek Answers Handbook

Fusion chart multilevelpie text truncate / overlap issue

I used the "multilevelpie" chart. Since the data on the chart is smaller (say, 10 or 1), the label names merge with another.

I attached a screenshot with a message, please review it and send me a solution

enter image description here

Please check that JsFiddle has regenerated the problem .. and I also have attached images, strange error

Js Fiddle Example

FusionCharts.ready(function () { var topProductsChart = new FusionCharts({ type: 'multilevelpie', renderAt: 'chart-container', id : "myChart", width: '500', height: '500', dataFormat: 'json', dataSource: { "chart": { "caption": "Split of Top Products Sold", "subCaption": "Last Quarter", "captionFontSize": "14", "subcaptionFontSize": "14", "baseFontColor" : "#333333", "baseFont" : "Helvetica Neue,Arial", "basefontsize": "9", "subcaptionFontBold": "0", "bgColor" : "#ffffff", "canvasBgColor" : "#ffffff", "showBorder" : "0", "showShadow" : "0", "showCanvasBorder": "0", "pieFillAlpha": "60", "pieBorderThickness": "2", "hoverFillColor": "#cccccc", "pieBorderColor": "#ffffff", "useHoverColor": "1", "showValuesInTooltip": "1", "showPercentInTooltip": "0", "numberPrefix": "$", "plotTooltext": "$label, $$valueK, $percentValue" }, "category": [ { "label": "Sales by category", "color": "#ffffff", "value": "150", "category": [ { "label": "Food & {br}Beverages", "color": "#f8bd19", "value": "55.5", "category": [ { "label": "Breads", "color": "#f8bd19", "value": "11.1" }, { "label": "Juice", "color": "#f8bd19", "value": "27.75" }, { "label": "Noodles", "color": "#f8bd19", "value": "19.99" }, { "label": "Seafood", "color": "#f8bd19", "value": "0" } ] }, { "label": "Apparel &{br}Accessories", "color": "#e44a00", "value": "42", "category": [ { "label": "Sun Glasses", "color": "#e44a00", "value": "62.08" }, { "label": "Clothing", "color": "#e44a00", "value": "18.9" }, { "label": "Handbags", "color": "#e44a00", "value": "6.3" }, { "label": "Shoes", "color": "#e44a00", "value": "6.72" } ] }, { "label": "Baby {br}Products", "color": "#008ee4", "value": "22.5", "category": [ { "label": "Bath &{br}Grooming", "color": "#008ee4", "value": "9.45" }, { "label": "Feeding", "color": "#008ee4", "value": "16.3" }, { "label": "Diapers", "color": "#008ee4", "value": "76.75" } ] }, { "label": "Electronics", "color": "#33bdda", "value": "30", "category": [ { "label": "Laptops", "color": "#33bdda", "value": "8.1" }, { "label": "Televisions", "color": "#33bdda", "value": "10.5" }, { "label": "SmartPhones", "color": "#33bdda", "value": "11.4" } ] } ] } ] } }); topProductsChart.render(); });
+5
source share
1 answer

Allows you to specify the problems that we have here:

  • Problem 1: If dataValue is 0, there should be no label in the chart.
  • Decision. . Perhaps there is a philosophy on how to get the context of null data and missing data. Say, if I have a category with 0 value, and I remove it from the diagram, how to set the context that was on all the data. Regardless of what this requirement is, we could think of dataRefiner() , which simply refines the null and null data in the data source. :)
  • Problem 2: Texts overlap.
  • Solution: Currently, FusionCharts does not seem to support duplicate text management in the ML pie chart .: '(But, of course, I can go through the work that comes to my mind. Allows us to get our hands dirty.
  • Soultion 1: Attach the {br} tag to the label so that it breaks the line and places it in an arc. Not very useful in very thin sections.
  • Solution 2: Reduce font-size data labels to the extent that it just supports. Documents may be helpful.
  • Solution 3. Access the internal graphic labels and rotate it. Warning: access to internal graphics is not supported by official FusionCharts support.

Creating a workaround with some of the fixes mentioned above. This code is compatible with FC 3.11.0. Support Extension:

now even in MultiLevel Pie chart . This is a temporary and rough workaround until FusionCharts supports it.

Run the following snippet or play with fiddle :

 /* Recursively removes the data containing falsy values. @param data {Object} - The original data. @return {Object} - The refined data. */ function dataRefiner(data) { var i, category = data.category, len = category && category.length; for (i = 0; i < len; i += 1) { elem = category[i]; if (elem.category) { dataRefiner(elem); } else if (!Number(elem.value)) { category.splice(i, 1); i -= 1; len -= 1; } } return data; } var overlapManager = (function() { return function(chartRef, dataSet) { var jsonData = chartRef.getJSONData(), chartAttrs = jsonData.chart; if (Number(chartAttrs.enablesmartlabels) === 0 || Number(chartAttrs.managelabeloverflow) === 0) { return; } /* * Returns the point to point distance for two points. * @return {Number} */ function dist_point(point1, point2) { var math = Math; return math.sqrt((math.pow((point1.x - point2.x), 2)) + (math.pow((point1.y - point2.y), 2))) } /* * given a radius, center, and two ends of a chord. * return: { inner: Coordinate of the dipped point on the inner circle. outer: coordinate of the dipped point on the outer circle. } */ function give_dips(center_circle, angle, innerRadius, outerRadius) { var math = Math, res = { inner: {}, outer: {} }, getExtreme = function(radius) { return { x: center_circle.x + (radius * math.cos(angle)), y: center_circle.y - (radius * math.sin(angle)) } }; if (center_circle) { res.inner = getExtreme(innerRadius); res.outer = getExtreme(outerRadius); } return res; } /* * Manages the overlapping of the texts in ML pie chart. * @params: elem - {Object} - Internal store for the graphic and configurations. * @params: chartRef - {Object} - The reference for the chart. */ function wrapText(elem, chartRef) { var conf = elem && elem.config || {}, smartLabel = chartRef.jsVars.instanceAPI.linkedItems.smartLabel, jsonData = chartRef.getJSONData(), chart = jsonData.chart, useEllipsesWhenOverflow = chart && !!Number(chart.useellipseswhenoverflow), math = Math, graphics = elem && elem.graphics, ringpath = graphics.element && graphics.element.attr('ringpath') || [], center_circle = { x: ringpath[0], y: ringpath[1] }, innerRadius = ringpath[3], outerRadius = ringpath[2], strechAngle = conf.angleStrech, angle = (2 * math.PI) - conf.startAngle - (strechAngle / 2), dipPoints = give_dips(center_circle, angle, innerRadius, outerRadius), center = { x: (dipPoints.inner.x + dipPoints.outer.x) / 2, y: (dipPoints.inner.y + dipPoints.outer.y) / 2 }, textObj, radius = math.min(dist_point(center, center_circle) * math.sin(strechAngle / 2) - (conf.borderWidth || 0), dist_point(center, dipPoints.inner)), offset = radius * math.cos(math.PI / 4), side = math.sqrt(2) * radius; smartLabel.useEllipsesOnOverflow(useEllipsesWhenOverflow); textObj = smartLabel.getSmartText(conf.displayValue, side, side); if (graphics.label && graphics.label.getBBox().width > side) { (innerRadius !== 0) && graphics.label .attr({ text: textObj.text, }); } } if (!dataSet) { dataSet = chartRef.jsVars.instanceAPI.components.dataset[0]; } var data = dataSet.components.data || [], len = data.length, i; for (i = 0; i < len; i += 1) { // recursively traverse the graphical objects. overlapManager(chartRef, data[i]); } wrapText(dataSet, chartRef); } })(); FusionCharts.ready(function() { topProductsChart = new FusionCharts({ type: 'multilevelpie', renderAt: 'chart-container', id: "myChart", width: '500', height: '500', dataFormat: 'json', dataSource: dataRefiner(data), events: { "rendered": function(e, a) { if (FusionCharts.version.join('.') !== '3.11.0') { // It access the internal architechural properties of fusioncharts which might change in future release. console.log('overlapManager() is a work around supported for FusionCharts 3.11.0 and might not work in this version.'); } overlapManager(e.sender); } } }); topProductsChart.render(); }); var topProductsChart, data = { "chart": { "useEllipsesWhenOverflow": "1", "caption": "Split of Top Products Sold", "subCaption": "Last Quarter", "captionFontSize": "14", "subcaptionFontSize": "14", "baseFontColor": "#333333", "baseFont": "Helvetica Neue,Arial", "basefontsize": "9", "subcaptionFontBold": "0", "bgColor": "#ffffff", "canvasBgColor": "#ffffff", "showBorder": "0", "showShadow": "0", "showCanvasBorder": "0", "pieFillAlpha": "60", "pieBorderThickness": "2", "hoverFillColor": "#cccccc", "pieBorderColor": "#ffffff", "useHoverColor": "1", "showValuesInTooltip": "1", "showPercentInTooltip": "0", "numberPrefix": "$", "plotTooltext": "$label, $$valueK, $percentValue" }, "category": [{ "label": "Sales by category", "color": "#ffffff", "value": "150", "category": [{ "label": "Food & {br}Beverages", "color": "#f8bd19", "value": "55.5", "category": [{ "label": "Breads", "color": "#f8bd19", "value": "11.1" }, { "label": "Juice", "color": "#f8bd19", "value": "27.75" }, { "label": "Noodles", "color": "#f8bd19", "value": "19.99" }, { "label": "Seafood", "color": "#f8bd19", "value": "0" }] }, { "label": "Apparel &{br}Accessories", "color": "#e44a00", "value": "42", "category": [{ "label": "Sun Glasses", "color": "#e44a00", "value": "62.08" }, { "label": "Clothing", "color": "#e44a00", "value": "18.9" }, { "label": "Han", "color": "#e44a00", "value": "6.3" }, { "label": "Shoes", "color": "#e44a00", "value": "6.72" }] }, { "label": "Baby {br}Products", "color": "#008ee4", "value": "22.5", "category": [{ "label": "Bath & Grooming", "color": "#008ee4", "value": "9.45" }, { "label": "Feeding", "color": "#008ee4", "value": "16.3" }, { "label": "Diapers", "color": "#008ee4", "value": "76.75" }] }, { "label": "Electronics", "color": "#33bdda", "value": "30", "category": [{ "label": "Laptops", "color": "#33bdda", "value": "8.1" }, { "label": "Televisions", "color": "#33bdda", "value": "10.5" }, { "label": "SmartPhones", "color": "#33bdda", "value": "11.4" }] }] }] }; 
 <script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script> <!-- Sales by category shown using Multi-level Pie Chart. --> <div id="chart-container">FusionCharts will render here</div>

You can also refer to the treeMap table to represent the tree and hierarchical data.

+1
source

More articles:


All Articles