background preloader


Chart.js provides a number of options for changing the behaviour of created charts. These configuration options can be changed on a per chart basis by passing in an options object when creating the chart. Alternatively, the global configuration can be changed which will be used by all charts created after that point. Chart Data To display data, the chart must be passed a data object that contains all of the information needed by the chart. Creating a Chart with Options To create a chart with configuration options, simply pass an object containing your configuration to the constructor. Global Configuration This concept was introduced in Chart.js 1.0 to keep configuration DRY, and allow for changing options globally across chart types, avoiding the need to specify options for each instance, or the default for a particular chart type. Chart.js merges the options object passed to the chart with the global configuration using chart type defaults and scales defaults appropriately. Example Usage Related:  Data visualisationYBOO_twitter

Let’s Make a Bar Chart, III In the previous parts of this tutorial we made a basic bar chart in HTML and then in SVG; now, we’ll improve the display by rotating the chart into columns and adding axes. We’ll also switch to a real dataset, showing the relative frequency of letters in the English language. Source: Cryptological Mathematics, Robert Lewand. #Rotating into Columns Rotating a bar chart into a column chart largely involves swapping x with y. However, a number of smaller incidental changes are also required. When renaming the x scale to the y scale, the range becomes [height, 0] rather than [0, width]. We previously multiplied the var barHeight by the index of each data point (0, 1, 2, …) to produce fixed-height bars. Lastly, the bar labels must be positioned differently for columns rather than bars, centered just below the top of the column. #Encoding Ordinal Data Unlike quantitative values that can be compared numerically, subtracted or divided, ordinal values are compared by rank. #Preparing Margins

Creating a Sentiment Analysis Application Using Node.js Sentiment analysis helps you in understanding what people think about a certain topic. The sentiment analysis app we are going to build will take in a keyword(s) and will fetch the matching tweets from Twitter. Then, it will run each tweet through an AFINN powered sentiment analysis Node module. This module will score the tweet text, and finally will display the relevant statistics. Before we get started, you can take a look at the demo here. You can download the complete source code from here. Technology Stack This app is built on top of Nodejs. We will be using the Twitter module to interact with Twitter and Sentiment module to perform the analysis. So, let’s get started. Setup the App Create a new folder named sentimentAnalysisApp and open a new terminal/prompt here. npm i -g gulp slush slush-express Once the above modules are installed, we will scaffold a new Express app using this command: slush express Slush will ask you to pick a view engine and a style sheet engine. [?] <!

EJS TreeGrid Charts Easy 1.Search WP charts via plugins > add new. 2.find the plugin listed and click activate. 3. Use the Shortcodes and widget for fun and profit Not So Easy Fire up your favourite FTP and upload wp_charts folder to the /wp-content/plugins/ directoryActivate the plugin through the 'Plugins' menu in WordPressFor Now - Use the Shortcodes for fun and profit Usage Basic Concept the basic shortcode is [wp_charts] which on its own should not produce anything. you will need to add properities to the shotcode for it to work. Important Every chart reuqires a type, title and data or datasets attributes.if you're using a Pie, Doughnut, or PolarArea chart type you must use the data shortcode attribute (as these are 1 dimensional charts), where as if you're using the Bar, Line or Radar chart types you must use the datasets attribute (as these types are multidimentional). All Shortcode Attributes Non Symmetrical Charts WP Charts Widget

Creating Animations and Transitions With D3 For the ambitious, this is a great intro to creating your own animations and transitions in d3.js. If you get in over your head, drop by the Visually Marketplace to hire one of our talented developers. In interactive visualisation, there is the word reactive. Well, maybe not literally, but close enough. The fact is that reactivity, or the propension of a visualisation to respond to user actions, can really help engage the user in a visualisation, and help them understand its results. Both of which are usually good things. So I’ll go ahead and state that animation, if done right, can make any interactive data visualization better. How is that? When coupled with interaction, it’s a very useful way to give feedback to the user. That said, animation can definitely ruin your visualization, too. Animation is very prominent. So we’ve seen how animation is helpful in data visualization. The principle If you know how to draw in d3, you almost know how to animate. A few examples of transitions

Votre premier module AngularJS | Tutoriel AngularJS Spécifier le contrôleur Avant tout, on déclare notre contrôleur, comme on l'a vu au chapitre précédent, avec son nom et ses dépendances. Ici, il ne dépend que du service $scope. Et par la même occasion, on initialise la liste des todos avec un tableau vide. todoList.controller('todoCtrl', ['$scope', function ($scope) { var todos = $scope.todos = []; }]); J'ai profité de cette initialisation pour faire correspondre la variable todos à la variable $scope.todos. Vous remarquerez à ce propos, qu'on se contente d'appeler le service $scope pour manipuler LE scope de notre contrôleur et uniquement celui-là. Attention à ne pas confondre le service $scope et UN scope comme par exemple celui du contrôleur ou encore celui de ng-repeat. Ajouter un todo Ensuite, on implémente la fonction qui permet d'ajouter un todo : Quelques remarques sur cette fonction : Déclaration dela fonction À la ligne 30, on déclare bien la fonction comme une propriété du scope du contrôleur. Ajout du todo Two-Way DataBinding

Learning JavaScript Design Patterns Design patterns are reusable solutions to commonly occurring problems in software design. They are both exciting and a fascinating topic to explore in any programming language. One reason for this is that they help us build upon the combined experience of many developers that came before us and ensure we structure our code in an optimized way, meeting the needs of problems we're attempting to solve. Design patterns also provide us a common vocabulary to describe solutions. This can be significantly simpler than describing syntax and semantics when we're attempting to convey a way of structuring a solution in code form to others. In this book we will explore applying both classical and modern design patterns to the JavaScript programming language. Target Audience This book is targeted at professional developers wishing to improve their knowledge of design patterns and how they can be applied to the JavaScript programming language. Acknowledgments Credits Reading We already use patterns everyday

Easy Visualization Tools for WordPress Easy Visualization Tools for WordPress This plugin provide you with a perfect way to visualize all kinds of different data on your website. From simple line charts to complex combo charts, the plugin provides a large number of well-designed chart types all from the Google Chart Tools API, Google Maps API and our own simple Flip Numbers. Whether you choose to enter your data manually in the wp-admin or use the dynamic data option or Google Analytics you will be able to create amazing looking charts in no time. Get Started Go to the “EVT Settings” menu in wp-admin and then click “Add new tools” Enter a title and choose how you want to add your data: manually, data file from media library or data from a URL. Take a peek on how Easy Visualization Tools looks live and try for your self how easy it is to visualize your data. Username: DemoUserPassword: TryMeNow Google Chart Library Charts are exposed as JavaScript classes. List of features Google Maps Chart Types Flip Numbers Support and Updates

Let's Make a Bar Chart | Alex Coco A few days ago I started taking a closer look at Michael Bostock's D3.js. D3 is an amazing JavaScript library for mapping data to HTML elements or SVG nodes. I started off making some bar charts with HTML elements and then moved onto SVG nodes and transitions. Generally, to make simple charts, all you need to do is follow these steps: Select the place you want to put your chartSelect all the chart componentsApply the data to this selectionAdd a new compononent for each piece of data that wasn't appliedPosition the new componentsApply any other attributes or styles Here's an example of a bar chart and the code that will create it below: When setting an attribute, the second argument can be a literal, variable, or a function. D3 also lets you apply transitions to selections. Transitions are simple: append a call to transition() and set the delay and/or duration with calls to delay and duration. D3 can do so much more than just displaying bar charts or line graphs.

Accès à mysql avec node.js Dans cet article, je vous montre comment se connecter et faire des requêtes sur une base de données mysql depuis un script node.js. Pour la version anglaise, cliquez sur MYSQL ACCESS FROM NODE.JS. L’utilisation de mysql avec node.js nécessite l’installation d’un module spécifique, la suite ci-dessous… - Avoir un serveur mysql installé; – savoir ce qu’est node.js (voir l’article Comprendre node.js – avoir installé node.js (voir l’article Installer node.js sous Windows). Rien de complexe ici, il suffit d’exécuter les scripts suivants sous mysql. Rien ne vous empêche d’utiliser phpmyadmin pour le faire. La création de la base de données mysqltest : La création de la tables test test : Depuis la ligne de commande, placez dans le dossier de votre projet test et exécutez la commande suivante : Vous devriez voir se faire l’installation comme suit : Toujours dans le dossier de votre projet, créez un fichier mysql.js destiné à intégrer le code javascript se connectant à la base de données mysql.