<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>

CC BY-SA 3.0
2018-04-12T17:27:27.297Z
Thanks, what is right of `{#I assumed....}`?  I am going to try this out later today.
Hellyar
CC BY-SA 3.0
2018-04-12T17:35:15.927Z
You can scroll to the right there ;)
Paul
CC BY-SA 3.0
2018-04-12T13:40:30.623Z
2018-04-12T13:40:30.623Z
Paul
<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>

<templating>
How do I template a JS Chart driven by table and field inputs?
# 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?



    
        chart created with amCharts | amCharts

**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 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 ;)  

---

