Skip to content

Commit

Permalink
Added: Geo, Sankey, Bubble, Scatter
Browse files Browse the repository at this point in the history
  • Loading branch information
@bsadnu
bsadnu committed Jul 15, 2016
1 parent 3f08c50 commit bcc73a5
Show file tree
Hide file tree
Showing 5 changed files with 730 additions and 15 deletions.
162 changes: 162 additions & 0 deletions BubbleChart.php
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,162 @@
<?php

namespace bsadnu\googlecharts;

use Yii;
use yii\base\Widget;
use yii\helpers\Html;
use yii\helpers\Json;
use yii\web\View;
use bsadnu\googlecharts\GoogleJsApiAsset;

/**
* Bubble chart widget.
* A bubble chart is used to visualize a data set with two to four dimensions.
* The first two dimensions are visualized as coordinates, the third as color and the fourth as size.
* Bubble charts can be considered a variation of the scatter plot, in which the data points are replaced with bubbles.
* By default all bubble charts display tips when hovering over bubbles.
*
* @author Stanislav Bannikov <[email protected]>
*/
class BubbleChart extends Widget
{
/**
* @var string unique id of chart
*/
public $id;

/**
* @var array table of data
* Example:
* [
* ['ID', 'Life Expectancy', 'Fertility Rate', 'Region'],
* ['CAN', 82.66, 1.67, 'North America'],
* ['DEU', 79.84, 1.36, 'Europe'],
* ['DNK', 70.6, 1.84, 'Europe'],
* ['EGY', 72.73, 2.78, 'Middle East'],
* ['GBR', 75.05, 2, 'Europe'],
* ['IRN', 72.49, 0.7, 'Middle East'],
* ['IRQ', 68.09, 4.77, 'Middle East'],
* ['ISR', 81.55, 3.96, 'Middle East'],
* ['RUS', 68.6, 1.54, 'Europe'],
* ['USA', 78.09, 3.05, 'North America']
* ]
*/
public $data = [];

/**
* @var array options
* Example:
* [
* 'fontName' => 'Verdana',
* 'height' => 450,
* 'fontSize' => 12,
* 'chartArea' => [
* 'left' => '5%',
* 'width' => '90%',
* 'height' => 400
* ],
* 'tooltip' => [
* 'textStyle' => [
* 'fontName' => 'Verdana',
* 'fontSize' => 13
* ]
* ],
* 'vAxis' => [
* 'title' => 'Fertility Rate',
* 'titleTextStyle' => [
* 'fontSize' => 13,
* 'italic' => false
* ],
* 'gridlines' => [
* 'color' => '#e5e5e5',
* 'count' => 10
* ],
* 'minValue' => 0
* ],
* 'bubble' => [
* 'textStyle' => [
* 'auraColor' => 'none',
* 'color' => '#fff'
* ],
* 'stroke' => '#fff'
* ],
* 'legend' => [
* 'position' => 'top',
* 'alignment' => 'center',
* 'textStyle' => [
* 'fontSize' => 12
* ]
* ]
* ]
*/
public $options = [];


/**
* Initializes the widget.
*/
public function init()
{
parent::init();
$view = Yii::$app->getView();
$this->registerAssets();
$view->registerJs($this->getJs(), View::POS_END);
}

/**
* Renders the widget.
*/
public function run()
{
$content = Html::tag('div', null, ['id'=> $this->id]);

return $content;
}

/**
* Registers necessary assets
*/
public function registerAssets()
{
$view = $this->getView();
GoogleJsApiAsset::register($view);
}

/**
* Return necessary js script
*/
private function getJs()
{
$uniqueInt = mt_rand(1, 999999);

$js = "
google.load('visualization', '1', {packages:['corechart']});
google.setOnLoadCallback(drawBubbleChart". $uniqueInt .");
";
$js .= "
function drawBubbleChart". $uniqueInt ."() {
var data". $uniqueInt ." = google.visualization.arrayToDataTable(". Json::encode($this->data) .");
var options". $uniqueInt ." = ". Json::encode($this->options) .";
var bubble". $uniqueInt ." = new google.visualization.BubbleChart($('#". $this->id ."')[0]);
bubble". $uniqueInt .".draw(data". $uniqueInt .", options". $uniqueInt .");
}
";
$js .= "
$(function () {
$(window).on('resize', resize);
$('.sidebar-control').on('click', resize);
function resize() {
drawBubbleChart". $uniqueInt ."();
}
});
";

return $js;
}
}
80 changes: 65 additions & 15 deletions ColumnChart.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,17 +27,45 @@ class ColumnChart extends Widget

/**
* @var array table of data
* Counts as old or previos dataset in diff chart case
* Example:
* [
* ['Year', 'Sales', 'Expenses'],
* ['2013', 1000, 400],
* ['2014', 1170, 460],
* ['2015', 660, 1120],
* ['2016', 1030, 540]
* ['Name', 'Popularity'],
* ['Cesar', 425],
* ['Rachel', 420],
* ['Patrick', 290],
* ['Eric', 620],
* ['Eugene', 520],
* ['John', 460],
* ['Greg', 420],
* ['Matt', 410]
* ]
*/
public $data = [];

/**
* @var array table of extra data necessary for diff chart types
* Counts as new dataset in diff chart case
*
* A diff chart is a chart designed to highlight the differences between two charts with comparable data.
* By making the changes between analogous values prominent, they can reveal variations between datasets.
* You create a diff chart by calling the computeDiff method with two datasets to generate a third dataset representing the diff, and then drawing that.
*
* Example:
* [
* ['Name', 'Popularity'],
* ['Cesar', 307],
* ['Rachel', 360],
* ['Patrick', 200],
* ['Eric', 550],
* ['Eugene', 460],
* ['John', 320],
* ['Greg', 390],
* ['Matt', 360]
* ]
*/
public $extraData = [];

/**
* @var array options
* Example:
Expand All @@ -50,14 +78,17 @@ class ColumnChart extends Widget
* 'width' => '90%',
* 'height' => 350
* ],
* 'colors' => [
* '#4CAF50'
* ],
* 'tooltip' => [
* 'textStyle' => [
* 'fontName' => 'Verdana',
* 'fontSize' => 13
* ]
* ],
* 'vAxis' => [
* 'title' => 'Sales and Expenses',
* 'title' => 'Popularity',
* 'titleTextStyle' => [
* 'fontSize' => 13,
* 'italic' => false
Expand All @@ -70,7 +101,7 @@ class ColumnChart extends Widget
* ],
* 'legend' => [
* 'position' => 'top',
* 'alignment' => 'center',
* 'alignment' => 'end',
* 'textStyle' => [
* 'fontSize' => 12
* ]
Expand Down Expand Up @@ -121,18 +152,37 @@ private function getJs()
google.load('visualization', '1', {packages:['corechart']});
google.setOnLoadCallback(drawColumn". $uniqueInt .");
";
$js .= "
function drawColumn". $uniqueInt ."() {
if (!empty($this->extraData)) {
$js .= "
function drawColumn". $uniqueInt ."() {
var data". $uniqueInt ." = google.visualization.arrayToDataTable(". Json::encode($this->data) .");
var oldData". $uniqueInt ." = google.visualization.arrayToDataTable(". Json::encode($this->data) .");
var options_column". $uniqueInt ." = ". Json::encode($this->options) .";
var newData". $uniqueInt ." = google.visualization.arrayToDataTable(". Json::encode($this->extraData) .");
var column". $uniqueInt ." = new google.visualization.ColumnChart($('#". $this->id ."')[0]);
column". $uniqueInt .".draw(data". $uniqueInt .", options_column". $uniqueInt .");
var options". $uniqueInt ." = ". Json::encode($this->options) .";
}
";
var column". $uniqueInt ." = new google.visualization.ColumnChart($('#". $this->id ."')[0]);
var diffData". $uniqueInt ." = column". $uniqueInt .".computeDiff(oldData". $uniqueInt .", newData". $uniqueInt .");
column". $uniqueInt .".draw(diffData". $uniqueInt .", options". $uniqueInt .");
}
";
} else {
$js .= "
function drawColumn". $uniqueInt ."() {
var data". $uniqueInt ." = google.visualization.arrayToDataTable(". Json::encode($this->data) .");
var options". $uniqueInt ." = ". Json::encode($this->options) .";
var column". $uniqueInt ." = new google.visualization.ColumnChart($('#". $this->id ."')[0]);
column". $uniqueInt .".draw(data". $uniqueInt .", options". $uniqueInt .");
}
";
}
$js .= "
$(function () {
Expand Down
Loading

0 comments on commit bcc73a5

Please sign in to comment.