score:0

Accepted answer

you can just replace the jquery functions in the question you linked to by their javascript equivalents.

1.

var ctx = jquery("#linechart").get(0).getcontext("2d");

becomes

var ctx = document.getelementbyid("linechart").getcontext("2d");

2.

spon = jquery('.sp').hasclass('enabled');
ncon = jquery('.nc').hasclass('enabled');
spaon = jquery('.sp-avg').hasclass('enabled');
ncaon = jquery('.nc-avg').hasclass('enabled');

becomes

spon = document.getelementsbyclassname('sp')[0].classname.indexof('enabled') != -1;
ncon = document.getelementsbyclassname('nc')[0].classname.indexof('enabled') != -1;
spaon = document.getelementsbyclassname('sp-avg')[0].classname.indexof('enabled') != -1;
ncaon = document.getelementsbyclassname('nc-avg')[0].classname.indexof('enabled') != -1;

3.

jquery(document).ready(function() {

becomes a javascript block before the end of the tag (there are other ways to do it, but this seemed the easiest to demonstrate)

4.

jquery('.chart-toggles a').click(function() {

becomes

function toggleline(t) {

and

<a class="sp enabled" onclick="toggleline(this)">toggle sp</a>
<a class="nc enabled" onclick="toggleline(this)">toggle nc</a>
<a class="nc-avg enabled" onclick="toggleline(this)">toggle nc avg</a>
<a class="sp-avg enabled" onclick="toggleline(this)">toggle sp avg</a>

5.

jquery(this).toggleclass('enabled');

becomes

if (t.classname.indexof('enabled') == -1)
     t.classname += ' enabled'
else
     t.classname = t.classname.replace('enabled', '');

fiddle with no jquery - http://jsfiddle.net/htc4gyu5/

notice that i've moved everything to the html block - that's mainly for #3 in the above list.


Related Query

More Query from same tag