リケジョな私の開発メモ　スマホ端末・ウエアラブル端末・モバイル端末　　　　「iPhoneやAndroid・・・」366 GPS APS:jQuery(JavaScript)でグラフ系アプリ？　メモ

2015年01月01日

jQuery(JavaScript)でグラフ系アプリ？　メモ

こんなをつくってみた。
: jqPlot レスポンシブサンプル //画像指定１ＨＴＭＬ

//jQueryのJavaScript２

２つの「プラグイン」に注目てみた。（Google　ＡＰＩもよかったが・・・）

（お勉強の仕方かな？）

１つ目　「jqPlot」

プラグインが　ネットとフォルダーの２通りあるのが特徴で面白い。

Ａ　「 jQuery 」一覧

http://kwski.net/jquery/

http://kwski.net/jquery/1083/

ここ

Ｂ　jQuery 入門

http://alphasis.info/jquery/

２つ目　「TableBarChart」

Excelのような表（テーブル）からグラフをつくる。

tableデータから棒グラフを描画できるjQueryプラグインTableBarChartを使ってみる

http://mementoo.info/archives/764

TableBarChart plugin

http://wiki.aiwsolutions.net/2014/03/20/tablebarchart-plugin/

【jQuery】テーブルのデータを棒グラフにしてくれるプラグイン

http://www.dream-net.org/blog/?p=1189

tableのデータを元に、棒グラフを生成するjQueryプラグイン・TableBarChart

http://kachibito.net/web-design/tablebarchart.html

//////

参考

「 jQuery 」のグラフ

「jqPlot」は、２つのサイト

２つのサイトが参考に！

Ａ　「 jQuery 」一覧

http://kwski.net/jquery/

「jqPlot」カスタマイズ

http://kwski.net/jquery/1083/

各種グラフ作成方法は以下にあります。

折れ線グラフ | 円グラフ | 棒グラフ | ローソク足チャート

まず、上の４つで、「ダイレクト」プラグインを学ぶ

「サンプル」で「ソース」ページをみる。

こんな感じ

「折れ線グラフ」の例

http://kwski.net/jquery/998/

////

scale=1.0">

<title>

jqPlot 折線グラフサンプル </title>

<!--[if lt IE 9]>

src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

href="/lab/css/bootstrap-responsive.css" /><script type="text/javascript"

src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script><script type="text/javascript"

src="//cdnjs.cloudflare.com/ajax/libs/jquery-migrate/1.2.1/jquery-migrate.min.js"></script><link rel="stylesheet" type="text/css"

href="https://dl.dropbox.com/u/59384927/jquery/GRAPH/jquery.jqplot.1.0.8/jquery.jqplot.css" /><script type="text/javascript"

src="https://dl.dropbox.com/u/59384927/jquery/GRAPH/jquery.jqplot.1.0.8/jquery.jqplot.min.js"></script><script

type="text/javascript" src="https://dl.dropbox.com/u/59384927/jquery/GRAPH/jquery.jqplot.1.0.8/excanvas.min.js"></script><script

type="text/javascript"

src="https://dl.dropbox.com/u/59384927/jquery/GRAPH/jquery.jqplot.1.0.8/plugins/jqplot.dateAxisRenderer.min.js"></script>

<hr>

<hr>

$(document).ready(function(){

// オプション

options = {

// グラフのタイトル

title:{text:'日経平均株価推移'},

axes:{ // 軸

// 横軸(x軸)

xaxis:{

renderer:$.jqplot.DateAxisRenderer,// プラグイン

min: '2011-01-01', // 軸開始の値

max: '2013-02-01', // 軸終了の値

tickInterval:'3 months', // 目盛りの間隔

tickOptions:{formatString:'%Y/%m'},// 表示フォーマット

label:'month', // ラベル

// 縦軸(y軸)

yaxis:{

label:'日経平均株価(円)', // ラベル

}

// 表示データ

data = [[

['2011/01/01',10237.92],['2011/02/01',10624.09],

['2011/03/01',9755.10],['2011/04/01',9849.74],

['2011/05/01',9693.73],['2011/06/01',9816.09],

['2011/07/01',9833.03],['2011/08/01',8955.20],

['2011/09/01',8700.29],['2011/10/01',8988.39],

['2011/11/01',8434.61],['2011/12/01',8455.35],

['2012/01/01',8802.51],['2012/02/01',9723.24],

['2012/03/01',10083.56],['2012/04/01',9520.89],

['2012/05/01',8542.73],['2012/06/01',9006.78],

['2012/07/01',8695.06],['2012/08/01',8839.91],

['2012/09/01',8870.16],['2012/10/01',8928.29],

['2012/11/01',9446.01],['2012/12/01',10395.18],

['2013/01/01',11138.66],['2013/02/01',11559.36]

]]

$.jqplot(

'div998', // グラフ表示する#div

data, // 表示データ

options // オプション

);

});

</script>

</div>

<hr>

//////

各種オプション

凡例

Ｂ　jQueryのjqPlot

http://alphasis.info/jquery-plugins/jqplot/

jQuery 入門

http://alphasis.info/jquery/

jqPlot

各種グラフ（チャート、図表）を生成するには、jQuery の jqPlot プラグインが便利。

線グラフ

縦棒グラフ

横棒グラフ

面グラフ

ウォーターフォールチャート

散布図

バブルチャート

マリメッコチャート

円グラフ

ドーナツグラフ

メーターゲージ

トレンドライン

ローソク足

いかり足

ブロックチャート

ピラミッドグラフ

など

/////

レーダーチャートがあればうれしいが・・・

/////

例えば、

<!--[if lt IE 9]>

src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

href="/lab/css/bootstrap-responsive.css" /><script type="text/javascript"

src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script><script type="text/javascript"

src="//cdnjs.cloudflare.com/ajax/libs/jquery-migrate/1.2.1/jquery-migrate.min.js"></script><link rel="stylesheet" type="text/css"

href="https://dl.dropbox.com/u/59384927/jquery/GRAPH/jquery.jqplot.1.0.8/jquery.jqplot.css" /><script type="text/javascript"

src="https://dl.dropbox.com/u/59384927/jquery/GRAPH/jquery.jqplot.1.0.8/jquery.jqplot.min.js"></script><script

type="text/javascript" src="https://dl.dropbox.com/u/59384927/jquery/GRAPH/jquery.jqplot.1.0.8/excanvas.min.js"></script><script

type="text/javascript"

src="https://dl.dropbox.com/u/59384927/jquery/GRAPH/jquery.jqplot.1.0.8/plugins/jqplot.dateAxisRenderer.min.js"></script>

の下に「追加」（プラグイン）する

「plugins/jqplot.trendline.min.js」が必要な場合

たとえば、

src="https://dl.dropbox.com/u/59384927/jquery/GRAPH/jquery.jqplot.1.0.8/plugins/jqplot.trendline.min.js"></script>

/////

//画像指定ＨＴＭＬ

と

//jQueryのJavaScript

の２つ

で新しいもの

プログラムを追加する。

//////
上の例を利用して、たとえば、以下のプログラムに書き換える
//////

jQuery の jqPlot で作るトレンドラインのラベルを含む凡例付き折れ線グラフ

initial-scale=1.0" name="viewport">

<title>

jqPlot レスポンシブサンプル </title>

<!--[if lt IE 9]>

type="text/javascript"

src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

type="text/css" rel="stylesheet"><script type="text/javascript"

src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script><script type="text/javascript"

src="//cdnjs.cloudflare.com/ajax/libs/jquery-migrate/1.2.1/jquery-migrate.min.js"></script><link

href="https://dl.dropbox.com/u/59384927/jquery/GRAPH/jquery.jqplot.1.0.8/jquery.jqplot.css" type="text/css" rel="stylesheet"><script

type="text/javascript"

src="https://dl.dropbox.com/u/59384927/jquery/GRAPH/jquery.jqplot.1.0.8/jquery.jqplot.min.js"></script><script

type="text/javascript" src="https://dl.dropbox.com/u/59384927/jquery/GRAPH/jquery.jqplot.1.0.8/excanvas.min.js"></script>

src="https://dl.dropbox.com/u/59384927/jquery/GRAPH/jquery.jqplot.1.0.8/plugins/jqplot.trendline.min.js"></script>

//画像指定１ＨＴＭＬ

//jQueryのJavaScript２

jQuery( function() {

jQuery . jqplot . config . enablePlugins = true;

Tarou = [ [ 1, 65 ], [ 2, 72 ], [ 3, 74 ], [ 4, 63 ], [ 5, 85 ], [ 6, 70 ] ];

Hanako = [ [ 1, 93 ], [ 2, 81 ], [ 3, 79 ], [ 4, 88 ], [ 5, 78 ], [ 6, 96 ] ];

Ichirou = [ [ 1, 81 ], [ 2, 86 ], [ 3, 71 ], [ 4, 69 ], [ 5, 58 ], [ 6, 82 ] ];

jQuery . jqplot(

'jqPlot-sample',

[

Tarou, Hanako, Ichirou

{

series: [

{

color: '#bfff80',

label: '姉',

trendline: {

color: '#80ff00',

label: '姉トレンドライン',

}

{

color: '#80ffbf',

label: '妹2',

trendline: {

color: '#00ff80',

label: '妹トレンドライン',

}

{

color: '#80bfff',

label: '私（女子）',

trendline: {

color: '#0080ff',

label: '私（女子）のトレンドライン',

}

legend: {

show: true,

placement: 'outside',

location: 'ne',

}

);

} );

</script>

<hr>

/////

: jqPlot レスポンシブサンプル //画像指定１ＨＴＭＬ

//jQueryのJavaScript２

//////

例

日経平均株価推移（JQueryで jqPlot グラフ　データ徐々に追加）

株価　「日経平均とダウ平均」推移(jQuery　jqPlot 　複数（折れ線）グラフサンプル)

Fields Medalists (1936 - 2010)　（数学のノーベル賞：フィールズ賞）「jQuery」　jqPlot 円グラフ

３人の「折れ線グラフ　とトレンドライン」（jQuery jqPlot）

//////
追加１　「多角形レーダーチャート」について
（現在は、ＰＣ画面のみ？　ＯＫ）

追加２　「多角形レーダーチャート」について
（ＰＣもスマホもＯＫ）
多角形レーダーチャートの作り方

Jquery Canvas Chart

html5のcanvasを使って多角形レーダーチャートが作れます

ＴＯＰを下のように記述すると、ダイレクト！

//////
例

$(function(){

$('#canvasChart01').canvasChart({

polygon : 5,

valuation : 7,//評価値

valuationCntPrint : false,//評価の数値表記

valuationName : ['英語','国語','数学','理科','社会'],//評価名

radius : 120,//半径

bgFill : false,//背景の塗り

chartStrokeColor : ['#fd9'],//チャートの線

chartFillColor : ['rgba(250, 200, 100, 0.5)'],//チャートの塗り

checkbox : true,//チェックボックス機能、radio selectに対応、inputのnameにcheckboxを指定してください

compare : true,//比較機能、使用する際はselectableかcheckboxをtrueにしてください

chartPoint : false,//チャートの点描画

gauge : false,//中央からのゲージライン描画

scale : false//ゲージラインの目盛り描画

});

</script>

<strong>checkbox compare</strong>:

1<input value="1" name="checkbox" type="checkbox">

2<input value="2" name="checkbox" type="checkbox">

3<input value="3" name="checkbox" type="checkbox">

</div>

</div>

</div>

</div>

/////
５教科　レーダーチャート　完成例
/////
/////
レーダーチャート
（現在はＰＣ画面のみ？）

<!DOCTYPE html>

<html>

<head>

<title>インラインSVGでレーダーチャートを作る</title>

</head>

$(function(){

var allPentagonPoints = []

var skills = ["HTML","CSS","javascript","PHP","Ruby"]

drawSelectLevelForm()

drawChartFoundation()

drawChartSkillLabels()

//五角形を生成

function createPentagons(dis){

//polygon要素を生成

var Pentagon=document.createElementNS("http://www.w3.org/2000/svg","polygon");

var pentagonPoints ="";

for (var i = 0; i < 5; i++){

　　　　var x = Math.cos(((72*i)-90)*Math.PI/180)*dis;

　　　　var y = Math.sin(((72*i)-90)*Math.PI/180)*dis;

　　　　pentagonPoints += (x+250) +","+ (y+220) + " ";

　　　}

allPentagonPoints.push(pentagonPoints);

//座標を設定

Pentagon.setAttribute("points",pentagonPoints);

return Pentagon;

}

//レーダーチャートの土台を作る。生成した五角形を表示

function drawChartFoundation(){

//中心からの距離ごとに五角形をつくる

var distance = [1,50,100,150,200];

for(var i=0; i<distance.length; i++){

document.getElementById("chart_foundation_pentagons").appendChild(createPentagons(distance[i]));

}

//レーダーチャートの項目を表示

function drawChartSkillLabels(){

$(skills).each(function(index,val){

var maxPentagonNum = allPentagonPoints.length-1;

var maxPentagonPointsX = allPentagonPoints[maxPentagonNum].split(" ")[index].split(",")[0];

var maxPentagonPointsY = allPentagonPoints[maxPentagonNum].split(" ")[index].split(",")[1];

var text = document.createElementNS("http://www.w3.org/2000/svg","text");

text.innerHTML = val

text.setAttribute("x",maxPentagonPointsX)

text.setAttribute("y",maxPentagonPointsY)

text.setAttribute("class","skill_label")

if(index >= (skills.length/2+0.5)){

text.setAttribute("text-anchor","end")

}

document.getElementById("chart_foundation_pentagons").appendChild(text);

})

}

//スキルごとのレベル選択フォームを作成

function drawSelectLevelForm(){

var selectLavelElem =""

var optionElem = ""

for(var i=0; i<=4; i++){

optionElem += '<option value="'+ [i] +'">level'+ [i] +'</option>'

}

for(var j=0; j<skills.length; j++){

selectLavelElem += '<label for="select_level_'+ skills[j] +'">'+ skills[j] +'</label><select id="select_level_'+ skills[j] +'" class="select_level" >' + optionElem +'</select>'

}

$("#select_skill_container").prepend(selectLavelElem)

}

//フォームで入力した値でチャートを生成

$("#submit").click(function(){

$(".status,.marker_point").remove();

//polygon要素を生成

var chartPolygon = document.createElementNS("http://www.w3.org/2000/svg","polygon");

var chartPolygonPoint =""

//chartPolygonの座標を設定

$(".select_level").each(function(i){

var levelNum = parseInt($(this).val());

var selectedPoint = allPentagonPoints[levelNum].split(" ")[i].split(",");

chartPolygonPoint += selectedPoint[0] +","+ selectedPoint[1] + " ";

drawchartPointMarker(selectedPoint[0],selectedPoint[1]);

});

chartPolygon.setAttribute("points",chartPolygonPoint);

chartPolygon.setAttribute("class", "status");

document.getElementById("chart_Polygon").appendChild(chartPolygon);

});

//赤い多角形の頂点に点を表示

function drawchartPointMarker(x,y){

//circle要素を生成

var marker = document.createElementNS("http://www.w3.org/2000/svg","circle");

marker.setAttribute("cx",x)

marker.setAttribute("cy",y)

marker.setAttribute("r",5)

marker.setAttribute("class","marker_point")

document.getElementById("marker_points_wrap").appendChild(marker);

}

})

</script>

<style>

body,input,select{

font-family: verdana;

color: #808080;

}

#svg_container{

width:600px;

height:450px;

margin:auto;

}

#chart_container{

width:500px;

height:500px;

display: block;

margin: auto;

}

#chart_foundation_pentagons {

fill:none;

stroke: #7ac5e9;

stroke-width:1px;

stroke-dasharray:3px;

}

.skill_label{

margin-right: 10px;

margin-left: 10px;

display: block;

fill:#808080;

stroke: none;

stroke-dasharray:0px;

}

#chart_Polygon{

position: absolute;

fill:#ff8e8e;

stroke: none;

filter:alpha(opacity=50);

-moz-opacity: 0.5;

opacity: 0.5;

z-index: 0;

}

#marker_points_wrap{

fill:#808080;

}

#select_skill_container{

width:650px;

height:450px;

margin:auto;

}

</style>

<body>

</svg>

</div>

</div>

</body>

</html>

/////

Android/iPhone/Windows Phone対応 jQuery Mobileスマートフォンアプリ開発

の本　

（プログラムを書いて、（ブログ内に）作成してみよう）

ここ

/////
jQuery API サンプル集 (Ajax など　ＪＳＯＮ）

jQuery API サンプル集

/////

rikezyo00sumaho at 00:00│Comments(0)│jQuery(JavaScript)でグラフ系アプリ？　メモ

コメントする

名前
	情報を記憶評価顔星

ギャラリー

リケジョな私の開発メモ スマホ端末・ウエアラブル端末・モバイル端末 「iPhoneやAndroid・・・」366 GPS APS

2015年01月01日

jQuery(JavaScript)でグラフ系アプリ？ メモ

コメントする

リケジョな私の開発メモ　スマホ端末・ウエアラブル端末・モバイル端末　　　　「iPhoneやAndroid・・・」366 GPS APS

jQuery(JavaScript)でグラフ系アプリ？　メモ