As you start using JavaScript charts and creating your own, you will find that you will need a few tools or techniques for troubleshooting issues. This article offers a few tips.

1. View JavaScript Source code in web browser

One handy tip is to view the web browser source that contains your JavaScript code. This way you know if your version is actually running, what variable names are used in the result set returned from the Metric Insights report, what data is being returned, ...

1.1. View Source from web browser

When viewing your report where JavaScript chart displays, click View Source. In many cases you will want to choose View Frame Source or something similar depending on the web browser you are using.

1.2. View Source from web browser

Then you should see the JavaScript source code that is actually running in your web browser. In the example snippet below you can confirm the names of the result set returned from the report (e.g., "Total Units") and the data returned for that field (e.g., ..., 20485, 21612, 23113). You can also confirm the Custom Charting Variables, if any are being used. In this example, "rowField": "Sales Channel", "colField": "Product Subcategory", ...

View Source from web browser

2. JavaScript debugger

You can also run your JavaScript code through a debugger. One way to do that is to use your favorite web browser, set a few break points in your code, and run it when you point your web browser at the report that has the chart you are interested in.

2.1. Debug via standalone HTML

Sometimes it is difficult to debug a web page that is dynamically created on the server and running in your web browser. One way to simplify this is to make a copy of the web page returned from the server, save it in a standalone HTML file, and then run that file in your web browser and debug it.

  1. To do this, just do View Source as shown in above example.
  2. Then save the HTML source (with everything in it including the JavaScript code) to a file on your local computer.
  3. Then point your web browser at the file, set breakpoints, and run it.
  4. You can then inspect the logic flow, and the data in any of your JavaScript objects.