Rectangle 27 1

I'd make use of the following:

  • A constant, to hold which types of charts you support throughout the application.
  • A named controller for each type of chart.
  • (Optional) A service to be aware of the currently active charts and what type they are.
var app = angular.module('app', []);

Register the constant to control which types we support

app.constant('chartTypes', ['typeOne', 'typeTwo']);
app.directive('chart', ['$controller', 'chartTypes', function ($controller, chartTypes) {
  return {

    restrict: 'E',

    scope: {
      'showGrouped': '='
    },

    controller: function ($scope, $element, $attrs) {

      if (chartTypes.indexOf($attrs.type) === -1) {

        throw new Error('Chart type ' + $attrs.type + ' is not supported at the moment');

      } else {

        return $controller($attrs.type + 'Controller', {
          $scope: $scope,
          $attrs: $attrs

        });
      }
    },

    link: function (scope, element, attrs, controller) {

      // Rock'n'roll...
      controller.init();

    }
  }
}]);

Note: I stripped away the ngModel requirement from the directive for now to make it clearer how to build something like this. I'm not sure how you would get ngModel to play alongside this solution, but I'm sure you can figure that one out.. If not, I'd be happy to give it a try later on.

app.controller('typeOneController', ['$scope', '$attrs', function ($scope, $attrs) {

  var ctrl = this;

  ctrl.init = function () {
    console.log('We are initialised and ready to rock!');
  };

  $scope.someFunc = function () {
    console.log($scope, 'is the isolate scope defined in the directive');
  };

}]);
<chart type="typeOne" legend="true"></chart>

<chart type="typeTwo" legend="true"></chart>

<chart type="typeThree" legend="true"></chart>
typeOne
  • Chart typeTwo should throw an error stating that a Controller by that name could not be found (undefined).
  • Chart typeThree should throw an error stating that the passed in chartType is not currently supported.

Now, this is not your conventional directive structure - but it's one I think is highly underused. The benefits of having your linking function be a controller, is that you can completely separate the $scope behaviour from the directive definition.

This in turn allows us to unit test $scope behaviour for the directive itself, without the need to instantiate the directive and its DOM structure in our unit tests. Another added benefit is that you don't have to setup multiple directives for different chart types, we simply call for a controller (or, linking behaviour (if you will)) based on the chart type passed into the directive definition.

This could be built on further to include services and what not, everything can then be injected into your Controllers, on a per-chart basis (or into the directive definition, to have it be there for all the charts), giving you a ton of flexibility and ease of testing to boot.

Another lesson to take home, is that anonymous functions as directive controllers are hard to test, in comparison to named controllers that are defined elsewhere, then injected into the directive. Separation is gold.

Let me know if this does the trick for you, or if you need a more in depth example of how to set it up.

I'll see if I can't get a plunker or something of the sort uploaded throughout the day.

Added jsFiddle showcasing the behaviour, albeit a bit simplified (not an isolated scope, no templateUrl): http://jsfiddle.net/ADukg/5416/

Edit 2: Updated the jsFiddle link, this one was with an isolated scope and hence the ng-click definition on the calling element does not fire off the isolated functions.

Edit 4: Added another jsFiddle, showcasing an isolate scope and a templateURL. More in line with what you are working with.

javascript - How to make directives look for two parameters? - Stack O...

javascript angularjs
Rectangle 27 14

I was recently looking for a javascript charting library and I evaluated a whole bunch before finally settling on jqplot which fit my requirements very well. As Jean Vincent's answer mentioned you are really choosing between canvas based and svg based solution.

To my mind the major pros and cons were as follows. The SVG based solutions like Raphael (and offshoots) are great if you want to construct highly dynamic/interactive charts. Or if you charting requirements are very much outside the norm (e.g. you want to create some sort of hybrid chart or you've come up with a new visualization that no-one else has thought of yet). The downside is the learning curve and the amount of code you will have to write. You won't be banging out charts in a few minutes, be prepared to invest some real learning time and then to write a goodly amount of code to produce a relatively simple chart.

If your charting requirements are reasonably standard, e.g. you want some line or bar graphs or perhaps a pie chart or two, with limited interactivity, then it is worth looking at canvas based solutions. There will be hardly any learning curve, you'll be able to get basic charts going within a few minutes, you won't need to write a lot of code, a few lines of basic javascript/jquery will be all you need. Of course you will only be able to produce the specific types of charts that the library supports, usually limited to various flavors of line, bar, pie. The interactivity choices will be extremely limited, that is to say non-existent for many of the libraries out there, although some limited hover effects are possible with the better ones.

I went with JQplot which is a canvas based solution since I only really needed some standard types of charts. From my research and playing around with the various choices I found it to be reasonably full-featured (if you're only after the standard charts) and extremely easy to use, so I would recommend it if your requirements are similar.

To summarize, simple and want charts now, then go with JQplot. Complex/different and not pressed for time then go with Raphael and friends.

JavaScript Chart Library - Stack Overflow

javascript charts
Rectangle 27 60

Highcharts is a charting library written in pure JavaScript, offering an easy way of adding interactive charts to your web site or web application. Highcharts currently supports line, spline, area, areaspline, column, bar, pie and scatter chart types.

Worth pointing out that this library is free for non-commercial use, but costs money for single-sites and multi-sites. It seems like a fairly reasonable price however.

At first it as a shameless plug but they look REALLY awesome!! It in not free fot commercial use though, I have no reference wether the pricing is reasonable or not but they look ok at a glance!

This is the same charting library used in CloudFlare.com, and it looks really great. I was about to use DevExpress charting library, which is ASP.NET and renders and image in the sever when I stumbled upon the highcharts library. I was convinced at once that this is the way to go. When I found out that CloudFlare, which has one of the most eye-catching dashboards/analytic's I've seen, uses it too I was sold! I'm currently experimenting with it, and it worked in my first attempt to embed a chart in my webpage... so it seems easy to use too!

One more vote for Highcharts. I'm currently using it, and it is great. Supports jQuery, Mootools and Prototype, and it is very easy to setup and use.

JavaScript Chart Library - Stack Overflow

javascript charts
Rectangle 27 5

To show the percentage value on charts, you would need to use the %npv (node-percent-value) token instead of %v which displays the raw value. More information in the pie chart types page : http://www.zingchart.com/docs/chart-types/pie/

Note that the default functionality for a value box is

"value-box" : {
          "placement" : "in",
          "text" : "%npv%"
       }

Therefore, you can choose to omit that from your JSON. In the example below, I have shown the JSON with the options explicitly.

var slices = [
  {"values":[59],"text":"USA"},
  {"values":[55],"text":"UK"}
];
var chartData = {
    "type":"pie",
    "series": slices,
    "plot" : {
       "value-box" : {
          "placement" : "in",
          "text" : "%npv%"
       }
     }
};

zingchart.render({
        id:"pie-chart",
        data: chartData,
        height:400,
        width:"100%"
    });
<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
<div id="pie-chart"></div>

I wasn't asking about the percentage appearing in the value box (the text separated from each slice by a line), but having the percentage appear ON the slice. Just using %npv will only change the value box.

The value-box in your json has the placement set to "out". Change it to "in", and the value box should appear on the slice. What version of ZingChart are you using? The percentages appear on each pie slice by default in v2.2.0+ .

Thanks. I wasn't aware of the "in" vs the "out" placement. I am using I assume the most recent version, as I am accessing the CDN hosted script. Just checked: 2.2.2. That's what's weird. Every example on the ZingChart site shows the percentage appearing on the slice and in the JS that they show, there is no configuration setting for that, but I cannot recreate it.

See updated post for a snippet.

Mike. Thanks. Is there any way to have both in and out, so the percentage is shown inside and the text/values are shown outside with the line?

Percentages on Slices of ZingChart Pie Chart - Stack Overflow

zingchart
Rectangle 27 8

_Workbook.Sheets gives you a Sheets instance. This interface gives you all types of sheets, not just worksheets; mainly, it includes charts, macro sheets, etc.

On the other hand, the Worksheets interface only gives you worksheets - not charts.

The interfaces are not assignable to each other; therefore, you get the COM error. It's confusing - I'm not even sure if it's possible to get an instance of the Worksheets interface through the PIA - but that's Office Interop for ya.

As long as you use the _Workbook.Worksheets property instead of the _Workbook.Sheets property, you should get an instance of Sheets that only returns Worksheet objects - in spite of the fact that the interface is capable of providing other types of sheets.

@Zach & @Joel are right too, but you were the first to the starting gate, the the green check.

Even though this is quite well-documented, it might be one of the questions/answers that make so worthwhile.

Excel.Workbook.Worksheets
Excel.Sheets
Excel.Worksheets

c# - Why can't set cast an object from Excel interop? - Stack Overflow

c# excel interop .net-2.0
Rectangle 27 12

Take a look at Color Brewer, a tool that helps to define a coloring scheme to convey qualitative or quantitative information: maps, charts, etc. Out of three "types" of palettes that this tool can generate - sequential, qualitative, and diverging - you probably need the latter, diverging...

You can even download Excel files with RGB definitions of all the palettes.

algorithm - How pick colors for a pie-chart? - Stack Overflow

algorithm design colors rgb