Re: [visualization-api] Bell Curve Code Not Working

17 views
Skip to first unread message

Daniel LaLiberte

unread,
Apr 27, 2018, 11:23:10 AM4/27/18
to Google Visualization API
You should probably look in the browser's debugger to find out what the problem is.   Perhaps you didn't remove the hidden loading of the charts/loader.js, under the JS Settings, which is extraneous if you are loading it yourself in the HTML.

This seems to work:  https://codepen.io/anon/pen/WJodjq

On Fri, Apr 27, 2018 at 11:09 AM spin888 <lawrence...@gmail.com> wrote:

I'd like to combine the HTML, CSS, and JS into a single HTML script for the code already created at "Bell Curve Using Google Charts API"

https://codepen.io/josdea/pen/JKXpJb/

It should be as simple as putting the CSS in style and JS in script in the head, right? For some reason, I can't get it to work. Any help would be greatly appreciated. Here's my code


<html>
  <head>
    <script type="text/javascript"     
    src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

var data;
var options;
let chart;
var stndDev = 1;
var mean = 0;
let xMin = -3;
let xMax = 3.1;
let xLeft = -2;
let xRight = 1.25;

google.charts.load("current", { packages: ["corechart"] });
google.charts.setOnLoadCallback(prepareChart);

function prepareChart() {
  data = new google.visualization.DataTable();
  setChartOptions();
  addColumns();
  addData();
  drawChart();
}
function setChartOptions() {
  options = { legend: "none" };
  options.hAxis = {};
  options.hAxis.minorGridlines = {};
  options.hAxis.minorGridlines.count = 5;
  return options;
}
function addColumns() {
  data.addColumn("number", "X Value");
  data.addColumn("number", "Y Value");
  data.addColumn({ type: "boolean", role: "scope" });
  data.addColumn({ type: "string", role: "style" });
}
function addData() {
  data.addRows(createArray(xMin, xMax, xLeft, xRight, mean, stndDev));
}
function createArray(xMin, xMax, xLeft, xRight, mean, stndDev) {
  let chartData = new Array([]);
  let index = 0;
  for (var i = xMin; i <= xMax; i += 0.1) {
    chartData[index] = new Array(4);
    chartData[index][0] = i;
    chartData[index][1] = jStat.normal.pdf(i, mean, stndDev);

    if (i < xLeft || i > xRight) {
      chartData[index][2] = false;
    }
    chartData[index][3] =
      "opacity: 1; + color: #8064A2; + stroke-color: black; ";

    index++;
  }
  return chartData;
}
function drawChart() {
  chart = new google.visualization.AreaChart(
    document.getElementById("chart_div")
  );
  chart.draw(data, options);
}

    </script>
  </head>
  <body>

  <style>
#chart_div{
width: 1200px;
height: 600px;
margin: 5px;
}
  </style>


    <h1>Bell Curve with Google Charts API</h1>
    <div id="chart_div"></div>

  </body>
</html>

The code currently results in a "Data Table Not Defined" Error.

Any help would be greatly appreciated!


--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/84e462b5-ef09-4348-b438-3732cade12bd%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.


--
Reply all
Reply to author
Forward
0 new messages