Chartjs V2 Add Custom Legend and Show/Hide Chart Data through Click

To add interactive feature for Chartjs version such as select/unselect group of data, you can use chart.metadata.hidden attribute. For doghnut chart, the hidden attribute can work with datasets and data both. However, for line and bar chart, only datasets.hidden is effective. To work with line and bar chart, you need to manually change data.

Following method can be used to add the interactive feature with Custom Legend for bar/line/doghnut charts:

//add custom legends
var addCustomLegends = function (canvas, data) {
    var legendLabel = canvas.replace('canvas', 'legendLabel');
    var legendNameBase = canvas.replace('canvas', 'legend');
    $('#' + canvas).before('<div id="' + legendLabel + '" style="width:100%;text-align:center;padding-left:25px;padding-right:25px;"></div>');
    var divWidth = 75 / data.labels.length;
    var innerHTMLStr = '';
    for (var i = 0; i < data.labels.length; i++) {
        var clickEvents = '';
        clickEvents += 'hideChartLabels(event,\'' + i + ',' + data.labels.length
            + ', \'#datalist\');'; //don't put space after comma inside the string presenting as array
    }
    innerHTMLStr += '<div style="display:inline-block; height:12px; text-align:center; vertical-align:middle; margin-right:5px; background:' + gbService.getColor('lightgray') + '; border:1px solid rgba(0, 0, 0, .2); width: '
        + '12px;"></div><div id="' + legendNameBase + i + '" style="display:inline-block; text-align:center; vertical-align:top; padding-right:10px; width=' + divWidth + '"% '
        + ' onclick ="' + clickEvents + '">'
        + data.labels[i] + '</div>';
    }
    document.getElementById(legendLabel).innerHTML = innerHTMLStr;
    if (legendStatus != null && legendStatus.length == data.labels.length) {
        for (var i = 0; i < data.labels.length; i++) {
            if (legendStatus[i] !== 'none') { //hidden the data
                $('#' + legendNameBase + i).click();
            }
        }
    }
}

var hideChartLabels = function (e, idName, index, length) {
    var idNameBase = idName;
    if (index < 10) {
        idNameBase = idNameBase.substring(0, idNameBase.length - 1);
    }
    else {
        idNameBase = idNameBase.substring(0, idNameBase.length - 2);
    }

    if (chart == null || chart == undefined) return;
    var data = chart.data;

    //draw the line-through to show the data is hidding
    if ($('#' + idNameBase + index).css("text-decoration") == "none") {
        $('#' + idNameBase + index).css({ "text-decoration": "line-through" });
    }
    else {
        $('#' + idNameBase + index).css({ "text-decoration": "none" });
    }

    //set hidden attribute for meta data
    for (var i = 0; i < data.datasets.length; i++) {
        updateChartDatasetItem(window[chart], i, index);
    }

    chart.update();
};

var updateChartDatasetItem = function (ci, index, elementIndex) {
    var meta = ci.getDatasetMeta(index);
    if (meta.dataset) {
        meta.hidden = !meta.hidden; //hidden whole dataset
    }
    else {
        meta.data[elementIndex].hidden = !meta.data[elementIndex].hidden;
    }
}

Reference:
https://github.com/chartjs/Chart.js/issues/2565

How to run R script under SQL Server 2016

SQL Server 2016 has one new feature: R services. This is a good news for data scientist. You can choose install SQL Server 2016 express version with advanced service, or you can also choose to upgrade your current SQL Server older express version to 2016 express to use the new feature. Note after you finished your installation, you need to manually install the feature using SQL Server 2016 installation program.

After you finished the installation, you need to lauch SQL Server Management Service 2016, and run the following script:

Exec sp_configure  'external scripts enabled', 1  
Reconfigure  with  override  

After running this script, you need to restart your SQL Server Database instance, and run the following script:

Exec sp_configure  'external scripts enabled'  

After running the above script, it should get the following result:
 

After finish above configuration, you need to manually restart SQL Server LauchPad service:
To restart the LauchPad service, please go to Windows Administrative Tools -> Services and find "SQL Server LauchPad (Your DB Name)"


Now the last step to test if you can run R script:

exec sp_execute_external_script  @language =N'R',  
@script=N'OutputDataSet<-InputDataSet',    
@input_data_1 =N'select 1 as hello'  
with result sets (([hello] int not null));  
go  

Expected Results:

hello 1

If experience the following error, you need to restart the LauchPad service.

Msg 39011, Level 16, State 1, Line 1
SQL Server was unable to communicate with the LaunchPad service. Please verify the configuration of the service.


Reference:
https://msdn.microsoft.com/en-us/library/mt696069.aspx
http://dba.stackexchange.com/questions/120205/msg-39011-sql-server-was-unable-to-communicate-with-the-launchpad-service

How to display data values on chart.js

http://stackoverflow.com/questions/31631354/how-to-display-data-values-on-chart-js

http://jsfiddle.net/uh9vw0ao/

How to install window service

A window service need to be installed at first. Under Windows 10, click on window button, type dev inside the search input, and choose Developer Command Prompt for VS2012, which is the service installer named installutil.exe.

Note, when you applying installutil to install window service, you need to run it with Administrator privilege.

Then go to the directory of compiled service, usually it's inside directory of bin/debug, and type
installutil yourservice.exe.

Your service will be installed successfully.

Reference:
http://www.c-sharpcorner.com/uploadfile/naresh.avari/develop-and-install-a-windows-service-in-c-sharp/

Integrated R.Net within your ASP.Net MVC applicaiton

R is a programming language used for statistical computing. For business intelligence, R is very useful for prediction marketing. To better integrating R into Microsoft .Net system, there is one tool named R.Net. You can use NuGet to install R.Net to your .net project. The latest version of R.Net is 1.6.5. You can use the following command to install the latest R.Net:
Install-Package R.NET.Community
Note R.Net didn't set the environment variable correctly. So the first issue you suffered for R.Net would be package installation.

REngine r = REngine.GetInstance();
r.Evaluate("library(RODBC)");

An unhandled exception of type 'RDotNet.EvaluationException' occurred in RDotNet.dll
Additional information: Error: package or namespace load failed for 'RODBC'

This is happened because R.net can't find r.dll as the Path doesn't included. To set the correct Path under windows 10, click on windows button, choose Settings, click on System, choose About from the left menu, scroll down to the bottom, click on System Info, choose Advanced System Setting from the left menu, choose the Tab of Advanced, click on Environment Variables button, then click on Edit button, click on New button, add following path:
C:\\Program Files\\R\\R-3.3.1\\bin\\i386
After this, restart windows 10, you should resolve this issue. Note other resources prefer to add more paths such as library, it's wrong!!! It will affect some packages installation.


Reference:
https://www.nuget.org/packages/R.NET.Community/
http://jmp75.github.io/rdotnet/ts_asp_dot_net/

How to align an image center inside div

HTML Blocks are elements established as a block-level element, which are created by using the <div> element.

The most common way to center blocks with CSS is to set both the left and right margins to auto. Here is the CSS:

<style>
  div.center {
    margin: auto;
  }
</style>

The most common way to center blocks with CSS is to set both the left and right margins to auto. Here is the CSS:

Reference:
https://www.w3.org/Style/Examples/007/center.en.html

How to vertical align an image inside an anchor

To vertical align an image inside an anchor, there are 3 necessary parts inside the CSS:

1. Your anchor should have same  height and inline-height.
2. Your image should have vertical-align: middle;
3. Your image should have display: inline-block;

<style>
    .thumbnail {
        width: 150px;
        height: 150px;
        text-align: center;
        line-height: 150px;
    }
    .thumbnail img {
        margin: auto;
        vertical-align: middle; 
    }  
</style>

Reference:
http://stackoverflow.com/questions/20700475/vertical-align-image-inside-an-anchor-with-css
http://plnkr.co/edit/b5jEtK5EWVglrhEkj14e?p=preview