How to sort ej:Chart in the client side

[Kalinduni Kolambage]

On the X axis, I need to sort this chart by month name (like January, February, March,... December) in the client side.

I'm kindly requesting that you give your valuable consideration to this and give me a solution ASAP.

Thank you.

Best Regards,

Kalinduni

[Durga Gopalakrishnan]

Hi Kalinduni,

Greetings from Syncfusion.

We have analyzed your reported scenario. As per your screenshot, it seems to be you are using string value for X axis. If x axis value type is category, you cannot sort the values based on your requirement. We suggest you to use DateTime axis to achieve your required scenario. Please check with the below snippet and sample.

<ej:Chart ID="Chart1" OnClientLoad="onChartLoad">

   <PrimaryXAxis ValueType="DateTime" IntervalType="Months" LabelFormat="MMM">

   </PrimaryXAxis>

</ej:Chart>

<script>

        function onChartLoad(args) {

            args.model.primaryXAxis.range.min = new Date(2015, 0, 02);

            args.model.primaryXAxis.range.max = new Date(2015, 11, 02);

        }

</script>

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/StackedBar-1961285542.zip

We also request you to share the following information which will be helpful for further analysis and provide you the solution sooner.

• Please share your sample (or) code snippet with full configurations.
• Share the details if you have done any other customization in your sample.
• Share your datasource file.

Kindly revert us if you have any concerns.

Regards,

Durga Gopalakrishnan.

[Kalinduni Kolambage]

Hello Durga,

This is not working for me. I got the data for the chart from the database, and here I've attached that executed query.

Here I've attached how I created the chart.

Finally, I attached the chart1_bind function here.

I'm kindly requesting that you give your valuable consideration to this and give me a solution ASAP.

Thank you.

Best Regards,

Kalinduni

[Durga Gopalakrishnan]

Kalinduni,

As stated earlier, when category axis is used and applying sorting for categories will sort axis labels in alphabetical order(not in Jan, Feb, Mar, etc,.), so we suggested to use datetime axis in which this axis type will display date time values in linear interval, hence axis labels will be in months basis for month data.

We have accessed data from controller using ajax request and assigned for chart series datasource based on your requirement. Please check with below snippet and sample.

<div id="Chart1"></div>

    <script type="text/javascript">

        window.onload = function () {

            $.ajax({

                url: 'ChartFeatures.aspx/Getjsondata',

                type: 'POST',

                data: '{}',

                contentType: 'application/json',

                dataType: 'json',

                success: function (result) {

                    for (var i = 0; i < result.d.length; i++) {

                        var data = result.d[i].Data;

                        for (var j = 0; j < data.length; j++)

                            data[j].x = new Date(parseInt(data[j].x.substr(6)));

                    }

                    $("#Chart1").ejChart(

                        {

                         series:

                                [

                                    {

                                        dataSource: data,

                                        xName: 'x',

                                        yName: 'y'

                                    },

                                    {

                                        dataSource: data,

                                        xName: 'x',

                                        yName: 'y'

                                    }

                                ],

                        });

                },

                error: function (error) {

                    alert(error);

                }

            });

        }

      

    </script>

Please let us know if you have any other concerns.

Regards,

Durga Gopalakrishnan.

Attachment: StackedBar_26c2446.zip