implementing a chart

[webhoes]

Hello,

What are the options if I want to implement charts on a page on the front-end.

The data will consist of rows with different temperatures and columns with 12 months and an average.

I was thinking of using repeater fields to hold the data. But I am open to suggestions.

 

[mr-fan]

For the data of a chart you could use repeaters....or pages (repeaters use pages in the background) - this could be interesting since there are modules for pages to import csv to pages and some tool that are provided via the module BatchChildEditor.

But there are two options for table data available, too.

 

and for sure the pro module table:

https://processwire.com/api/modules/profields/table/

On the frontend you have the free choice on what you whant - for example you could use http://www.chartjs.org/.

regards mr-fan

[webhoes]

The charjs solutions looks great for the front-end.

fieldtype matrix look a much for just to hold some simple data.

 

I can make a repeater field that contais one  field for every month and a fillable title.

In _func.php I can make a function that renders the js script based on data available on that page. Logical?

 

[mr-fan]

Just named the matrix field because for put data from local to web this feature is a great one on this fieldtype:

Quote

Copy-pasting CSV values. (Tip: you can copy paste directly from an Excel spreadsheet. Such values will be 'tab-delimited').

Quote

In _func.php I can make a function that renders the js script based on data available on that page. Logical?

Yes you should create some PHP that renders the needed data for the javascript, or provide the data as JSON...many options again.

regards mr-fan

[mr-fan]

Hmm i forgot a alpha module from @bernhard that works with more complex data in backend and frontend...

 

[bernhard]

thanks for mentioning me here mr-fan but i don't think my module would be a good solution here. its only intended to display data (like lister and listerpro do) but with a lot more customization options (like different renderers, eg rendering timestamps as dd.mm.yyyy but sorting based on the unix integer etc)

i recently worked with chart.js (pulling data from my datatables module to have live filtering and sorting and see details that the chart hides because it shows only accumulated data). its very easy to use! you only have to provide a data array and set the options and thats it.

some snippets may help to get an idea:

var soll = {
    label: 'Controlling',
    data: getDataKum(goals[chartname]),
    borderColor: 'black',
    borderWidth: 1,
    borderDash: [10, 5, 2, 5],
    backgroundColor: 'rgba(0,0,0,0)',
};
var ist = {
    label: 'IST',
    data: getDataKum(getIstData(chartname)),
    borderColor: 'green',
    borderWidth: 1,
    backgroundColor: 'rgba(0,0,0,0)', 
};

// chart data
var data = {
    labels: ['jan', 'feb', '...'],
    datasets: [soll, ist],
}


// draw chart
// this is inside a loop to draw 4 charts with the same settings
//  [...]
$el = $('#'+chartname+'_chart');
charts[chartname] = initChart( $el, data );


/**
 * chart initialisation draw
 */
var initChart = function($el, data) {
    var myChart = new Chart($el, {
        type: 'line',
        data: data,
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true
                    }
                }]
            },
            elements: {
                line: {
                    tension: 0
                }
            },
            tooltips: { mode: 'index' },
        },
    });
    return myChart;
}

getDataKum() just returns an array of values. you could also just provide a static array via $config->js, for example:

// php
$config->js('mysampledata', [1, 2, 3]);

// js
var myChart = new Chart($el, {
    type: 'line',
    data: ProcessWire.config.mysampledata,
    [...]
});

happy charting