Zero value column in series still visible as tiny line !

[ql_maxg]

Please check here

http://jsfiddle.net/t8ufarc3/22/

2015-08

When series item has 0 value tiny line is still visible!

Please fix this...

var jcharfx1 = null;
            var jcharfx1_isinit = false;    
           var loadchart1 = function() {                       
        
            jcharfx1 = new cfx.Chart();
              
	
             var  data = [{'Date':'2015-01', 'First Yield':86.98,'Quantity':2442}, {'Date':'2015-02', 'First Yield':90.18,'Quantity':1823}, {'Date':'2015-03', 'First Yield':91.81,'Quantity':1062}, {'Date':'2015-04', 'First Yield':92.06,'Quantity':2229}, {'Date':'2015-05', 'First Yield':63.38,'Quantity':1117}, {'Date':'2015-06', 'First Yield':82.32,'Quantity':1420}, {'Date':'2015-07', 'First Yield':86.34,'Quantity':2701}, {'Date':'2015-08', 'First Yield':88,'Quantity':0}, {'Date':'2015-09', 'First Yield':75.71,'Quantity':3491}, {'Date':'2015-10', 'First Yield':63.08,'Quantity':4049}, {'Date':'2015-11', 'First Yield':85.1,'Quantity':4631}, {'Date':'2015-12', 'First Yield':86.5,'Quantity':2044}, ];
             
            jcharfx1.setDataSource(data);

                
          
             
             
             jcharfx1_isinit = true;             
                jcharfx1.setBorder(null);
                jcharfx1.setBackColor("#333740");
                jcharfx1.getAxisX().setTextColor("#f4f4f4");
                jcharfx1.getAxisY().setTextColor("#f4f4f4");
                jcharfx1.getAxisY2().setTextColor("#f4f4f4");
                jcharfx1.getAxisY().getGrids().getMajor().setColor("#666666");
                jcharfx1.getLegendBox().setTextColor("#f4f4f4");
                
                jcharfx1.setPlotAreaColor("#333740");
		jcharfx1.getToolTips().setEnabled(true);
		jcharfx1.getLegendBox().setDock(cfx.DockArea.Bottom);	
                jcharfx1.getLegendBox().setVisible(false);
                jcharfx1.getMenu().setVisible(false);
                 jcharfx1.getAxisY().getTitle().setText("Quantity"); jcharfx1.getAxisY().getTitle().setTextColor("#f4f4f4"); jcharfx1.getAxisX().getTitle().setText("Timeline"); jcharfx1.getAxisX().getTitle().setTextColor("#f4f4f4"); var points = jcharfx1.getPoints(); points.getItem(-1, 11).setColor("#0080ff"); points.getItem(-1, 11).getBorder().setColor("#00b0ff"); points.getItem(-1, 11).getBorder().setWidth(3);   
               
               
               
             
             
                
                 var seriesItem =  jcharfx1.getSeries().getItem(0); if(typeof seriesItem != "undefined"){  seriesItem.setMarkerShape(cfx.MarkerShape.Circle); seriesItem.setMarkerSize(6); seriesItem.getPointLabels().setVisible(true); seriesItem.getPointLabels().setTextColor("#f4f4f4");  seriesItem.setAxisY(jcharfx1.getAxisY2()); jcharfx1.getAxisY2().getGrids().getMajor().setVisible(false); seriesItem.getAxisY().getDataFormat().setDecimals(2); jcharfx1.getAxisY2().getTitle().setText("First Yield (%)"); jcharfx1.getAxisY2().getTitle().setTextColor("#f4f4f4"); seriesItem.setGallery(cfx.Gallery.Lines);  seriesItem.setColor("#9e53a0"); seriesItem.getPointLabels().setFormat(" %v %%"); seriesItem.getPointLabels().setOffset("0,0"); var line = seriesItem.getGalleryAttributes(); line.setTemplate("LineBasic"); seriesItem.getAxisY().getDataFormat().setDecimals(2); }  
             
             var seriesItem2 =  jcharfx1.getSeries().getItem(1); if(typeof seriesItem2 != "undefined"){  seriesItem2.setMarkerShape(cfx.MarkerShape.None); seriesItem2.getPointLabels().setVisible(true); seriesItem2.getPointLabels().setTextColor("#f43333");  seriesItem2.setGallery(cfx.Gallery.Bar);  seriesItem2.setColor("#5ed7dd"); seriesItem2.getPointLabels().setOffset("0,-25"); var bar = seriesItem2.getGalleryAttributes(); bar.setTemplate("BarBasic"); seriesItem2.getAxisY().getDataFormat().setDecimals(0); } 
             
             
               jcharfx1.create($("#jchartfx_ChartDiv2")[0]);                  


                                  
            

            };
            $(function () { loadchart1();  });

[JuanC]

I am afraid this is by design, You can change the 0 with cx.Chart.Hidden and the bar will not be displayed at all for that particular value. cfx.Chart.Hidden also has the behavior of breaking up a connected gallery (such as line or area) in 2 segments.

 

JuanC

[ql_maxg]

Juan, this is not logical, if column is visible, it means value is > 0, I think it MUST BE hidden completely...

Its a bug.

[JuanC]

That is what we used to do but feedback from customers moved us to the current design.

 

Although I can understand your point of view that a bar with 0 should not be visible, specially now that we use a thicker border, the current approach has a certain consistency with connected galleries (line, area, curve) where a 0 will still connect the previous value with 0 while a "special" value (cfx.Chart.Hidden) breaks the line/area in 2 segments. Bars with a 0 value are drawn with just the border while bars with Hidden are completely invisible.

 

We will research adding a flag that would treat 0 as hidden for bars, whether we change that to be the default is trickier because we would be changing the behavior for all customers.

 

JuanC

 

PS: In the meantime you could quickly loop through your data before passing it to the chart replacing 0 with cfx.Chart.Hidden

[ql_maxg]

I am afraid this is by design, You can change the 0 with cx.Chart.Hidden and the bar will not be displayed at all for that particular value. cx.Chart.Hidden also has the behavior of breaking up a connected gallery (such as line or area) in 2 segments.

 

JuanC

in this post you mislead me with wrong code, it cost me a day to catch that bug, the hidden code should be cfx.Chart.Hidden, no cx.Chart.Hidden ...!

[JuanC]

Sorry for the typo, I think it was autocorrect gone wrong as it happened twice, I will be fixing the posts.

 

Note that we only declare one public global object (cfx) to avoid pollution.

 

JuanC