cdogg75

Sorry, forgot to attach screenshot.

The code I posted is the exact code I am using. I haven't modified any of the includes but I can definitely reproduce that easily on my side. Just enter in a space in one of the series and voila, overlap. I too have tested in Firefox, Chrome and IE but all on windows across at least 60 machines. They all exhibit the issue. Attached is a screenshot of Firefox, IE and Chrome opened to the same page all showing the behavior. I am assuming I am doing something in my code incorrectly but I am lost at what. All seems like it should work to me. To get around this for now, I am modifying the title on the fly and replacing spaces with underscores. This fixes the overlap issue but my titles look funny with underscores instead of spaces.

Anyone have any ideas? Is there a development version I can try? I have tried everything and it reproduces in several instances, across different browsers and machines. If they have spaces, it overlaps. I have tried several old builds as well.

Version is 7.2.5289.19355 I inserted your code and yes, it is reproduced. Screenshot attached. Thanks for looking into this.

It appears when the JSON data has spaces, the series titles get cutoff at the first space. If I replace the spaces with any other character, they are spaced properly. It even does it when using the setText() method if it contains spaces. Is there any way to get around that?

Here is a screenshot of the overlapping text on bottom legend items.

Here is some sample data that produces the problem: [{"date":"08/01/2014","Auto Loan Balances":68206872.03,"30 Days Delinquent":2313403.43},{"date":"07/23/2014","Auto Loan Balances":67602034.03,"30 Days Delinquent":1708217.61},{"date":"07/11/2014","Auto Loan Balances":67307423.07,"30 Days Delinquent":1818776.6},{"date":"08/02/2014","Auto Loan Balances":68148506.1,"30 Days Delinquent":2305740.85},{"date":"07/10/2014","Auto Loan Balances":67300368.7,"30 Days Delinquent":1842018.7},{"date":"07/14/2014","Auto Loan Balances":67195424.07,"30 Days Delinquent":2230169.31},{"date":"07/31/2014","Auto Loan Balances":68124659.73,"30 Days Delinquent":2474960.26},{"date":"07/27/2014","Auto Loan Balances":67791353.85,"30 Days Delinquent":2459121.16},{"date":"07/06/2014","Auto Loan Balances":67035810.42,"30 Days Delinquent":1952646.42},{"date":"07/09/2014","Auto Loan Balances":67139163.36,"30 Days Delinquent":1964798.45},{"date":"07/24/2014","Auto Loan Balances":67726557.12,"30 Days Delinquent":1827624.77},{"date":"08/04/2014","Auto Loan Balances":68282795,"30 Days Delinquent":2379328.41},{"date":"07/30/2014","Auto Loan Balances":67994174.48,"30 Days Delinquent":2662941.51},{"date":"07/25/2014","Auto Loan Balances":67830043.13,"30 Days Delinquent":1685087.91},{"date":"07/07/2014","Auto Loan Balances":67289469.29,"30 Days Delinquent":1799686.84},{"date":"07/08/2014","Auto Loan Balances":67176512.92,"30 Days Delinquent":1891000.97},{"date":"07/21/2014","Auto Loan Balances":67502106.03,"30 Days Delinquent":1883536.17},{"date":"07/16/2014","Auto Loan Balances":67271238.21,"30 Days Delinquent":1831075.55},{"date":"07/17/2014","Auto Loan Balances":67404633.41,"30 Days Delinquent":1768634.46},{"date":"07/12/2014","Auto Loan Balances":67254629.42,"30 Days Delinquent":1898509.77},{"date":"07/13/2014","Auto Loan Balances":67249172.4,"30 Days Delinquent":2124769.96},{"date":"07/19/2014","Auto Loan Balances":67484761.05,"30 Days Delinquent":1804279.64},{"date":"07/18/2014","Auto Loan Balances":67525111.15,"30 Days Delinquent":1757610.72},{"date":"07/28/2014","Auto Loan Balances":67940273.88,"30 Days Delinquent":2275008.67},{"date":"07/22/2014","Auto Loan Balances":67459622.57,"30 Days Delinquent":1805122.42},{"date":"07/29/2014","Auto Loan Balances":67983660.74,"30 Days Delinquent":2449837.78},{"date":"07/05/2014","Auto Loan Balances":67041894.69,"30 Days Delinquent":1901964.5},{"date":"07/20/2014","Auto Loan Balances":67473873.42,"30 Days Delinquent":1864459.94},{"date":"07/15/2014","Auto Loan Balances":67205996.49,"30 Days Delinquent":2083389.92},{"date":"08/03/2014","Auto Loan Balances":68144713.24,"30 Days Delinquent":2447197.09},{"date":"07/26/2014","Auto Loan Balances":67805283.96,"30 Days Delinquent":1781156.63}]

Here is the code I am using: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="www.w3.org/1999/xhtml"> <head> <meta http-equiv="X-UA-Compatible" content="IE=Edge" /> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <title>dashboard.html</title> <style> label { width: 10em; margin-right: 1em; margin-left: 1em; font: bold 14px arial, sans-serif; } .ui-widget { font-size:14px !important; } .inputBoxes { border-bottom-right-radius: 4px; border-top-left-radius: 4px; border-bottom-left-radius: 4px; border-top-right-radius: 4px; border: 1px solid #D3D3D3; background: url('/jquery-ui-1.11.0/themes/smoothness/images/ui-bg_glass_75_e6e6e6_1x400.png') repeat-x scroll 50% 50% #E6E6E6; font-weight: normal; color: #555; font-family: Verdana,Arial,sans-serif; padding: 0.4em 2.1em 0.4em 1em; cursor: pointer; line-height: 1.4; font-size:14px; } .ui-selectmenu-button { top: 10px; } .submitButton { height: 37px; margin-left: 1em; } .myButtons { border-bottom-right-radius: 4px; border-top-left-radius: 4px; border-bottom-left-radius: 4px; border-top-right-radius: 4px; border: 1px solid #D3D3D3; background: url('/jquery-ui-1.11.0/themes/smoothness/images/ui-bg_glass_75_e6e6e6_1x400.png') repeat-x scroll 50% 50% #E6E6E6; font-weight: normal; color: #555; font-family: Verdana,Arial,sans-serif; padding: 0.4em 2.1em 0.4em 1em; cursor: pointer; line-height: 1.4; font-size:14px; margin-left: 1em; } .ui-progressbar { width: 200px; position: absolute; top: 35%; left: 50%; margin: -10px 0 0 -250px; } </style> <link rel="stylesheet" type="text/css" href="/jquery-ui-1.11.0/themes/smoothness/jquery-ui.css" /> <link rel="stylesheet" type="text/css" href="/jchartfx.7.2.5289/styles/Attributes/jchartfx.attributes.css" /> <link rel="stylesheet" type="text/css" href="/jchartfx.7.2.5289/styles/Palettes/jchartfx.palette.css" /> <script type="text/javascript" src="/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="/jquery-ui-1.11.0/jquery-ui.js"></script> <script type="text/javascript" src="/jchartfx.7.2.5289/js/jchartfx.system.js"></script> <script type="text/javascript" src="/jchartfx.7.2.5289/js/jchartfx.coreVector.js"></script> <script type="text/javascript" src="/jchartfx.7.2.5289/js/jchartfx.animation.js"></script> <script type="text/javascript" src="/jchartfx.7.2.5289/js/jchartfx.coreVector3d.js"></script> <script type="text/javascript"> $( document ).ready(function() { var actionTracker; var titleObj; $.ajax({ url: ("dash_json.plx"), data: '{"get_stats":"1"}', type: "POST", contentType: "application/json; charset=utf-8", dataType : "json", success: function (result) { titleObj = result; var options; var availableTags=[]; var titleValMap={}; for ( var i=0; i < result.length; i++ ) { //availableTags={ label: result.title, value: result.key }; availableTags=result.title; titleValMap[result.title]=result.key; } $( "#myStatPicker" ).autocomplete({source: availableTags, minLength: 0, select: function( event, ui ) { $( "#myStatPickerData" ).val(titleValMap[ui.item.label]); } }); $( "#myStatPicker" ).click( function() { $( "#myStatPicker" ).autocomplete( "search", "" ); }); }, error: function (xhr, txt, err) { alert("error connecting to data: " + txt + " " + xhr + " " + err); } }); var statList; pieBuilt=0; var chart1 = new cfx.Chart(); chart1.setGallery(cfx.Gallery.Area); chart1.getLegendBox().setDock(cfx.DockArea.Bottom); chart1.getLegendBox().setContentLayout(cfx.ContentLayout.Near); chart1.getAxisY().setForceZero(false); function loadChart() { $( "#ChartDiv" ).fadeOut(); $( "#progressBar" ).text('Loading...'); $( "#progressBar" ).progressbar({value: false}); $( "#progressBar" ).fadeIn(); var date_from=$( '#myDatePickerFrom' ).val(); var date_to=$( '#myDatePickerTo' ).val(); var stat=$( '#myStatPickerData' ).val(); var dataType; for ( var i=0; i < titleObj.length; i++ ) { if ( titleObj.key==stat ) { dataType=titleObj.type; break; } } if (!statList) { statList=stat; } else { switch(actionTracker) { case "0": statList=stat; break; case "1": if ( statList.search(stat)==-1 ) { statList+="//"+stat; } break; default: statList=stat; } } $.ajax({ url: ("dash_json.plx"), data: '{"date_from":"'+date_from+'","date_to":"'+date_to+'","stat":"'+statList+'","dataType":"'+dataType+'"}', type: "POST", contentType: "application/json; charset=utf-8", dataType : "json", success: function (result) { result.sort(function(a,{return new Date(a.date)-new Date(b.date)}); window.tmpResult=result; if ( statList.search("//")>-1 ) { chart1.getAxisY().setForceZero(true); } else { chart1.getAxisY().setForceZero(false); } if ($( "#myDisplayPicker option:selected" ).val()=="Pie") { pieBuild(); } else { chart1.setDataSource(result); } if (result != "") { chart1.getAnimations().getLoad().setEnabled(true); } else { chart1.getAnimations().getLoad().setEnabled(false); } //chart1.getSeries().getItem(statCounter).setText($( "#myStatPicker" ).val()); chart1.getAxisY().getLabelsFormat().setDecimals(2); if ( dataType=="DOLLARS") { chart1.getAxisY().getLabelsFormat().setFormat(cfx.AxisFormat.Currency); } if ( dataType=="NUMBER") { chart1.getAxisY().getLabelsFormat().setFormat(cfx.AxisFormat.Number); } if ( dataType=="RATE") { chart1.getAxisY().getLabelsFormat().setFormat(cfx.AxisFormat.Percentage); chart1.getAxisY().getLabelsFormat().setDecimals(4); } if ( dataType=="%") { chart1.getAxisY().getLabelsFormat().setFormat(cfx.AxisFormat.Number); chart1.getSeries().getItem(0).setText($( "#myStatPicker" ).val() + " %"); } if ( window.chartLoaded!=0 ) { chart1.create('ChartDiv'); window.chartLoaded=0; } $( "#progressBar" ).fadeOut(); $( "#progressBar" ).text(''); $( "#progressBar" ).progressbar("destroy"); $( "#ChartDiv" ).fadeIn(); $( "#myStatPicker" ).val("") }, error: function (xhr, txt, err) { alert("error connecting to data: " + txt + " " + xhr + " " + err); } }); } function pieBuild() { var dtTo=$('#myDatePickerTo').val(); if (!dtTo) { var d=new Date(); dtTo=("00"+(d.getMonth()+1)).slice(-2)+"/"+("00"+(d.getDate()-1)).slice(-2)+"/"+(d.getYear()+1900); $('#myDatePickerTo').val(dtTo); } var pieObj; PIELOOPER: for ( var i=0;i<tmpResult.length;i++ ) { for ( var tmp1 in tmpResult) { if ( dtTo==tmpResult.date ) { pieObj=tmpResult; break PIELOOPER; } } } var pieArry=[]; var i=0; for ( var tmp1 in pieObj ) { if (tmp1 != "date") { var tmpObj={}; tmpObj["key"]=tmp1; tmpObj["value"]=pieObj[tmp1]; pieArry.push(tmpObj); } } chart1.setDataSource(pieArry); chart1.setGallery(cfx.Gallery.Pie); var fields = chart1.getDataSourceSettings().getFields(); var field1 = new cfx.FieldMap(); chart1.getAllSeries().getPointLabels().setVisible(true); pieBuilt=1; } function check_fields() { dt_from = new Date($( '#myDatePickerFrom' ).val()); dt_to = new Date($( '#myDatePickerTo' ).val()); if ( $( "#myDisplayPicker option:selected" ).val() == "Pie" ) { loadChart(); } else { if ( ($( '#myDatePickerFrom' ).val()=="" && $( '#myDatePickerTo' ).val()=="") || ( dt_from <= dt_to) ) { loadChart(); } else { alert("Beginning date must be less than\nor equal to end date!"); } } } $('#myDatePickerFrom').attr('readonly', true); $('#myDatePickerTo').attr('readonly', true); $( "#myDatePickerFrom" ).datepicker({ changeMonth: true, changeYear: true, }); $( "#myDatePickerTo" ).datepicker({ changeMonth: true, changeYear: true, }); $( 'input[name=submitter]').click(function() { actionTracker="0"; check_fields(); }); $( 'input[name=addSeries]').click(function() { var tmpVar=$( "#myStatPickerData" ).val(); if (tmpVar.search(/\*/) != -1) { alert("Adding multiple rates not yet supported"); } else { actionTracker="1"; check_fields(); } }); $( 'input[name=myReset]').click(function() { window.location.reload(true); }); $( '#myDisplayPicker').change(function() { if (pieBuilt) { if ($( '#myDatePickerFrom' ).val()=="") { $( '#myDatePickerTo' ).val(""); } loadChart(); pieBuilt=0; } chart1.getView3D().setEnabled(false); chart1.getAllSeries().setStacked(); chart1.getAllSeries().getPointLabels().setVisible(false); var listVal = $( "#myDisplayPicker option:selected" ).val(); if ( (listVal!= "Bar" && listVal!= "Bar3D") && statList.search("//")>-1 ) { chart1.getAxisY().setForceZero(true); } else { chart1.getAxisY().setForceZero(false); } switch ($( "#myDisplayPicker option:selected" ).val()) { case "Area": chart1.setGallery(cfx.Gallery.Area); break; case "Area3D": chart1.setGallery(cfx.Gallery.Area); chart1.getView3D().setEnabled(true); chart1.getView3D().setCluster(true); chart1.getView3D().setAngleX(65); break; case "AreaCurve": chart1.setGallery(cfx.Gallery.CurveArea); break; case "Lines": chart1.setGallery(cfx.Gallery.Lines); chart1.getAllSeries().setMarkerShape(cfx.MarkerShape.None); break; case "LinesCurve": chart1.setGallery(cfx.Gallery.Curve); chart1.getAllSeries().setMarkerShape(cfx.MarkerShape.None); break; case "Pie": if ( statList.search("//")==-1 ) { alert("Pie charts reqire more than one stat to be loaded!"); break; } pieBuild(); break; case "Bar": chart1.setGallery(cfx.Gallery.Bar); break; case "stackedBar": chart1.setGallery(cfx.Gallery.Bar); chart1.getAllSeries().setStacked(cfx.Stacked.Normal); chart1.getAxisY().setForceZero(true); break; case "Bar3D": chart1.setGallery(cfx.Gallery.Bar); chart1.getView3D().setEnabled(true); chart1.getView3D().setAngleX(45); chart1.getView3D().setCluster(true); chart1.getAxisY().setForceZero(true); break; default: chart1.setGallery(cfx.Gallery.Area); break; } chart1.getData().recalculateScale(); }); }); </script> </head> <body> <form name="dashForm"> <label class="inputText" for="myStatPicker">Stat:</label> <input type="text" class="inputBoxes" id="myStatPicker" style="width: 200px;"> <input id="myStatPickerData" type="hidden" value=""> <label for="myDatePickerFrom" class="inputText">From:</label> <input class="inputBoxes" id="myDatePickerFrom" /> <label for="myDatePickerTo" class="inputText">To:</label> <input class="inputBoxes" id="myDatePickerTo" /> <br /><br /> <input class="myButtons" name="submitter" type="button" value="Show Stat" /> <input class="myButtons" name="addSeries" type="button" value="Add/Refresh" /> <input class="myButtons" name="myReset" type="button" value="Reset" /> <label class="inputText" for="myDisplayPicker">Chart Type:</label> <select class="inputBoxes" id="myDisplayPicker" style="width: 200px;"> <optgroup label="Area"> <option value="Area">Area</option> <option value="Area3D">3D Area</option> <option value="AreaCurve">Area Curve</option> </optgroup> <optgroup label="Bar"> <option value="Bar">Bar</option> <option value="stackedBar">Stacked Bar</option> <option value="Bar3D">3D Bar</option> </optgroup> <optgroup label="Line"> <option value="Lines">Line</option> <option value="LinesCurve">Curve</option> </optgroup> <option value="Pie">Pie ("To" Date Only)</option> </select> <div id="ChartDiv" style="width:900px;height:500px"></div> <div id="progressBar"></div> </form> </body> </html>

I have a working chart that I have populated with JSON data from a web service I created. I allow the AJAx call to add additional series by making a new request and then rebind by using setdatasource to the new result but when adding more than one series the legend box items overlap each other. I have them on the bottom of the chart to maximize width for chart data. I am using AJAX calls to avoid the need for a full screen refresh. Weird thing is if I enter in the legend box items manually with test string literals, they space out fine. Only occurs when the legend text is populated auto via the JSON data or even if I populate via a variable. Is there any way to force spacing on the legend titles or am I doing something wrong?

I can't seem to get the animation to work on an area chart. Where is the proper place/time to place the animation activation command? I populate a chart and create an object and then allow users to select different data series supplied from ajax. I attach the new data using setDataSource and it updates the chart but the data just appears. Doesn't animate.