show/hide markers in javascript

[Manolo]

Hi,

I need show/hide serie's markers. So, when I export the chart, sometimes I need view markers or not.

I can't hide/show markers in javascript.

 function showMarker()
        {
           var chart = $("#container").ejChart("instance")

           if (visible)
           {
               //chart.model.series[0].marker.visible = true;
               $("#container").ejChart({
                commonSeriesOptions :{marker :{ visible : true}}
                });
                visible = false;
           }
           else
           {
                //chart.model.series[0].marker.visible = false;
                $("#container").ejChart({
                commonSeriesOptions :{marker :{ visible : false}}
                });
                visible = true;
           }

            $("#container").ejChart("redraw");
        }

I attach an example

Thanks

Attachment: SyncfusionMvcApplication1_66dd109b.zip

[Dharanidharan Dharmasivam]

Hi Manolo, 

Thanks for contacting Syncfusion support. 

We have analyzed your query. 

Before providing solution to your scenario, we would like to let you know that, you have rendered scatter series. In case of scatter series , the series will take shape of  the marker and toggling the marker’s visibility will not take effect in hiding the scatter series. However your requirement can be achieved by toggling the series visibility. Find the code snippet below. 

ASP.NET MVC: 

<div> Series Visibility:  

    <select id="seriesSelection" onchange="seriesChanged(this)"> 

        <option value="-1">None</option> 

        <option value="0">Series 1</option> 

        <option value="1">Series 2</option> 

    </select></div> 

 

function seriesChanged() { 

               var seriesIndex = parseInt($("#seriesSelection")[0].value); 

               var chart = $("#container").ejChart('instance'); 

               if (seriesIndex >= 0) { 

                   var seriesVisibility = chart.model.series[seriesIndex].visibility; 

                   chart.model.series[seriesIndex].visibility = seriesVisibility == 'visible' ? 'hidden' : 'visible'; 

               } 

               else 

                   for (i = 0; i < chart.model.series.length; i++) 

                       chart.model.series[i].visibility = 'visible'; 

               chart.redraw(); 

           } 

In the above code, we have provided drop down menu to toggle series visibility. You can change this with respect to your scenario. 

Find the modified sample from below link. 

http://www.syncfusion.com/downloads/support/forum/133253/ze/SyncfusionMvcApplication1308506391  

Kindly revert us, if you have any concerns. 

Thanks, 

Dharani. 

[Manolo]

Hi,

In your example, you hide all serie's point, but, in my scenario,  I need change the point by text, not hide the serie.

[Dharanidharan Dharmasivam]

Hi Manolo,  

Thanks for the update. 

We suspect that your requirement is to hide the scatter series,  but not the text(data label). If so, we have achieved this requirement  as a workaround by specifying fill color of the series as transparent. Find the code snippet to achieve this. 

<select id="seriesSelection" onchange="seriesChanged(this)"> 

        <option value="-1">None</option> 

        <option value="0">Series 1</option> 

        <option value="1">Series 2</option> 

    </select> 

 

function seriesChanged() { 

               var seriesIndex = parseInt($("#seriesSelection")[0].value), 

                   chart = $("#container").ejChart('instance'), 

                   //Specify the series fill color 

                   seriesFill = ["#E94649", "#F6B53F"]; 

                    

               if (seriesIndex >= 0) { 

                   var currentFill = chart.model.series[seriesIndex].fill; 

                   //Toggled the series fill color 

                   chart.model.series[seriesIndex].fill = currentFill == 'transparent' ? seriesFill[seriesIndex] : 'transparent'; 

               } else 

                   for (var i = 0; i < chart.model.series.length; i++) 

                       chart.model.series[i].fill = seriesFill[i]; 

               chart.redraw(); 

           } 

In the above code, using the drop down menu, we have toggled the series fill color.  Now the text (data label) will be visible, only the selected series will not be visible.  

Modified sample can be find from below link. 

http://www.syncfusion.com/downloads/support/forum/133253/ze/chartSample-681284266  

 

If this is not your scenario, kindly revert us with the following details, which will be helpful in further analysis and provide you the exact solution with respect to your scenario. 

• Provide some screenshot of your requirement.
• Do you need to hide the specific point with text(data label) or need to hide only specific points (circle in the attached sample).
• Or else provide more information on your exact scenario.

Thanks, 

Dharani. 

[Manolo]

Ok, I can use it.

Thanks a lot!

[Dharanidharan Dharmasivam]

Hi Manolo, 

Thanks for your revert. 

Kindly revert us, if you need further assistance. 

Thanks, 

Dharani.