Álvaro González

Members
  • Content count

    25
  • Joined

  • Last visited

Posts posted by Álvaro González


  1. Hi,

     

    We would first recommend you to upgrade your current version to the latest, i.e, FusionCharts v3.6. We have completely discontinued Flash charts and only support JavaScript charts.

     

    Please upgrade and check if the issue still persists. In case yes, please share your sample data so that we might test it.

     

    Hope this helps. :)

     

    Sorry if I wasn't clear. I found the issue right after upgrading to 3.6.0 (then downgraded to verify if the bug existed before, which was actually the case). And I'm not using Flash at all.

     

    I'll try to compose a self-contained test case.


  2. In a fully UTF-8 enabled web site I use JavaScript to generate the JSON URL and pass it to FusionCharts:

        var title = "EVOLUCIÓN";
        var url = "/foo.php?title=" + encodeURIComponent(title);
        var plot = new FusionCharts("/FusionCharts/MSLine.swf", "fc-" + this.id, "100%", "100%", debugMode);
        plot.setJSONUrl(url);
        plot.render(this.id);

    This works as expected in all browsers except Internet Explorer (I'm testing it on version 11). The developer console shows that the AJAX request to fetch the JSON data has already converted the double-byte URL-encoded data (%C3%B3) to an unencoded form (Ó) and some server-side debug code reveals it's not UTF-8 but some single-byte encoding (probably ISO-8859-1 or Windows-1252). I've just upgraded to 3.6.0 and I end up with "EVOLUCI?N" (earlier in 3.3.1 I'd get "EVOLUCIN").

     

    Documentation says that FusionCharts requires a BOM in all UTF-8 source files but adding one didn't fix the problem.

     

    Is it a known issue? Do you have a workaround that doesn't break in other browsers?


  3. Try setting "isHTML" as 1 to "ToolTip" object and check if line feed works fine with "tooltipSepchar" attribute.

     

    Thanks for your follow-up.

     

    With your code I can enable/disable HTML in the tooltip (verified with a <strong> tag) but <br> is always rendered as a line feed, no matter the value of isHTML. As I said, it feels like a bug but serves as workaround for my issue.


  4. Could you please try once by providing the entire string of tooltip as toolText with {br} pseudo code, as shown below:

     

    Ref. XML Code snippet:

    <chart>
     <dataset>
      <set value='27400' ToolText='2006{br}Jan{br}$27.4K' />
      ...
     </dataset>
     ...
    </chart>

     

    Yes, {br} works in ToolText but not in toolTipSepChar I'm afraid.

     

    Meanwhile, I've found a funny workaround:

    'toolTipSepChar' => '<br>',

    It feels like a bug but it works anyway.


  5. I'm using XT 3.3.1 to plot a Combination 3D (Simulated) Chart (Single Y) Specification Sheet chart (aka MSCombi3D.swf) with the JavaScript renderer.

     

    Default tooltips are not very readable for me because everything's in one line and I'd like to add a carriage return to separate the three items. I've learn I can use the toolTipSepChar property under charts:

        "chart": {
            "formatNumberScale": 0,
            "decimalSeparator": ",",
            "thousandSeparator": ".",
            "toolTipSepChar": "test",
            "showToolTipShadow": 1,
            "toolTipBgColor": "EEEEEE",
            "toolTipBorderColor": "EEEEEE",
            "caption": "Nº de intervenciones × mes{br}2012—2013",
            "labelDisplay": "Rotate",
            "slantLabels": "1"
        },

    The property itself works but I cannot find a way to insert a line ending. I've tried both '{br}' and a literal "\n" but they didn't work: the first one prints a literal '{br}' (it's funny because it does work in caption) and the second one prints a white space.

     

    Is it possible to do what I want?

     


  6. We are looking into this.

     

    We will get back to you on this, shortly.

     

    Please correct me if I'm wrong but I have the impression that my primary goal (setting graph dimensions for printing with pure CSS) is just no supported by the library. I guess that FusionCharts calculates and hard-codes pixel dimensions to ensure all elements (shapes, fonts, etc.) look great on screen. I don't think that can change in the short term.

     

    I don't really know why my Ugly JavaScript Hack doesn't work, though, and if you can find the time to shed some light on it I'll absolutely appreciate it.


  7. On what browser did you face this issue?

     

    Can you please mention the browser version details?

     

    I'm facing the issue in the following browsers (running on Windows 7 Ultimate 64 bits):

    • Google Chrome 28.0.1500.72 m (32 bits)
    • Mozilla Firefox 22.0 (32 bits)
    • Internet Explorer 10 (64 bits)
    • Opera 12.15 (64 bits)

    Do you mean that print preview in the fiddle shows both graphs with the same width for you?


  8. I was unable to find a CSS workaround so I've written a little JavaScript function to modify the generated <svg> and make it resizable:

    function handleDrawComplete(eventObject, argumentsObject){
        var $svg = $("svg", eventObject.sender.ref);
        var w = argumentsObject.width;
        var h = argumentsObject.height;
    
        $svg
            .attr("viewBox", "0 0 " + w + " " + h)
            .attr("preserveAspectRatio", "xminymin meet")
            .attr("width", "100%")
            .attr("height", "100%")
            .css("width", "100%")
            .css("height", "100%");
    }

    I use this function as handler for the DrawComplete complete event and, according to Chrome developer tools, graphs are modified successfully. However, graphs are still printed at fixed dimensions.

     

    The funny thing is that saving the page with the generated <svg> as static HTML works as expected! :(

     

    Is it possible that FusionCharts is triggering an event or something that manipulates the graph when user attempts to print? (I mean standard browser print, not managed printing.)

     

     

     


  9. Alright, I found where it comes from. This is what the bands look like:

    <rect x="66" y="84.20000000000002" width="432" height="52.19999999999999" r="0" rx="0" ry="0"
    fill="#eeeeee" stroke="#000" fill-opacity="0" stroke-width="0.000001" style=""></rect>

    For whatever reason, Google Chrome renders stroke-width="0.000001" as a thick line when printing. This workaround seems to do the trick:

    @media print{
        rect[stroke-width="0.000001"]{
            stroke-width: 0;
        }
    }

  10. I'm generating several plots with the JavaScript renderer, configured to fit in the available width. Relevant code looks like this:

    <div id="sales-plot">Loading...</div>
    #sales-plot{
        width: 30%;
        height: 275px;
    }
    FusionCharts.setCurrentRenderer("javascript");
    var salesPlot = null;
    $("#sales-plot").each(function(){
        salesPlot = new FusionCharts("/js/FusionCharts/Pie2D.swf",
                                     "fc-" + this.id, "100%", "100%", debugMode);
        salesPlot.setJSONUrl("/data/sales-plot.json";);
        salesPlot.render(this.id);
    });

    So far so good. Problem comes when the user prints the page: the plot takes twice the available width in a A4 sheet. I've tried tweaking my print CSS code but I've hit a wall—apparently, FusionCharts calculates and hard-codes the pixel dimensions of the graph:

    <svg height="275" version="1.1" width="379" xmlns="http://www.w3.org/2000/svg"
    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);">

    When I use CSS to reduce the width of the <svg> element or any of its ancestors I only get a cropped graph:

    @media print{
        #sales-plot{
            width: 5cm;
            height: 3cm;
        }
    }

    The graph keeps its original size thus it overflows the container. FusionChart resizes the graph when I resize the window, but obviously not when I print.

    Does this have an easy fix?
     


  11. I've just switched to the JavaScript renderer because managed printing was taking several minutes to prepare charts on Google Chrome. To my surprise, graphs are printed exactly like in the screen in all browsers except Google Chrome. Here's a screenshot of a "MSCombiDY2D.swf" chart—on screen look on top, print preview on bottom:

     

    ohwe.png

     

     

    According to Chrome console that element is a <rect> tag and I haven't set a single CSS rule for such tags.

     

    Do you have any idea of where those black boxes come from?


  12. I found the same issue, just to discover that it's also failing in regular browsers (e.g. Firefox on Windows) when you disable Flash. I suggest you make the same check: go to your desktop browser's plug-in manager, disable Flash and verify if charts still work.

     

    I've just fixed the issue by upgrading FusionCharts from 3.2.3 to 3.2.4...


  13. I found the same issue, just to discover that it's also failing in regular browsers (e.g. Firefox on Windows) when you disable Flash. I suggest you make the same check: go to your desktop browser's plug-in manager, disable Flash and verify if charts still work.


  14. I'm using 2D Dual Y Combination Chart plots (MSCombiDY2D.swf) to represent data in two different scales. There're circumstances where there's nothing to plot in the primary (left) axis. Is it possible to completely hide such axis?

     

    So far, if I omit the PYAxisName key and I don't provide any series with parentYAxis equal to 'P' I get this:

     

    mscombidy2d.png

     

    Please note the bogus zeroes.

     

    I know I could choose another plot type but I like keeping the axis to the right so it's coherent with other graphs.


  15. I have several graphs of type 2D (Single Y) Combination Chart Specification Sheet (aka MSCombi2D.swf). The customer (*sigh*) has requested that all plots should have a fixed scale; large values that don't fix will simply get truncated. I hope the following before/after mock-up illustrates it:

     

     

    truncatedbars.png

     

    Leaving aside the usefulness (or lack of) of truncated plots, is there a way to accomplish this with FusionChars?

     

    I'd say there isn't but I'd like to hear opinions from someone with more experience. Thank you in advance.


  16. I am not able to replicate the same.

     

    Please find attached screen-shot and illustration which is rendered using the same code.

     

    Thank you for your feedback. To reproduce the issue, replace your data.JSON file with the sample data you can find in the documentation. I've attached it to this reply.

     

    data.zip


  17. I'm trying to compose a "Multi-series Stacked Column 2D Line Dual Y Combination Chart" graph following the documentation at http://docs.fusionch...SS/Combi2D.html but all I get is an empty graph:

     

    pruebamscombi2d.png

     

     

    I'm loading the sample JSON from the docs with this code:

     

     

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head><title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style type="text/css"><!--
    #my-graph{
    width: 600px;
    height: 400px;
    }
    --></style>
    <script type="text/javascript" src="js/FusionCharts/FusionCharts.js"></script>
    <script type="text/javascript"><!--
    window.onload = function(){
    var debugMode = 0;
    
    myGraph = new FusionCharts("js/FusionCharts/MSCombi2D.swf", "fc-my-graph", "100%", "100%", debugMode);
    myGraph.setJSONUrl("prueba-mscombi2d.json");
    myGraph.render("my-graph");
    };
    //--></script>
    </head>
    <body>
    
    <div id="my-graph"></div>
    
    </body>
    </html>
    

     

     

    Is there some typo in the documentation or am I doing something wrong? (Other graph types I've tried work just fine.)


  18. I've composed the following graph using the "Multi-series Stacked Column 2D Line Dual Y" graph type:

     

    multiseriesstackedcolum.png

     

    I don't actually need to stack columns—I only chose this graph type because I could display two series in columns and an additional one as lines.

     

    The problem is that I'm getting two different Y axis and I only need one: all my figures are in EUR and should display in the same scale.

     

    Can this graph be configured to use a single Y axis? Is there any other graph type I could use?


  19. You would need to add "showSum" attribute under the chart element.

     

    This attribute is used to show sum of all the columns in a given stacked column. By default this attribute is set to 1.

     

    Thank you very much, that was the trick.

     

    I've just realised I was looking at the wrong document... Multi-series Column 2D ChartMulti-series Stacked Column 2D Chart


  20. I'm creating my first "Multi-series Column 2D Chart". I've managed to do almost everything I need, except hiding the values on top of each bar. I don't need them and they just clutter the graph:

     

    multiseriescolumn2dchar.png

     

    According to the documentation I can use showValues=0. I've tried setting it everywhere and using 0 or 1 as values but I can't see any change in the graph. What am I missing?

     

    Here's my JSON data:

     

    {
    "chart":  {
    	"showValues": 0
    },
    "categories": [
    	{
    		"category": [
    			{"label": "A"},
    			{"label": "B"},
    			{"label": "C"},
    			{"label": "D"},
    			{"label": "E"},
    			{"label": "F"},
    			{"label": "G"},
    			{"label": "H"},
    			{"label": "I"},
    			{"label": "J"},
    			{"label": "K"},
    			{"label": "L"}
    		]
    	}
    ],
    "dataset": [
    	{
    		"dataset": [
    			{
    				"showValues": 0,
    				"data": [
    					{"value": "4395649.00"},
    					{"value": "2130494.00"},
    					{"value": "1781236.00"},
    					{"value": "1588495.00"},
    					{"value": "1551210.00"},
    					{"value": "1323759.00"},
    					{"value": "1249733.00"},
    					{"value": "1141461.00"},
    					{"value": "1094041.00"},
    					{"value": "1513253.00"},
    					{"value": "1188087.00"},
    					{"value": "944869.00"}
    				]
    			},
    			{
    				"showValues": 0,
    				"data": [
    					{"value": "7410054.79"},
    					{"value": "2734390.53"},
    					{"value": "2659246.50"},
    					{"value": "2859717.03"},
    					{"value": "2250420.27"},
    					{"value": "2695766.67"},
    					{"value": "2256646.71"},
    					{"value": "2457040.74"},
    					{"value": "2155351.37"},
    					{"value": "2127566.98"},
    					{"value": "2013708.28"},
    					{"value": "1888168.13"}
    				]
    			}
    		]
    	},
    	{
    		"dataset": [
    			{
    				"showValues": 0,
    				"data": [
    					{"value": "4246039.00"},
    					{"value": "1954004.00"},
    					{"value": "1825218.00"},
    					{"value": "1629818.00"},
    					{"value": "1584672.00"},
    					{"value": "1420950.00"},
    					{"value": "1347016.00"},
    					{"value": "1153637.00"},
    					{"value": "1115269.00"},
    					{"value": "1075794.00"},
    					{"value": "993593.00"},
    					{"value": "971447.00"}
    				]
    			},
    			{
    				"showValues": 0,
    				"data": [
    					{"value": "6749650.44"},
    					{"value": "2858274.77"},
    					{"value": "2696682.83"},
    					{"value": "2779320.21"},
    					{"value": "1941927.19"},
    					{"value": "2557306.32"},
    					{"value": "1727990.77"},
    					{"value": "2097329.64"},
    					{"value": "1906777.26"},
    					{"value": "2283929.19"},
    					{"value": "2105634.80"},
    					{"value": "1954386.69"}
    				]
    			}
    		]
    	}
    ]
    }

     

     

    Thank you in advance for any hint you can provide.

     

    P.S. You can find a self-contained example with the above JSON data in the attached ZIP: FusionCharts.zip