Changing The Scale and Having a Variable Number of Items on the X Axis

[Steven]

Good Evening,

I have a line chart which looks as follows:

I have 2 questions:

1. How do I allow the user to select a variable number of items on the X axis? In my example I want the user to be able to see the last 3 months, 6 months or the full year preferably with either a radio button or checkbox. If I want to see the last 3 months it should show me October, November, and December or if I want to see 6 months, I should be able to see July, August, September, October, November and December

2. How do I change the scale to whole numbers only. In my example a person cannot perform half of a mass.

Thanks,

Steven

[Srihari Muthukaruppan]

Hi Steven, 

Please find the response for chart related queries. 

Query #1: I want the user to be able to see the last 3 months, 6 months or the full year preferably with either a radio button or checkbox. 

  

We have analysed your query. Based on your requirement we have prepared a sample for your reference. In which we have used checkbox and on click we have modified the datasource to achieve your requirement. Please find the sample and screenshot below.  

  

Code Snippet:  

<div class="col-md-4 property-section"> 

    <table id="property" title="Properties" style="width: 100%"> 

        <tr id='' style="height: 50px"> 

            <td style="width: 80%"> 

                <div> Show Last three Months:</div> 

            </td> 

            <td> 

                <input type="checkbox" id="three" style="margin-top: 15px; margin-left: -60px"> 

            </td> 

        </tr> 

        <tr id='' style="height: 50px"> 

            <td style="width: 80%"> 

                <div> Show Last six Months:</div> 

            </td> 

            <td> 

                <input type="checkbox" id="six" style="margin-top: 15px; margin-left: -60px"> 

            </td> 

        </tr> 

    </table> 

</div> 

// add your additional code here 

var loaded = function (args) { 

        if (count == 0) { 

            dataSource = args.chart.series[0].dataSource; 

            count++ 

        } 

    } 

 

    document.getElementById('three').onchange = function () { 

        var chart = document.getElementById('container').ej2_instances[0];         

        var element = (document.getElementById('three')); 

        chart.allowMultiSelection = element.checked; 

        chart.series[0].animation.enable = false; 

        var data1 = []; 

        if (element.checked) { 

            for (var i = 0; i < chart.series[0].dataSource.length; i++) { 

                if (i > 8) { 

                    data1.push(chart.series[0].dataSource[i]) 

                } 

            } 

            chart.series[0].dataSource = data1; 

        } else { 

            chart.series[0].dataSource = dataSource; 

        } 

        chart.refresh(); 

    }; 

    document.getElementById('six').onchange = function () { 

        var chart = document.getElementById('container').ej2_instances[0]; 

        var element = (document.getElementById('six')); 

        chart.series[0].animation.enable = false; 

        var data1 = []; 

        if (element.checked) { 

            for (var i = 0; i < chart.series[0].dataSource.length; i++) { 

                if (i > 5) { 

                    data1.push(chart.series[0].dataSource[i]) 

                } 

            } 

            chart.series[0].dataSource = data1; 

        } else { 

            chart.series[0].dataSource = dataSource; 

        } 

        chart.refresh(); 

    }; 

  

Screenshot:  

 

  

Query #2: How do I change the scale to whole numbers only. In my example a person cannot perform half of a mass. 

  

We have analysed your query. From that, we would like to let you know that we can achieve your requirement using interval property in the axis of the chart. Based on your requirement we have prepared a sample for your reference. Please find the sample and screenshot below.  

  

  

Screenshot:  

   

  

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/CheckboxSample1880546680.zip  

  

Let us know if you have any concerns.  

  

Regards,  

Srihari