AnsweredAssumed Answered

Dojox line chart - what can I do to keep from markers from getting cut off?

Question asked by schlot on Apr 28, 2014
Latest reply on Apr 1, 2016 by NMWRRI
I have a dojox line chart that's populated from an identifyTask.  I'm pushing the results into an array, which is the input for my plot series.  I'm having a hard time searching out documentation on this, but I was able to get pretty far along with some trial and error.  The chart looks the way I want, except that the markers on the first and last values are cut off and I don't like the way it looks.  I'm looking for a parameter I can put on the X axis to prevent this.  Or maybe I need a better calculation to define the min and max on the axis so the markers fall a bit farther inside the very edge?

My data has multiple years worth of information for each polygon.  The layers in the service are named so the last 4 characters are always the year.  I'm using an identify on the center of the polygon.  This is my results handler
         function getStatsHandler(results){//formats the results for line chart, then generates it
              stats.length = 0;
              yearList.length = 0;
              rateList.length = 0;
              var year;
              domConstruct.empty("chartDiv");
              for (i=0;i<results.length;i++) {
                var lyrResult = results[i];
                itemLength = lyrResult.layerName.length;
                yearPos = itemLength - 4;
                year = lyrResult.layerName.substr(yearPos, 4);
                var rate = lyrResult.feature.attributes.RATE;
                yearList.push({value: i+1, text:year});
                rateList.push(parseFloat(rate));
               };
               rateList.sort(function(a,b){return a-b});
               var maxVal = rateList[rateList.length -1];
               maxVal = Math.round(maxVal);
               var axisMax =  (parseInt(maxVal/10)+1)*10;

          var lineChart = new Chart2D("chartDiv", {
            title: currentCounty + "</br>" + title + " Rates" ,
            titlePos:"bottom",
            titleGap: 12,
            titleFont: "normal normal normal 13pt Arial",          
          });
          lineChart.addPlot("default", {
            type: "Lines", 
            markers: true,
            hAxis: "x", 
            vAxis: "y"});
          lineChart.addAxis("x", {
            title:"Rates by Year",
            titleOrientation:"away",
            labels: yearList,
            font: "normal normal normal 9pt Arial", 
            majorLabels: true,
            minorTicks: false,
            minorLabels: false,
             microTicks: false });
          lineChart.addAxis("y", {
            title:rateNote, 
            vertical: true, 
            fixLower: "major", 
            fixUpper: "major", 
            min: 0,
            max: axisMax,           
            minorTicks: false, 
            minorLabels: true});
            //{vertical: true, min: 0, max: axisMax});
          lineChart.addSeries("Series 1", rateList, {
              stroke: { color: "red", width: 2 }
          }
      );
           var tip = Tooltip(lineChart, "default", {
              text : function(o) {
                var yr = yearList[o.x].text;
                var yrList = parseInt(yr) - 1;
                return ( yrList +'<br>' + o.y ); 
              } 
          });
          lineChart.render();  
         }


Everything works in this code except for the cropped markers.  Even the online examples for line charts look to have this problem too, but I'm hoping for a workaround anyway.

Outcomes