Answers.Body: <p>I would definitely go for either a table field, or a <a href="https://github.com/verbb/super-table" rel="nofollow noreferrer">Super Table</a> field if you need more options and/or field types. In my experience, it's easiest to create charts from tabular data. With your table field in place, you could do this:</p>
  
  <pre><code>{% set js %}
      // ... A whole bunch of code
  
      "dataProvider": [
          {% for row in entry.tableFieldHandle %}
          {
              "category": "{{ row.categoryColumnHandle.first().title }}", {# I assumed a Super Table field with a category relation in the category column)
              "column-1": {{ row.valueColumnHandle }},
          },
          {% endfor %}
      ]
  
      // All the rest
  {% endset %}
  {% includeJs js %}
  </code></pre>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2018-04-12T17:27:27.297Z
Answers.Text: Thanks, what is right of `{#I assumed....}`?  I am going to try this out later today.
Answers.UserDisplayName: Hellyar
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2018-04-12T17:35:15.927Z
Answers.Text: You can scroll to the right there ;)
Answers.UserDisplayName: Paul
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2018-04-12T13:40:30.623Z
Answers.LastActivityDate: 2018-04-12T13:40:30.623Z
Answers.UserDisplayName: Paul
Body: <p>Okay...</p>
  
  <p>New iteration of an old challenge.</p>
  
  <p>I want to embed a chart on each of my entry pages.  I am currently looking at either <code>amcharts</code> or <code>chartsjs</code>. I can embed the chart using <code>{% set myJs %}</code>. </p>
  
  <p>I want Craft to provide the years and values for the chart.  How do I template this?</p>
  
  <p>I have attached a sample.  In the sample, Category corresponds with Year and Column-1 corresponds with Amount</p>
  
  <p>Is it best to draw from a table field in Craft or individual fields for each Year/Value combination?</p>
  
  <p>More importantly, how do I light it up / template it to get Craft to loop through items and spit out the values to drive the chart?</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  </code></pre>
  
  <p>
      
          chart created with amCharts | amCharts
          </p>
  
  <pre><code>    &lt;!-- amCharts javascript sources --&gt;
      &lt;script type="text/javascript" src="https://www.amcharts.com/lib/3/amcharts.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="https://www.amcharts.com/lib/3/serial.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="https://www.amcharts.com/lib/3/themes/light.js"&gt;&lt;/script&gt;
  
  
      &lt;!-- amCharts javascript code --&gt;
      &lt;script type="text/javascript"&gt;
          AmCharts.makeChart("chartdiv",
              {
                  "type": "serial",
                  "categoryField": "category",
                  "dataDateFormat": "YYYY-MM-DD",
                  "startDuration": 1,
                  "theme": "light",
                  "categoryAxis": {
                      "gridPosition": "start",
                      "parseDates": true
                  },
                  "chartCursor": {
                      "enabled": true
                  },
                  "chartScrollbar": {
                      "enabled": true
                  },
                  "trendLines": [],
                  "graphs": [
                      {
                          "fillAlphas": 1,
                          "id": "AmGraph-1",
                          "title": "graph 1",
                          "type": "column",
                          "valueField": "column-1"
                      }
                  ],
                  "guides": [],
                  "valueAxes": [
                      {
                          "id": "ValueAxis-1",
                          "title": "Axis title"
                      }
                  ],
                  "allLabels": [],
                  "balloon": {},
                  "titles": [
                      {
                          "id": "Title-1",
                          "size": 15,
                          "text": "Chart Title"
                      }
                  ],
                  "dataProvider": [
                      {
                          "category": "2014-03-01",
                          "column-1": 8
                      },
                      {
                          "category": "2014-03-02",
                          "column-1": 16
                      },
                      {
                          "category": "2014-03-03",
                          "column-1": 2
                      },
                      {
                          "category": "2014-03-04",
                          "column-1": 7
                      },
                      {
                          "category": "2014-03-05",
                          "column-1": 5
                      },
                      {
                          "category": "2014-03-06",
                          "column-1": 9
                      },
                      {
                          "category": "2014-03-07",
                          "column-1": 4
                      },
                      {
                          "category": "2014-03-08",
                          "column-1": 15
                      },
                      {
                          "category": "2014-03-09",
                          "column-1": 12
                      },
                      {
                          "category": "2014-03-10",
                          "column-1": 17
                      },
                      {
                          "category": "2014-03-11",
                          "column-1": 18
                      },
                      {
                          "category": "2014-03-12",
                          "column-1": 21
                      },
                      {
                          "category": "2014-03-13",
                          "column-1": 24
                      },
                      {
                          "category": "2014-03-14",
                          "column-1": 23
                      },
                      {
                          "category": "2014-03-15",
                          "column-1": 24
                      }
                  ]
              }
          );
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="chartdiv" style="width: 100%; height: 400px; background-color: #FFFFFF;" &gt;&lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
Tags: <templating>
Title: How do I template a JS Chart driven by table and field inputs?
ThreadText: # How do I template a JS Chart driven by table and field inputs?
  
  (Asked by: username_0 on 2018-04-11)
  
  Okay...
  
  New iteration of an old challenge.
  
  I want to embed a chart on each of my entry pages. I am currently looking at either `amcharts` or `chartsjs`. I can embed the chart using `{% set myJs %}`.
  
  I want Craft to provide the years and values for the chart. How do I template this?
  
  I have attached a sample. In the sample, Category corresponds with Year and Column-1 corresponds with Amount
  
  Is it best to draw from a table field in Craft or individual fields for each Year/Value combination?
  
  More importantly, how do I light it up / template it to get Craft to loop through items and spit out the values to drive the chart?
  
  ```
  <!DOCTYPE html>
  
  ```
  
  chart created with amCharts | amCharts
  
  ```
      <!-- amCharts javascript sources -->
      <script type="text/javascript" src="https://www.amcharts.com/lib/3/amcharts.js"></script>
      <script type="text/javascript" src="https://www.amcharts.com/lib/3/serial.js"></script>
      <script type="text/javascript" src="https://www.amcharts.com/lib/3/themes/light.js"></script>
  
      <!-- amCharts javascript code -->
      <script type="text/javascript">
          AmCharts.makeChart("chartdiv",
              {
                  "type": "serial",
                  "categoryField": "category",
                  "dataDateFormat": "YYYY-MM-DD",
                  "startDuration": 1,
                  "theme": "light",
                  "categoryAxis": {
                      "gridPosition": "start",
                      "parseDates": true
                  },
                  "chartCursor": {
                      "enabled": true
                  },
                  "chartScrollbar": {
                      "enabled": true
                  },
                  "trendLines": [],
                  "graphs": [
                      {
                          "fillAlphas": 1,
                          "id": "AmGraph-1",
                          "title": "graph 1",
                          "type": "column",
                          "valueField": "column-1"
                      }
                  ],
                  "guides": [],
                  "valueAxes": [
                      {
                          "id": "ValueAxis-1",
                          "title": "Axis title"
                      }
                  ],
                  "allLabels": [],
                  "balloon": {},
                  "titles": [
                      {
                          "id": "Title-1",
                          "size": 15,
                          "text": "Chart Title"
                      }
                  ],
                  "dataProvider": [
                      {
                          "category": "2014-03-01",
                          "column-1": 8
                      },
                      {
                          "category": "2014-03-02",
                          "column-1": 16
                      },
                      {
                          "category": "2014-03-03",
                          "column-1": 2
                      },
                      {
                          "category": "2014-03-04",
                          "column-1": 7
                      },
                      {
                          "category": "2014-03-05",
                          "column-1": 5
                      },
                      {
                          "category": "2014-03-06",
                          "column-1": 9
                      },
                      {
                          "category": "2014-03-07",
                          "column-1": 4
                      },
                      {
                          "category": "2014-03-08",
                          "column-1": 15
                      },
                      {
                          "category": "2014-03-09",
                          "column-1": 12
                      },
                      {
                          "category": "2014-03-10",
                          "column-1": 17
                      },
                      {
                          "category": "2014-03-11",
                          "column-1": 18
                      },
                      {
                          "category": "2014-03-12",
                          "column-1": 21
                      },
                      {
                          "category": "2014-03-13",
                          "column-1": 24
                      },
                      {
                          "category": "2014-03-14",
                          "column-1": 23
                      },
                      {
                          "category": "2014-03-15",
                          "column-1": 24
                      }
                  ]
              }
          );
      </script>
  </head>
  <body>
      <div id="chartdiv" style="width: 100%; height: 400px; background-color: #FFFFFF;" ></div>
  </body>
  
  ```
  
  **Tags:** templating
  
  
  ---
  
  ## 1 answers
  
  ### Answer by username_1 on 2018-04-12. Score: 2
  
  I would definitely go for either a table field, or a [Super Table](https://github.com/verbb/super-table) field if you need more options and/or field types. In my experience, it's easiest to create charts from tabular data. With your table field in place, you could do this:
  
  ```
  {% set js %}
      // ... A whole bunch of code
  
      "dataProvider": [
          {% for row in entry.tableFieldHandle %}
          {
              "category": "{{ row.categoryColumnHandle.first().title }}", {# I assumed a Super Table field with a category relation in the category column)
              "column-1": {{ row.valueColumnHandle }},
          },
          {% endfor %}
      ]
  
      // All the rest
  {% endset %}
  {% includeJs js %}
  
  ```
  
  > **Comments:**
  > **username_0**: Thanks, what is right of `{#I assumed....}`?  I am going to try this out later today.  
  > **username_1**: You can scroll to the right there ;)  
  
  ---
  
  