asked on

Need help with a complete basic example of how to use: pivottable javascript function

I am very new to programming js, and am trying to just replicate an example found here:

https://github.com/nicolaskruchten/pivottable

The particular example is:
https://pivottable.js.org/examples/simple.html

Even though they provide the exact js code for the function, I don't understand what the full html code would look like (including where to place the js code, and how to call the function so that the table appears).

Thanks for any help. I'm stuck at step 1 :-(

HainKurt

check this jsfiddle

https://jsfiddle.net/szq91w6x/

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript" src="//code.jquery.com/jquery-git.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/2.14.0/pivot.min.js"></script>
  <title></title>
<script type='text/javascript'>
$(function(){
// This example is the most basic usage of pivot()

$(function() {
  $("#output").pivot(
    [{
      color: "blue",
      shape: "circle"
    }, {
      color: "red",
      shape: "triangle"
    }], {
      rows: ["color"],
      cols: ["shape"]
    }
  );
});

});
</script>
</head>

<body>
  <div id=output></div>
</body>
</html>

Open in new window

Ess Berliner

ASKER

This is extremely helpful. So, a function needs to surround the function that they show in the code example? I would never have figured that out! Also, in their example, there is styling that appears, but that isn't rendering in what you've shown. Do you know what is missing that the styling isn't showing up?

Thanks again.

HainKurt

need to add css

https://cdnjs.cloudflare.com/ajax/libs/pivottable/2.13.0/pivot.min.css

check their demos here

https://pivottable.js.org/examples/index.html

all point to jsfiddle demos

in my case, I added the css

https://jsfiddle.net/d7mu838h/

Ess Berliner

ASKER

Thank you so much for getting me on track!

ASKER CERTIFIED SOLUTION

Julian Hansen

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Ess Berliner

ASKER

Julian, Thank you for clarifying that the original answer give was not truly correct. And thank you also for taking the time to clearly explain why. Being new to this, I would not have known, had you not taken the time to correct the initial response. I would like to unmark the original solution as correct, but I'm not seeing an option for doing so.

HainKurt

hooo hooo... cmon, it was just a typo, copy paste issue :)

I copied the code and pasted into jsfiddle, then from jsfiddle source, created above html page
but when I copied the sample code, I did not notice it already had dom ready wrapper :)

so, the code should actually be

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <script type="text/javascript" src="//code.jquery.com/jquery-git.js"></script>
    <link rel="stylesheet" type="text/css" href="/css/result-light.css">
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/2.14.0/pivot.min.js"></script>
      <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/pivottable/2.13.0/pivot.min.css">
  <title>Pivot demo</title>

<script type='text/javascript'>//<![CDATA[
$(function(){
// This example is the most basic usage of pivot()
$("#output").pivot(
  [{
    color: "blue",
    shape: "circle"
  }, {
    color: "red",
    shape: "triangle"
  }], {
    rows: ["color"],
    cols: ["shape"]
  }
);
});//]]> 
</script>

</head>

<body>

  <div id=output></div>

</body>

</html>

Open in new window

demo
https://jsfiddle.net/omptcrzc/