Jump to content
JChartFX Community
  • 0

Legend box

cdogg75

Asked by cdogg75,

 Share

Question

cdogg75 Newbie

cdogg75

Posted
Posted

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?

Link to comment
Share on other sites

14 answers to this question

Recommended Posts

  • 0
cdogg75 Newbie

cdogg75

Posted
  • Author
Posted (edited)

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,B){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>

Edited by cdogg75
Link to comment
Share on other sites
  • 0
cdogg75 Newbie

cdogg75

Posted
  • Author
Posted

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}]

Link to comment
Share on other sites
  • 0
cdogg75 Newbie

cdogg75

Posted
  • Author
Posted

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?

Link to comment
Share on other sites
  • 0
JuanC Newbie

JuanC

Posted
Posted

Can you duplicate the problem with a chart with only this code?

 

chart1.setDataSource([{"Auto Loan Balances":68206872.03,"30 Days Delinquent":2313403.43},{"Auto Loan Balances":67602034.03,"30 Days Delinquent":1708217.61}]);
chart1.setGallery(cfx.Gallery.Bar);
chart1.getLegendBox().setDock(cfx.DockArea.Bottom);
chart1.getLegendBox().setContentLayout(cfx.ContentLayout.Near);
 
Can you specify the build you are using
 
alert(cfx.Version);
 
The same code generates the right spacing in the legend box in my tests.
 
JuanC
Link to comment
Share on other sites
  • 0
JuanC Newbie

JuanC

Posted
Posted

I tried Firefox, Chrome and Safari on Mac as well as Firefox and Internet Explorer on Windows and could not replicate the overlap issue you are experiencing.

 

I also could not find any recent checkin where we could have fixed this. I tried both our current public build (7.2.5289) as well as our development build and they both worked fine.

 

Has anybody else seen this?

 

Are you doing something special on the CSS used on the page or the div where the chart is created? Maybe related to fonts?

 

JuanC

Link to comment
Share on other sites
  • 0
cdogg75 Newbie

cdogg75

Posted
  • Author
Posted

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.

Link to comment
Share on other sites
  • 0
JuanC Newbie

JuanC

Posted
Posted

I retested the code I submitted in both Mac and Windows and they both look fine in all browsers tested.

 

Are you using any other framework or script that could be changing some settings, e.g. I have seen where certain frameworks include a css that changes line-height for the whole page.

 

Can you try a very simple page like this

 

<!DOCTYPE html>

<html>
<head>
    <script type="text/javascript" src="jchartfx.system.js">
    </script>
    <script type="text/javascript" src="jchartfx.coreVector.js">
    </script>
    <script type="text/javascript" language="javascript">
        var chart1;
        
        function onLoadDoc()
        {
            chart1 = new cfx.Chart();
chart1.setDataSource([{"Auto Loan Balances":68206872.03,"30 Days Delinquent":2313403.43},{"Auto Loan Balances":67602034.03,"30 Days Delinquent":1708217.61}]);
chart1.setGallery(cfx.Gallery.Bar);
chart1.getLegendBox().setDock(cfx.DockArea.Bottom);
chart1.getLegendBox().setContentLayout(cfx.ContentLayout.Near);
            chart1.create("myDiv");
        }        
    </script>
</head>
<body onload="onLoadDoc()">
 
<div id="myDiv" style="width:600px;height:400px;display:inline-block"></div>
 
</body>
</html>
 
JuanC
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
 Share
Go to question listing
×
×
  • Create New...