Jump to content
JChartFX Community
  • 0
Sign in to follow this  
ql_maxg

Zero value column in series still visible as tiny line !

Question

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();  });

Share this post


Link to post
Share on other sites

5 answers to this question

Recommended Posts

  • 0

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

Share this post


Link to post
Share on other sites
  • 0

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

Share this post


Link to post
Share on other sites
  • 0

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 ...!

Share this post


Link to post
Share on other sites
  • 0

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

Share this post


Link to post
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...
Sign in to follow this  

×
×
  • Create New...