WebDesigning 2007年6月号掲載のサンプルです。サンプルスクリプトは掲載されたものとは若干異なります。
【サンプルを実行する】
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Sample</title>
<link rel="stylesheet" href="main.css" type="text/css" media="all">
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="plotr/Plotr.js"></script>
<script type="text/javascript" src="plotr/excanvas.js"></script>
<script type="text/javascript"><!--
function displayGraph(){
var dataset = {
"id1": [[0, 0.5], [1, 0.89], [2, 2.15], [3, 4]]
};
var options = {
padding: {left: 50, right: 0, top: 10, bottom: 10},
backgroundColor: "#ddddee",
colorScheme: "#008000",
xTicks: [
{v:0, label:"りんご"},
{v:1, label:"みかん"},
{v:2, label:"メロン"},
{v:3, label:"いちご"}
]
};
var bar = new Plotr.BarChart("graph", options);
bar.addDataset(dataset);
bar.render();
}
window.onload = displayGraph;
// --></script>
</head>
<body>
<h1>果物の出荷量</h1>
<div><canvas id="graph" height="300" width="600"></canvas></div>
</body>
</html>
【サンプルを実行する】
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Sample</title>
<link rel="stylesheet" href="main.css" type="text/css" media="all">
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="plotr/Plotr.js"></script>
<script type="text/javascript" src="plotr/excanvas.js"></script>
<script type="text/javascript"><!--
function displayGraph(){
var dataset = {
"id1": [[0, 0.5], [1, 0.89], [2, 2.15], [3, 4]]
};
var options = {
padding: {left: 50, right: 0, top: 10, bottom: 10},
backgroundColor: "#ddddee",
colorScheme: "#008000",
xTicks: [
{v:0, label:"りんご"},
{v:1, label:"みかん"},
{v:2, label:"メロン"},
{v:3, label:"いちご"}
]
};
var bar = new Plotr.PieChart("graph", options);
bar.addDataset(dataset);
bar.render();
}
window.onload = displayGraph;
// --></script>
</head>
<body>
<h1>果物の出荷量（円グラフ）</h1>
<div><canvas id="graph" height="300" width="600"></canvas></div>
</body>
</html>
【サンプルを実行する】
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Sample</title>
<link rel="stylesheet" href="main.css" type="text/css" media="all">
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="plotr/Plotr.js"></script>
<script type="text/javascript" src="plotr/excanvas.js"></script>
<script type="text/javascript"><!--
function displayGraph(dataset, graphTitle){
options = {
padding: {left: 50, right: 0, top: 10, bottom: 10},
backgroundColor: "#ddddee",
colorScheme: "#008000"
};
options.xTicks = graphTitle;
var bar = new Plotr.BarChart("graph", options);
bar.addDataset(dataset);
bar.render();
}
function loadCSVfile(){
var msec = (new Date()).getTime();
new Ajax.Request("data.csv", {
method: "get",
parameters: "cache="+msec,
onSuccess:function(httpObj){
var LF = String.fromCharCode(10);
var dataLine = httpObj.responseText.split(LF);
var dataset = { "id1" : [] };
var options = { xTicks:[] };
for (var i=0; i<dataLine[1].split(",").length; i++){
dataset.id1.push([i, eval(dataLine[1].split(",")[i])]);
options.xTicks.push( { v : i , label : dataLine[0].split(",")[i] });
}
displayGraph(dataset, options.xTicks);
}
});
}
window.onload = loadCSVfile;
// --></script>
</head>
<body>
<h1>果物の出荷量（円グラフ）</h1>
<div><canvas id="graph" height="300" width="600"></canvas></div>
</body>
</html>
【サンプルを実行する】
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Sample</title>
<link rel="stylesheet" href="main.css" type="text/css" media="all">
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="plotr/Plotr.js"></script>
<script type="text/javascript" src="plotr/excanvas.js"></script>
<script type="text/javascript"><!--
function displayGraph(dataset, graphTitle){
options = {
padding: {left: 50, right: 0, top: 10, bottom: 10},
backgroundColor: "#ddddee",
colorScheme: "#008000"
};
options.xTicks = graphTitle;
var bar = new Plotr.PieChart("graph", options);
bar.addDataset(dataset);
bar.render();
}
function loadCSVfile(){
var msec = (new Date()).getTime();
new Ajax.Request("data.csv", {
method: "get",
parameters: "cache="+msec,
onSuccess:function(httpObj){
var LF = String.fromCharCode(10);
var dataLine = httpObj.responseText.split(LF);
var dataset = { "id1" : [] };
var options = { xTicks:[] };
for (var i=0; i<dataLine[1].split(",").length; i++){
dataset.id1.push([i, eval(dataLine[1].split(",")[i])]);
options.xTicks.push( { v : i , label : dataLine[0].split(",")[i] });
}
displayGraph(dataset, options.xTicks);
}
});
}
window.onload = loadCSVfile;
// --></script>
</head>
<body>
<h1>果物の出荷量（円グラフ）</h1>
<div><canvas id="graph" height="300" width="600"></canvas></div>
</body>
</html>
【サンプルを実行する】
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Sample</title>
<link rel="stylesheet" href="main.css" type="text/css" media="all">
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="plotr/Plotr.js"></script>
<script type="text/javascript" src="plotr/excanvas.js"></script>
<script type="text/javascript"><!--
function displayGraph(dataset, graphTitle){
options = {
padding: {left: 50, right: 0, top: 10, bottom: 10},
backgroundColor: "#ddddee",
colorScheme: "#008000"
};
options.xTicks = graphTitle;
var bar = new Plotr.LineChart("graph", options);
bar.addDataset(dataset);
bar.render();
}
function loadCSVfile(){
var msec = (new Date()).getTime();
new Ajax.Request("data.csv", {
method: "get",
parameters: "cache="+msec,
onSuccess:function(httpObj){
var LF = String.fromCharCode(10);
var dataLine = httpObj.responseText.split(LF);
var dataset = { "id1" : [] };
var options = { xTicks:[] };
for (var i=0; i<dataLine[1].split(",").length; i++){
dataset.id1.push([i, eval(dataLine[1].split(",")[i])]);
options.xTicks.push( { v : i , label : dataLine[0].split(",")[i] });
}
displayGraph(dataset, options.xTicks);
}
});
}
window.onload = loadCSVfile;
// --></script>
</head>
<body>
<h1>果物の出荷量（円グラフ）</h1>
<div><canvas id="graph" height="300" width="600"></canvas></div>
</body>
</html>
【サンプルを実行する】
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Sample</title>
<link rel="stylesheet" href="main.css" type="text/css" media="all">
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="plotr/Plotr.js"></script>
<script type="text/javascript" src="plotr/excanvas.js"></script>
<script type="text/javascript"><!--
function displayGraph(){
var dataset = {
"y2007Q1": [[0, 5.5], [1, 7.89], [2, 8.15], [3, 9.8]],
"y2006Q4": [[0, 1], [1, 2], [2, 3.2], [3, 4.5]],
"y2006Q3": [[0, 0.5], [1, 1.6], [2, 1.2], [3, 1.5]]
};
var options = {
padding: {left: 50, right: 0, top: 10, bottom: 10},
backgroundColor: "#dbdbdb",
colorScheme: "#550000",
xTicks: [
{v:0, label:"T1"},
{v:1, label:"T2"},
{v:2, label:"T3"},
{v:3, label:"T4"}
]
};
var gLine = new Plotr.BarChart("graph", options);
gLine.addDataset(dataset);
gLine.render();
}
window.onload = displayGraph;
// --></script>
</head>
<body>
<h1>グラフを描く</h1>
<div><canvas id="graph" height="300" width="600"></canvas></div>
</body>
</html>