Ads

Perfume 3rd Tour 「JPN」 [Blu-ray] 結成10周年、メジャーデビュー5周年記念! Perfume LIVE@東京ドーム『 1 2 3 4 5 6 7 8 9 10 11』 [Blu-ray] Perfume First Tour『GAME』 [Blu-ray] Fan Service bitter Normal Edition [Blu-ray] Perfume Second Tour 2009『直角二等辺三角形TOUR』 [Blu-ray] Perfume『BUDOUKaaaaaaaaaaN!!!!!』 [Blu-ray]

2011 Sat 16 Jul

Highcharts::Column中身

シンプルに

package Highcharts::Column;

use strict;
use warnings;
our $VERSION = '0.0.2';

sub new {
    my $class = shift;
    my $self =  $class->_init(); 
    return bless $self, $class;
}



sub set_data{
    my $self = shift;
    my %properties = @_;
    while (my($key, $value) = each(%properties)) {
        $self->{$key} = $value ;
    }
}


sub draw  {
    my $self = shift;
    # draw header
    my $header = &_header($self);    
    my $story;
    my $cnt;    

    # draw data
    foreach my $data(@{$self->{y_values}}) {
        if( $cnt++  ne 0 ) { $story .= "                ,\n"}
        $story .= &_story ($data);
    }
    # drawa footer

    my $footer = &_footer;
    my $js = $header.$story.$footer;
    return($js);    
}

sub _init {
    my $class = shift;
    my @y_data =(
        { name=> 'y1' , data=> "1,2,3"},{ name=> 'y2' , data=> "3,2,1"} 
    );
    my $self =  {
        id          => 'Sample',
        title       => 'Title',
        subtitle    => 'Sub Title',
        x_values    => "1,2,3",
        xaxis_title => "xaxis title",
        yaxis_title => "yaxis title",
        y_values    =>  \@y_data, 
   };

    return bless $self, $class;

}
sub _header  {
    my $self = shift;
    my $header = ' ';
    $header = <<_HEADER_;
    var char;
    \$(document).ready(function() {
        chart = new Highcharts.Chart(
        {
            chart: {
                renderTo: 'chart_column_$self->{id}',
                defaultSeriesType: 'column'
            },
            title: {
                text: '$self->{title}'
            },
            subtitle: {
                text: '$self->{subtitle}'
            },
            xAxis:  {
                categories:  [ $self->{x_values} ],
                title:  { 
                    text : '$self->{xaxis_title}'
                }
            },
            yAxis: {        
                title: {
                    text: '$self->{yaxis_title}'
                }
            },
            series: [
_HEADER_

    return($header);
}
sub _story       {
    my $data = shift;
    my $story =<<_STORY_;
                { 
                    name : '$data->{name}',
                    data : [$data->{data}]
                }
_STORY_
    return($story);
}
sub _footer  {
    my $footer = <<_FOOTER_;
                ]
        }); 
    });
_FOOTER_
}

ま、このライブラリの需要自体はあるのかと言えば、少ないだろうなーとは思う。Highcharts、Perlで発言してる人捜すとなんか見当たらないしw

    use Highcharts::Column;

    my $foo = Highcharts::Column->new();

    my @y_data = ({ name=> 'y1' , data=> "10,3,2"},
                    { name=> 'y2' , data=> "1,3,2"} 
            );

    my  %config = 
            id          => 'Test',
            title       => 'TiTle',
            subtitle    => 'Sub TiTle',
            x_values    => "10,12,1",
            xaxis_title =>"xaxis_title",
            yaxis_title =>"yaxis_title",
            y_values    => \@y_data,
    );

    my $result = Highcharts::Column->new();

    $result->set_data(%sample);
    my $js = $result->draw();
    print $js;

こんな感じで中身を表示できる。外部JSに保存して読み出すとかそのままソースに書き込むかは利用者による感じで。

category:スクリプト

HighChartsのJS生成ライブラリ方針

..続きを読む

category:スクリプト

2011 Mon 23 May

HighChartsのコラムを自動生成

ま、適当に。moduleはこんな感じ。

package HighCharts::Column;
use strict;
sub draw  {
    my $self = shift;
    # draw header
    my $header = &header($self);    
    my $story;
    my $cnt;    
    # draw data
    foreach my $data(@{$self->{y_values}}) {
        if( $cnt++  ne 0 ) { $story .= "\t\t\t\t,\n"}
        $story .= &story ( $data );
    }
    # drawa footer
    my $footer = &footer;
    my $js = $header.$story.$footer;
    output($self,$js);  
}



sub header {
    my $self = shift;
    my $header = ' ';
    $header = <<_HEADER_;
    var char;
    \$(document).ready(function() {
        chart = new Highcharts.Chart(
        {
            chart: {
                renderTo: 'chart_column_$self->{id}',
                defaultSeriesType: 'column'
            },
            title: {
                text: '$self->{title}'
            },
            subtitle: {
                text: '$self->{subtitle}'
            },
            xAxis:  {
                categories:  [ $self->{x_values} ],
                title:  { 
                    text : '$self->{xaxis_title}'
                }
            },
            yAxis: {        
                title: {
                    text: '$self->{yaxis_title}'
                }
            },

            series: [
_HEADER_

    return($header);
}
sub story {
    my $data = shift;
    my $story =<<_STORY_;
                { 
                    name :'$data->{name}',
                    data : [ $data->{data} ]
                }
_STORY_
    return($story);
}

sub footer{
    my $footer = <<_FOOTER_;
                ]               
        });

    });
_FOOTER_
}

sub output{
    my ($self,$js)=@_;
    open( OUT, ">$self->{file}") or die( "Cannot open file: $self->{'file'}" );

    print OUT $js;

    close OUT;
}

package HighCharts::Column;

で、スクリプトではこんな感じで値を与える。

#!/usr/local/bin/perl

use strict;
use warnings;
use HighCharts::Column;
my @y_data = (
    { name=> 'y1' , data=> "10,3,2"},{ name=> 'y2' , data=> "1,3,2"} 
);

my %sample =  (
    id          => 'テスト',
    title       => 'TiTle',
    subtitle    => 'Sub TiTle',
    x_values    => "10,12,1",
    xaxis_title =>"xaxis_title",
    yaxis_title =>"yaxis_title",
    y_values    => \@y_data,
    file  => "./js/test.js",

);



 HighCharts::Column::draw(\%sample);
 exit;

基本的に外部JSに吐き出す形。複数枚の呼び出しが可能なように複数ファイルかつ、複数rendorとなるようにIDをつけて吐き出す。

まあ、複数ファイルを吐き出すのは簡単だが複数を表示するとブラウザ負荷が結構来るんだけど。

タイトル、サブタイトル、X軸タイトル、Y軸タイトル、Xの値、Yの値とこれだけあれば必要最低限は網羅出来てるかなと思う。元々(仕事用には)、Text:Xslateを使っていてテンプレートもそれで書いてたりはするのだが、適当にハードコート。

オプションで外部JSに他の設定も追加で書けるので装飾も兼ねた部分はそちらでいいのではと割り切った実装としている。

基本自分用のためエラー処理とかないw

仕事場ではまあ円グラフもかけるようにしてたりするしすでに物はあるんだが。moduleの作り方をきちんと読んで作っているわけではないのでその辺はゆっくり作りたいかなーとか思ったり。

category:スクリプト

2011 Thu 28 Apr

電力表示のグラフは

主となるソースは下記。

    var char;
    $(document).ready(function() {
        chart = new Highcharts.Chart(
        {
        chart: {
        renderTo: 'chart_test3',
        },
        title: {
            text: '東京電力電力メータ4/26'
        },
        subtitle: {         
            text: 'サブタイトル'
        },
        xAxis: {
            categories:  ["0:00","1:00","2:00","3:00","4:00","5:00","6:00","7:00","8:00","9:00","10:00","11:00","12:00","13:00","14:00","15:00","16:00","17:00","18:00","19:00","20:00","21:00","22:00","23:00"],
            title:{ 
                text : '時間帯'
            }
        },
        yAxis: {        
            title: {
                text: '供給電力(万kW)'
            }
        },
        series: [
            {
            type : 'area',
            name :'ピーク供給量',
            data : [ 4000,4000,4000,4000,4000,4000,4000,4000,4000,4000,4000,4000,4000,4000,4000,4000,4000,4000,4000,4000,4000,4000,4000,4000,],
            },
            {
            type : 'column',
            name :'当日実績(万kW)',
            data : [ 2426,2343,2315,2295,2297,2344,2568,2758,3008,3198,3229,3240,3062,3257,3241,3209,3229,0,0,0,0,0,0,0, ],
            },
            {
            type : 'line', 
            name :'前日実績(万kW)',
            data : [ 2509,2402,2350,2299,2270,2217,2271,2359,2469,2566,2601,2604,2605,2582,2564,2563,2610,2717,2960,3025,2965,2870,2750,2602, ]
            },
        ]               
        });

    });         

まあ、ここまでの整形はcsvを読み込んでperlでやっているのだが。

category:スクリプト

2011 Mon 25 Apr

東京電力のデータをグラフ化

HighChartsの勉強も兼ねてちとデータ化

元はPerlで書いてjsファイルに書き出しといったことをしている。

真面目に作ればまあ公開されてるデータを読み込んで整形して利用した上でグラフ化というのもできなくはない。

amchartsの方がいいのかもなあと思いつつ、あの設定ファイルの煩雑さには参るわ。

highchartsの設定ファイルの方が直感に近いのでそっちで実装を進めてしまった。

HighChartsでは凡例をクリックすると表示のオン・オフがリアルタイムにできる。そこがデータを見るときには便利でEXCELとかでは代用は効かないなと感じているところ。

category:スクリプト

Page 2/11: 1 2 3 4 5 6 7 8 9 »

INTO THE WORLD

Author
Naoto Hayashi

最近の記事(10件)

Category

Archives

[ 2016 ]

04 /

[ 2015 ]

01 / 04 /

[ 2014 ]

01 / 03 / 05 / 06 /
07 / 08 / 09 / 10 /

[ 2013 ]

01 / 02 / 03 / 04 / 06 /
07 / 08 / 09 / 10 / 11 / 12 /

[ 2012 ]

01 / 02 / 03 / 05 / 09 / 10 / 11 / 12 /

[ 2011 ]

01 / 02 / 03 / 04 / 05 / 06 /
07 / 08 / 09 / 10 / 11 /

[ 2010 ]

01 / 02 / 03 / 04 / 05 / 06 /
07 / 08 / 09 / 10 / 11 /

[ 2009 ]

01 / 02 / 03 / 04 / 05 / 06 /
07 / 11 / 12 /

[ 2008 ]

01 / 02 / 03 / 04 / 05 / 06 /
07 / 08 / 09 / 10 / 11 / 12 /

[ 2007 ]

01 / 02 / 03 / 04 / 05 / 06 /
07 / 08 / 09 / 10 / 11 / 12 /

[ 2006 ]

01 / 02 / 03 / 04 / 05 / 06 /
07 / 08 / 09 / 10 / 11 / 12 /

[ 2005 ]

01 / 02 / 03 / 04 / 05 / 06 /
07 / 08 / 09 / 10 / 11 / 12 /

[ 2004 ]

01 / 02 / 03 / 04 / 05 / 06 /
07 / 08 / 09 / 10 / 11 / 12 /

[ 2003 ]

01 / 02 / 03 / 04 / 05 / 06 /
07 / 08 / 09 / 10 / 11 / 12 /

[ 2002 ]

01 / 02 / 03 / 04 / 05 / 06 /
07 / 08 / 09 / 10 / 11 / 12 /