Angularjs Directive using ejChart

[paul jilek]

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]

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]

Hi Gowrimathi

 

Thanks for you reply.  When would you expect the new version to be released?

 

Cheers

 

Paul

[Gowrimathi S]

Hi paul,

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

Regards

Gowri

[Gowrimathi S]

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