Code Samples

Wednesday, June 5, 2013

Google analytics php api get social search traffic data

$ga = $this->service->data_ga->get(
    5525412,
    "2013-05-05",
    "2013-06-04", 
    "ga:visits,ga:bounces,ga:visitors,ga:newVisits,ga:pageviews,ga:timeOnPage",
    array(
        "filters" => "ga:hasSocialSourceReferral==Yes"
    )
);

And the data will be as follows only with social traffic.

jQuery scroll page to specific location

jQuery('html').animate( {scrollTop : 0}, 'slow', function() {

});

Tuesday, June 4, 2013

Google Charts: One Tooltip show values for Entire Column and domain data role

I have a basic Area Chart using Google Charts. I am able to set up tooltips for each point on the graph, but is there a way to have a single tooltip for all the points in a column.

All you need to do is add the following to your options (in the case of a line chart):
focusTarget: 'category'

Easy as pie! For more details, see focusTarget in the Google Documentation

If you want something more complex, you can fiddle around with the domain Data Role

Here is a sample bit of code:

google.load('visualization', '1.1', {'packages':['corechart']});

google.setOnLoadCallback(drawChart_C6);

function drawChart_C6() {
    var data = new google.visualization.DataTable();
    data.addColumn({type: 'string', role: 'domain'}, '2009 Quarter');
    data.addColumn('number', '2009 Sales');
    data.addColumn('number', '2009 Expenses');
    data.addColumn({type: 'string', role: 'domain'}, '2008 Quarter');
    data.addColumn('number', '2008 Sales');
    data.addColumn('number', '2008 Expenses');
    data.addRows([
      ['Q1 \'09', 1000, 400, 'Q1 \'08', 800, 300],
      ['Q2 \'09', 1170, 460, 'Q2 \'08', 750, 400],
      ['Q3 \'09', 660, 1120, 'Q3 \'08', 700, 540],
      ['Q4 \'09', 1030, 540, 'Q4 \'08', 820, 620]
    ]);

    var chart = new google.visualization.LineChart(document.getElementById('chart_C6'));
    chart.draw(data, {width: 400, height: 240, legend:'right', focusTarget: 'category'});
}

http://stackoverflow.com/questions/15351243/google-charts-one-tooltip-for-entire-column

jQuery plugin base64 encode and decode

http://archive.plugins.jquery.com/project/base64-encode-and-decode
https://docs.google.com/file/d/0B5nZNPW48dpFSXRrYmttSU9aNmM/edit?usp=sharing

This code was collected from the network, I just represent this, the copyright belongs to original work(s).
Usage
Whether or not to use UNICODE library:
$.base64.is_unicode = false/true;
Encode:
$.base64.encode('$.base64');
Decode:
$.base64.decode('JC5iYXNlNjQ=');

Monday, June 3, 2013

jQuery delete a given key from array

When I have an array like this:

var test = Array();
test['key1'] = 'value1';
test['key2'] = 'value2';

I believe the delete operator in JavaScript will solve this:

var test = new Array();
test['key1'] = 'value1';
test['key2'] = 'value2';
delete test['key1']; // will remove key1 from the array

jQuery Avoiding Conflicts with Other Libraries

http://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/
The jQuery library and virtually all of its plugins are contained within the jQuery namespace. As a general rule, global objects are stored inside the jQuery namespace as well, so you shouldn't get a clash between jQuery and any other library (like prototype.js, MooTools, or YUI).
That said, there is one caveat: by default, jQuery uses $ as a shortcut for jQuery. Thus, if you are using another JavaScript library that uses the $ variable, you can run into conflicts with jQuery. In order to avoid these conflicts, you need to put jQuery in no-conflict mode immediately after it is loaded onto the page and before you attempt to use jQuery in your page.

Putting jQuery Into No-Conflict Mode

When you put jQuery into no-conflict mode, you have the option of assigning a new variable name to replace the $ alias.

		
<!-- Putting jQuery into no-conflict mode. -->

<script src="prototype.js"></script>

<script src="jquery.js"></script>

<script>

var $j = jQuery.noConflict();

// $j is now an alias to the jQuery function; creating the new alias is optional.

$j(document).ready(function() {

    $j( "div" ).hide();

});

// The $ variable now has the prototype meaning, which is a shortcut for

// document.getElementById(). mainDiv below is a DOM element, not a jQuery object.

window.onload = function() {

    var mainDiv = $( "main" );

}

</script>

In the code above, the $ will revert back to its meaning in original library. You'll still be able to use the full function name jQuery as well as the new alias $j in the rest of your application. The new alias can be named anything you'd like: jq, $J, awesomeQuery, etc.
Finally, if you don't want to define another alternative to the full jQuery function name (you really like to use $ and don't care about using the other library's $ method), then there's still another approach you might try: simply add the $ as an argument passed to your jQuery( document ).ready() function. This is most frequently used in the case where you still want the benefits of really concise jQuery code, but don't want to cause conflicts with other libraries.

		
<!-- Another way to put jQuery into no-conflict mode. -->

<script src="prototype.js"></script>

<script src="jquery.js"></script>

<script>

jQuery.noConflict();

jQuery( document ).ready(function( $ ) {

    // You can use the locally-scoped $ in here as an alias to jQuery.

    $( "div" ).hide();

});

// The $ variable in the global scope has the prototype.js meaning.

window.onload = function(){

    var mainDiv = $( "main" );

}

</script>

This is probably the ideal solution for most of your code, considering that there'll be less code that you'll have to change in order to achieve complete compatibility.

Including jQuery Before Other Libraries

The code snippets above rely on jQuery being loaded after prototype.js is loaded. If you include jQuery before other libraries, you may use jQuery when you do some work with jQuery, but the $ will have the meaning defined in the other library. There is no need to relinquish the $ alias by calling jQuery.noConflict().

		
<!-- Loading jQuery before other libraries. -->

<script src="jquery.js"></script>

<script src="prototype.js"></script>

<script>

// Use full jQuery function name to reference jQuery.

jQuery( document ).ready(function() {

    jQuery( "div" ).hide();

});

// Use the $ variable as defined in prototype.js

window.onload = function() {

    var mainDiv = $( "main" );

};

</script>

Summary of Ways to Reference the jQuery Function

Here's a recap of ways you can reference the jQuery function when the presence of another library creates a conflict over the use of the $ variable:

Create a New Alias

The jQuery.noConflict() method returns a reference to the jQuery function, so you can capture it in whatever variable you'd like:

		
<script src="prototype.js"></script>

<script src="jquery.js"></script>

<script>

// Give $ back to prototype.js; create new alias to jQuery.

var $jq = jQuery.noConflict();

</script>

Use an Immediately Invoked Function Expression

You can continue to use the standard $ by wrapping your code in an immediately invoked function expression; this is also a standard pattern for jQuery plugin authoring, where the author cannot know whether another library will have taken over the $. See the Plugins section for more information about writing plugins.

		
<!-- Using the $ inside an immediately-invoked function expression. -->

<script src="prototype.js"></script>

<script src="jquery.js"></script>

<script>

jQuery.noConflict();

(function( $ ) {

    // Your jQuery code here, using the $

})( jQuery );

</script>

Note that if you use this technique, you will not be able to use prototype.js methods inside the immediately invoked function that expect $ to be prototype.js's $.

Use the Argument That's Passed to the `jQuery( document ).ready()` Function

		
<script src="jquery.js"></script>

<script src="prototype.js"></script>

<script>

jQuery(document).ready(function( $ ) {

    // Your jQuery code here, using $ to refer to jQuery.

});

</script>

Or using the more concise syntax for the DOM ready function:

		
<script src="jquery.js"></script>

<script src="prototype.js"></script>

<script>

jQuery(function($){

    // Your jQuery code here, using the $

});

</script>

Saturday, June 1, 2013

YII extend the class CGridView CDataColumn

Extend the class CDataColumn

Under protected/components/ create the file DataColumn.php with the following content:

<?php
/**
 * DataColumn class file.
 * Extends {@link CDataColumn}
 */
class DataColumn extends CDataColumn
{
    /**
     * @var boolean whether the htmlOptions values should be evaluated. 
     */
    public $evaluateHtmlOptions = false;
 
     /**
     * Renders a data cell.
     * @param integer $row the row number (zero-based)
     * Overrides the method 'renderDataCell()' of the abstract class CGridColumn
     */
    public function renderHeaderCell() {
        if($this->evaluateHtmlOptions) {
            foreach($this->headerHtmlOptions as $key=>$value) {
                $options[$key] = $this->evaluateExpression($value,array('row'=>$row,'data'=>$data));
            }
        } else {
            $options=$this->headerHtmlOptions;
        }
        echo CHtml::openTag('td', $options);
        $this->renderHeaderCellContent();
        echo "</th>";
    }
    public function renderFilterCell() {
        if($this->evaluateHtmlOptions) {
            foreach($this->filterHtmlOptions as $key=>$value) {
                $options[$key] = $this->evaluateExpression($value,array('row'=>$row,'data'=>$data));
            }
        } else {
            $options=$this->filterHtmlOptions;
        }
        echo CHtml::openTag('td', $options);
        $this->renderFilterCellContent();
        echo "d</td>";
    }
    public function renderDataCell($row)
    {
        $data=$this->grid->dataProvider->data[$row];
        if($this->evaluateHtmlOptions) {
            foreach($this->htmlOptions as $key=>$value) {
                $options[$key] = $this->evaluateExpression($value,array('row'=>$row,'data'=>$data));
            }
        } else {
            $options=$this->htmlOptions;
        }
        if($this->cssClassExpression!==null) {
            $class=$this->evaluateExpression($this->cssClassExpression,array('row'=>$row,'data'=>$data));
            if(isset($options['class'])) {
                $options['class'].=' '.$class;
            } else {
                $options['class']=$class;
            }
        }
        echo CHtml::openTag('td', $options);
        $this->renderDataCellContent($row,$data);
        echo '</td>';
    }
}
?>

Use as following:

<?php 
$this->widget('zii.widgets.grid.CGridView', array(
    'dataProvider'=>$model->search(),
    'filter'=>$model,
    "itemsCssClass" => "table_design_1",
    "htmlOptions" => array(
        "class" => "div_contact_admin_grid_view"
    ),
    "ajaxUpdate" => false,
    'columns'=>array(
        array(
            'class'=>'DataColumn',
            'name'=>'family_name',
            'evaluateHtmlOptions'=>true,
            'htmlOptions'=>array('id'=>'"ordering_{$data->id}"'),
            "cssClassExpression" => "none",
            "filterHtmlOptions" => array("class" => "filterHtmlOptions"),
            "headerHtmlOptions" => array('class' => 'headerHtmlOptions')
        )
    )
)); ?>

Pages