1

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>

Improve this question
1

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 %}
Improve this answer
  • Thanks, what is right of {#I assumed....}? I am going to try this out later today. – Hellyar Apr 12 '18 at 17:27
  • 1
    You can scroll to the right there ;) – Paul Apr 12 '18 at 17:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.