> For the complete documentation index, see [llms.txt](https://docs.launchboard.app/cxd/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.launchboard.app/cxd/code-web-app-data-visualization/dashboard-template-tutorial/3-producing-charts.md).

# 3 - Producing Charts

Making basic charts with the "viz" library is pretty easy. Let's get started.

### Try It Out

1 - Find the following Javascript in your *code.js* file.

```javascript
  viz.chart({
    sql:"SELECT Major, StartingMedianSalary FROM Degrees",
    chartType:"BarChart",
    containerId:"chart1"
  });
```

This generates a bar chart (`chartType: "BarChart"`) using data specified by the SQL statement(`sql: "SELECT Major, StartingMedianSalary FROM Degrees"`) and places the chart in an HTML element with an id of "chart1" (`containerId:"chart1"`). Notice that you should have a *\<div>* tag with that *id* in your HTML file.

**2 - Change the&#x20;*****chartType*****&#x20;to "ColumnChart"**

In your Javascript, change the chart type to "ColumnChart". Run the web app and notice how the chart changes. It may not look good since there are so many columns squished together. Choosing the right way to visualize the data will be part of the project challenge.

**3 - Change the&#x20;*****chartType*****&#x20;to "Histogram"**

In your Javascript, change the chart type to "Histogram". Run the web app and notice how the chart changes.

**4 - Add Another Chart that Uses a Different Data Table**

Copy and add the following Javascript into your *composeCharts( )* function.

```javascript
viz.chart({
    sql:"SELECT Year, Total FROM Trend",
    chartType:"ScatterChart",
    containerId:"chart3"
 });
```

You will also want to add the following HTML to your index.html file to provide a place for your chart.

```markup
<div class="card">
   <div id="chart3"></div>
</div>
```

Run your web app and you should see your new chart. This chart uses data from the "Trend" table in our database ([Example Google Sheets File](https://docs.google.com/spreadsheets/d/1o60fGIa1USsQTXyYc-Qh-eYQ2TlHaaEC_iSdzJ7WbD4/edit?usp=sharing)) to create a scatter plot (also called scatter chart).

### More Charts and More Options

See the [Code Examples](/cxd/code-web-app-data-visualization/code-examples.md) section for different charts and options you may want to use in your final dashboard, like titles and colors.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.launchboard.app/cxd/code-web-app-data-visualization/dashboard-template-tutorial/3-producing-charts.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.