We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

Angularjs Directive using ejChart

Thread ID:

Created:

Updated:

Platform:

Replies:

115441 Jan 17,2014 12:12 AM Jan 29,2014 05:12 AM JavaScript 4
loading
Tags: General
paul jilek
Asked On January 17, 2014 12:12 AM

Hi

I'm trying to make a dynamic Angularjs Directive using your ejChart component.  What I am trying to achive is before the Chart is created the JSON data passed to it is queried and the Series are created on the fly as opposed to having the Series hard coded.  Eg. if I have a datasource as the JSON array:

[{"xMonth":"April (2013)","yAccounts_Issues":30,"yAccounts_No_Issues":0},{"xMonth":"May (2013)","yAccounts_Issues":41,"yAccounts_No_Issues":1900},{"xMonth":"June (2013)","yAccounts_Issues":19,"yAccounts_No_Issues":4172},{"xMonth":"July (2013)","yAccounts_Issues":124,"yAccounts_No_Issues":3642},{"xMonth":"August (2013)","yAccounts_Issues":196,"yAccounts_No_Issues":2030},{"xMonth":"September (2013)","yAccounts_Issues":187,"yAccounts_No_Issues":1068},{"xMonth":"October (2013)","yAccounts_Issues":417,"yAccounts_No_Issues":1971},{"xMonth":"November (2013)","yAccounts_Issues":194,"yAccounts_No_Issues":2367}]

I want to query the array and create Series based on the prefix of the key with the y and x and then inject it into the Chart creation.  In this example there will be 2 Series created and I want this to be dynamic.

My directive thus far is as follows:

myApp.directive('sfChart', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {

            // Waiting for the sfChartData to be returned from Angular Resource promise
            scope.$watch(attrs.sfChartData, function (newval) {
                if (!newval || newval.length < 1) {
                    return;
                }
                createChart(newval);
            }, true);

            function createChart(data) {
                var labelRot = attrs.xaxisLabelRotation.length > 0 ? attrs.xaxisLabelRotation : 0;
                var chartHeight = attrs.chartHeight.length > 0 ? Number(attrs.chartHeight) : 800;
                var chartWidth = attrs.chartWidth.length > 0 ? Number(attrs.chartWidth) : 800;

                angular.element(element).ejChart(
                {
                    primaryXAxis:
                    {
                        title: { text: attrs.xaxisTitle },
                        labelRotation: labelRot,
                        rangePadding: 'none',
                        primaryXAxis: { columnIndex: 2 }
                    },
                    primaryYAxis:
                    {
                        title: { text: attrs.yaxisTitle },
                        rangePadding: 'none'
                    },
                    //crossHair: {
                    //    visible: true,
                    //    marker: {
                    //        shape: "circle",
                    //        size: {
                    //            height: 5, width: 5
                    //        },
                    //        visible: true,
                    //        style: {borderWidth: 1}
                    //    },
                    //    line: {
                    //        color: "transparent",
                    //    },
                    //},
                    series: [
                        {
                            name: 'A/cs without Issues',
                            animation: true,
                            style: { borderWidth: 1 },
                            dataSource: {
                                data: data,
                                xName: attrs.xaxisData,
                                yNames: ["yAccounts_No_Issues"]
                            }
                        },
                        {
                            name: 'A/cs with Issues',
                            animation: true,
                            style: { borderWidth: 1 },
                            dataSource: {
                                data: data,
                                xName: attrs.xaxisData,
                                yNames: ["yAccounts_Issues"]
                            }
                        }
                    ],
                    needResize: true,
                    showTooltip: true,
                    size: {
                        width: chartWidth,
                        height: chartHeight
                    },
                    //zooming: { enabled: true, type: "y" },
                    commonSeriesOptions: {
                        type: attrs.type,
                        animation: true,
                        tooltipFormat: "#series.name# <br/>#point.x# : #point.y#",
                        elementSpacing: 10,
                        marker:
                        {
                            shape: 'circle',
                            size:
                            {
                                height: 10,
                                width: 10
                            },
                            visible: false,
                        },
                        style: { borderWidth: 2 },
                    },
                }
                );
            }
        }
    };
});

Thanks

Paul


Gowrimathi S [Syncfusion]
Replied On January 20, 2014 10:37 PM

Hi paul,

Thanks for using syncfusion product.

We have an issue in angular support for js chart, we will fix this issue and the fix will be available for next service pack release.

Regards
Gowrimathi S



paul jilek
Replied On January 20, 2014 11:11 PM

Hi Gowrimathi
 
Thanks for you reply.  When would you expect the new version to be released?
 
Cheers
 
Paul

Gowrimathi S [Syncfusion]
Replied On January 22, 2014 12:46 AM

Hi paul,

Thanks for your update, service pack for js is expected to be available by the end of january.

Regards
Gowri

Gowrimathi S [Syncfusion]
Replied On January 29, 2014 05:12 AM

Hi paul,

Please ignore our previous update. Your requirement can be achieved using the JS chart.

Create an empty chart on controller as below

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

When you change the json array, query the array, create the series based on the prefix of y and redraw the chart

[JS]

var ele = $(element[0]).ejChart("instance");

  if (newval.indexOf("y") != -1) {

    ele.model.series[i].dataSource = { data: newvals, xName: "xMonth", yNames: [newval] };

  }

$(element[0]).ejChart("redraw");

Based on your requirement, we have created a chart in which the series collection is based on the number of json data that contains y prefix in the given array. Please find the sample from the attachment.

Note: please attach the  script required to run the sample.

 Regards

Gowrimathi S

 

 



angular_ef814b0d.zip

CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;