Beginer problems: Javascript error: Layout is not defined
151 views
Skip to first unread message
Javi
Oct 30, 2008, 10:40:22 PM10/30/08
to plotkit
I'm starting to use Plotkit but I can't get it to work. I've installed
it and Mochikit this way:
/
html pages
/lib
/PlotKit
/MochiKit
/others
And from any html page I link with:
<script type="text/javascript" src="/lib/MochiKit/MochiKit.js"></
script>
.
.
.
<script type="text/javascript" src="/lib/PlotKit/SweetCanvas.js"></
script>
When I download the PlotKit Simple Canvas Demo (
http://media.liquidx.net/js/plotkit-tests/quickstart.html ), put my
paths for the .js and try to run it, a Javascript error says: Layout
is not defined.
What am I doing wrong?
I'm in a Kubuntu 8.04 64bits box running Apache 2. I'll put the full
code, but as I said before, is the example modified to fit my paths:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"
lang="en"><head>
<title>PlotKit: Quickstart Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="quickstart_files/page.css" media="screen"
rel="Stylesheet" type="text/css">
<link href="tests.css" media="screen" rel="Stylesheet" type="text/
css">
<script src="/lib/MochiKit/MochiKit.js" type="text/javascript"></
script>
<script src="/lib/MochiKit/Base.js" type="text/javascript"></
script>
<script src="/lib/MochiKit/Iter.js" type="text/javascript"></script>
<script src="/lib/MochiKit/Logging.js" type="text/javascript"></
script>
<script src="/lib/MochiKit/DateTime.js" type="text/javascript"></
script>
<script src="/lib/MochiKit/Format.js" type="text/javascript"></
script>
<script src="/lib/MochiKit/Async.js" type="text/javascript"></
script>
<script src="/lib/MochiKit/DOM.js" type="text/javascript"></script>
<script src="/lib/MochiKit/Style.js" type="text/javascript"></
script>
<script src="/lib/MochiKit/LoggingPane.js" type="text/javascript"></
script>
<script src="/lib/MochiKit/Color.js" type="text/javascript"></
script>
<script src="/lib/MochiKit/Signal.js" type="text/javascript"></
script>
<script src="/lib/MochiKit/Visual.js" type="text/javascript"></
script>
<script src="/lib/PlotKit/excanvas.js" type="text/javascript"></
script>
<script src="/lib/PlotKit/Base.js" type="text/javascript"></script>
<script src="/lib/PlotKit/Layout.js" type="text/javascript"></
script>
<script src="/lib/PlotKit/Canvas.js" type="text/javascript"></
script>
<script src="/lib/PlotKit/SweetCanvas.js" type="text/javascript"></
script>
</head><body>
<div id="body">
<h2>Quickstart Demo</h2>
<div style="margin: 0pt auto; width: 500px;">
<div style="position: relative; width: 500px;"><canvas id="chart"
width="500" height="300"></canvas><div style="overflow: hidden;
position: absolute; font-size: 9px; z-index: 10; color: rgb(128, 128,
128); width: 24px; top: 281px; left: -3px; text-align: right;">0.0</
div><div style="overflow: hidden; position: absolute; font-size: 9px;
z-index: 10; color: rgb(128, 128, 128); width: 24px; top: 224px; left:
-3px; text-align: right;">4.0</div><div style="overflow: hidden;
position: absolute; font-size: 9px; z-index: 10; color: rgb(128, 128,
128); width: 24px; top: 167px; left: -3px; text-align: right;">8.0</
div><div style="overflow: hidden; position: absolute; font-size: 9px;
z-index: 10; color: rgb(128, 128, 128); width: 24px; top: 110px; left:
-3px; text-align: right;">12.0</div><div style="overflow: hidden;
position: absolute; font-size: 9px; z-index: 10; color: rgb(128, 128,
128); width: 24px; top: 53px; left: -3px; text-align: right;">16.0</
div><div style="overflow: hidden; position: absolute; font-size: 9px;
z-index: 10; color: rgb(128, 128, 128); width: 24px; top: -4px; left:
-3px; text-align: right;">20.0</div><div style="overflow: hidden;
position: absolute; font-size: 9px; z-index: 10; color: rgb(128, 128,
128); width: 50px; top: 293px; left: 5px; text-align: center;">0</
div><div style="overflow: hidden; position: absolute; font-size: 9px;
z-index: 10; color: rgb(128, 128, 128); width: 50px; top: 293px; left:
78.3333px; text-align: center;">1</div><div style="overflow: hidden;
position: absolute; font-size: 9px; z-index: 10; color: rgb(128, 128,
128); width: 50px; top: 293px; left: 151.667px; text-align:
center;">2</div><div style="overflow: hidden; position: absolute; font-
size: 9px; z-index: 10; color: rgb(128, 128, 128); width: 50px; top:
293px; left: 225px; text-align: center;">3</div><div style="overflow:
hidden; position: absolute; font-size: 9px; z-index: 10; color:
rgb(128, 128, 128); width: 50px; top: 293px; left: 298.333px; text-
align: center;">4</div><div style="overflow: hidden; position:
absolute; font-size: 9px; z-index: 10; color: rgb(128, 128, 128);
width: 50px; top: 293px; left: 371.667px; text-align: center;">5</
div><div style="overflow: hidden; position: absolute; font-size: 9px;
z-index: 10; color: rgb(128, 128, 128); width: 50px; top: 293px; left:
445px; text-align: center;">6</div></div>
<br>
<table id="values" class="data">
<thead>
<tr><td>x</td><td>y1</td><td>y2</td></tr>
</thead>
<tbody>
<tr><td>0</td><td>0</td><td>3</td></tr>
<tr><td>1</td><td>10</td><td>20</td></tr>
<tr><td>2</td><td>5</td><td>10</td></tr>
<tr><td>3</td><td>6</td><td>7</td></tr>
<tr><td>4</td><td>7</td><td>8</td></tr>
<tr><td>5</td><td>6</td><td>7</td></tr>
<tr><td>6</td><td>7</td><td>8</td></tr>
</tbody>
</table>
<script type="text/javascript">
var layout = new Layout("line");
layout.addDatasetFromTable("dataset2", $("values"), xcol = 0,
ycol = 2);
layout.addDatasetFromTable("dataset1", $("values"), xcol = 0,
ycol = 1);
layout.evaluate();
var chart = new SweetCanvasRenderer($("chart"), layout);
chart.render();
</script>
</div>
<div class="footer"><a href="http://www.liquidx.net/
plotkit/">PlotKit</a></div>
</div>
</body></html>
it and Mochikit this way:
/
html pages
/lib
/PlotKit
/MochiKit
/others
And from any html page I link with:
<script type="text/javascript" src="/lib/MochiKit/MochiKit.js"></
script>
.
.
.
<script type="text/javascript" src="/lib/PlotKit/SweetCanvas.js"></
script>
When I download the PlotKit Simple Canvas Demo (
http://media.liquidx.net/js/plotkit-tests/quickstart.html ), put my
paths for the .js and try to run it, a Javascript error says: Layout
is not defined.
What am I doing wrong?
I'm in a Kubuntu 8.04 64bits box running Apache 2. I'll put the full
code, but as I said before, is the example modified to fit my paths:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"
lang="en"><head>
<title>PlotKit: Quickstart Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="quickstart_files/page.css" media="screen"
rel="Stylesheet" type="text/css">
<link href="tests.css" media="screen" rel="Stylesheet" type="text/
css">
<script src="/lib/MochiKit/MochiKit.js" type="text/javascript"></
script>
<script src="/lib/MochiKit/Base.js" type="text/javascript"></
script>
<script src="/lib/MochiKit/Iter.js" type="text/javascript"></script>
<script src="/lib/MochiKit/Logging.js" type="text/javascript"></
script>
<script src="/lib/MochiKit/DateTime.js" type="text/javascript"></
script>
<script src="/lib/MochiKit/Format.js" type="text/javascript"></
script>
<script src="/lib/MochiKit/Async.js" type="text/javascript"></
script>
<script src="/lib/MochiKit/DOM.js" type="text/javascript"></script>
<script src="/lib/MochiKit/Style.js" type="text/javascript"></
script>
<script src="/lib/MochiKit/LoggingPane.js" type="text/javascript"></
script>
<script src="/lib/MochiKit/Color.js" type="text/javascript"></
script>
<script src="/lib/MochiKit/Signal.js" type="text/javascript"></
script>
<script src="/lib/MochiKit/Visual.js" type="text/javascript"></
script>
<script src="/lib/PlotKit/excanvas.js" type="text/javascript"></
script>
<script src="/lib/PlotKit/Base.js" type="text/javascript"></script>
<script src="/lib/PlotKit/Layout.js" type="text/javascript"></
script>
<script src="/lib/PlotKit/Canvas.js" type="text/javascript"></
script>
<script src="/lib/PlotKit/SweetCanvas.js" type="text/javascript"></
script>
</head><body>
<div id="body">
<h2>Quickstart Demo</h2>
<div style="margin: 0pt auto; width: 500px;">
<div style="position: relative; width: 500px;"><canvas id="chart"
width="500" height="300"></canvas><div style="overflow: hidden;
position: absolute; font-size: 9px; z-index: 10; color: rgb(128, 128,
128); width: 24px; top: 281px; left: -3px; text-align: right;">0.0</
div><div style="overflow: hidden; position: absolute; font-size: 9px;
z-index: 10; color: rgb(128, 128, 128); width: 24px; top: 224px; left:
-3px; text-align: right;">4.0</div><div style="overflow: hidden;
position: absolute; font-size: 9px; z-index: 10; color: rgb(128, 128,
128); width: 24px; top: 167px; left: -3px; text-align: right;">8.0</
div><div style="overflow: hidden; position: absolute; font-size: 9px;
z-index: 10; color: rgb(128, 128, 128); width: 24px; top: 110px; left:
-3px; text-align: right;">12.0</div><div style="overflow: hidden;
position: absolute; font-size: 9px; z-index: 10; color: rgb(128, 128,
128); width: 24px; top: 53px; left: -3px; text-align: right;">16.0</
div><div style="overflow: hidden; position: absolute; font-size: 9px;
z-index: 10; color: rgb(128, 128, 128); width: 24px; top: -4px; left:
-3px; text-align: right;">20.0</div><div style="overflow: hidden;
position: absolute; font-size: 9px; z-index: 10; color: rgb(128, 128,
128); width: 50px; top: 293px; left: 5px; text-align: center;">0</
div><div style="overflow: hidden; position: absolute; font-size: 9px;
z-index: 10; color: rgb(128, 128, 128); width: 50px; top: 293px; left:
78.3333px; text-align: center;">1</div><div style="overflow: hidden;
position: absolute; font-size: 9px; z-index: 10; color: rgb(128, 128,
128); width: 50px; top: 293px; left: 151.667px; text-align:
center;">2</div><div style="overflow: hidden; position: absolute; font-
size: 9px; z-index: 10; color: rgb(128, 128, 128); width: 50px; top:
293px; left: 225px; text-align: center;">3</div><div style="overflow:
hidden; position: absolute; font-size: 9px; z-index: 10; color:
rgb(128, 128, 128); width: 50px; top: 293px; left: 298.333px; text-
align: center;">4</div><div style="overflow: hidden; position:
absolute; font-size: 9px; z-index: 10; color: rgb(128, 128, 128);
width: 50px; top: 293px; left: 371.667px; text-align: center;">5</
div><div style="overflow: hidden; position: absolute; font-size: 9px;
z-index: 10; color: rgb(128, 128, 128); width: 50px; top: 293px; left:
445px; text-align: center;">6</div></div>
<br>
<table id="values" class="data">
<thead>
<tr><td>x</td><td>y1</td><td>y2</td></tr>
</thead>
<tbody>
<tr><td>0</td><td>0</td><td>3</td></tr>
<tr><td>1</td><td>10</td><td>20</td></tr>
<tr><td>2</td><td>5</td><td>10</td></tr>
<tr><td>3</td><td>6</td><td>7</td></tr>
<tr><td>4</td><td>7</td><td>8</td></tr>
<tr><td>5</td><td>6</td><td>7</td></tr>
<tr><td>6</td><td>7</td><td>8</td></tr>
</tbody>
</table>
<script type="text/javascript">
var layout = new Layout("line");
layout.addDatasetFromTable("dataset2", $("values"), xcol = 0,
ycol = 2);
layout.addDatasetFromTable("dataset1", $("values"), xcol = 0,
ycol = 1);
layout.evaluate();
var chart = new SweetCanvasRenderer($("chart"), layout);
chart.render();
</script>
</div>
<div class="footer"><a href="http://www.liquidx.net/
plotkit/">PlotKit</a></div>
</div>
</body></html>
Yang
Nov 8, 2008, 11:11:30 PM11/8/08
to plotkit
<script type='text/javascript' src='./plotkit-0.9.1/PlotKit/
Layout.js'></script>
Possibly, you lost that important "." before "/plotkit-0.9.1......."
On Oct 30, 7:40 pm, Javi <javi.azu...@gmail.com> wrote:
> I'm starting to use Plotkit but I can't get it to work. I've installed
> it and Mochikit this way:
>
> /
> html pages
> /lib
> /PlotKit
> /MochiKit
> /others
>
> And from any html page I link with:
>
> <script type="text/javascript" src="/lib/MochiKit/MochiKit.js"></
> script>
> .
> .
> .
> <script type="text/javascript" src="/lib/PlotKit/SweetCanvas.js"></
> script>
>
> When I download the PlotKit Simple Canvas Demo (http://media.liquidx.net/js/plotkit-tests/quickstart.html), put my
Layout.js'></script>
Possibly, you lost that important "." before "/plotkit-0.9.1......."
On Oct 30, 7:40 pm, Javi <javi.azu...@gmail.com> wrote:
> I'm starting to use Plotkit but I can't get it to work. I've installed
> it and Mochikit this way:
>
> /
> html pages
> /lib
> /PlotKit
> /MochiKit
> /others
>
> And from any html page I link with:
>
> <script type="text/javascript" src="/lib/MochiKit/MochiKit.js"></
> script>
> .
> .
> .
> <script type="text/javascript" src="/lib/PlotKit/SweetCanvas.js"></
> script>
>
Reply all
Reply to author
Forward
0 new messages