�lvaro G. Vicario

Members
  • Content count

    25
  • Joined

  • Last visited

Everything posted by �lvaro G. Vicario

  1. 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?
  2. Internet Explorer converts UTF-8 data to single-byte

    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.
  3. 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: 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?
  4. Add line feed to tooltips

    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?
  5. Add line feed to tooltips

    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.
  6. Add line feed to tooltips

    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.
  7. Scale graph to print

    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?
  8. Scale graph to print

    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.
  9. Scale graph to print

    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?
  10. Scale graph to print

    I'm using FusionCharts/3.3.1 (more specifically, 3.3.1-sr2.19840)
  11. Scale graph to print

    I've created an online fiddle that illustrates the issue: http://jsbin.com/izutow/2
  12. Scale graph to print

    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.)
  13. Google Chrome shows extra borders when printing

    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; } }
  14. Stopped Working On Ipad

    I've just fixed the issue by upgrading FusionCharts from 3.2.3 to 3.2.4...
  15. Stopped Working On Ipad

    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.
  16. Hide Primary Axis

    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: 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.
  17. Hide Primary Axis

    You've been very helpful, thanks a lot.
  18. Truncate Plot (On Purpose)

    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: 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.
  19. Fix Graph Or Choose New Type

    I've composed the following graph using the "Multi-series Stacked Column 2D Line Dual Y" graph type: 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?
  20. Fix Graph Or Choose New Type

    That graph type is outstanding and definitively solved all my needs. Thank you very much.
  21. Can't Make Sample Json Work

    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: 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.)
  22. Can't Make Sample Json Work

    Sorry, I made I typo in my original post (I can't seem to be able to edit the message once posted). The chart title was wrong (the rest is fine). What I want is: 2D (Single Y) Combination Chart MSCombi2D.swf http://docs.fusionch...SS/Combi2D.html Your code and links are for some other graph types.
  23. Can't Make Sample Json Work

    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
  24. Can't Hide Values On Multi-Series Chart

    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: 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
  25. Can't Hide Values On Multi-Series Chart

    Thank you very much, that was the trick. I've just realised I was looking at the wrong document... Multi-series Column 2D Chart ≠ Multi-series Stacked Column 2D Chart