Chart Examples on Timill Platform Documentation

Chart - Status Pie Chart

Mon, 01 Jan 0001 00:00:00 +0000

Display item distribution by status as a pie chart.

Example Code#

function generateChart(api, params, context) {
 const items = api.queryItems("type = 'task'");
 const byStatus = api.groupBy(items, 'status');
 
 return echarts.createPieChart(byStatus, {
 title: 'Task Status Distribution',
 colors: ['#4ade80', '#fbbf24', '#f87171', '#60a5fa']
 });
}

Full Example#

See source: source-files/01_status_pie_chart.js

Customization#

Change query:

const items = api.queryItems("type = 'ticket'");

Add colors:

return echarts.createPieChart(byStatus, {
 title: 'Status Distribution',
 colors: ['#4ade80', '#fbbf24', '#f87171', '#60a5fa', '#c084fc']
});

Chart - User Workload Bar Chart

Mon, 01 Jan 0001 00:00:00 +0000

Display workload distribution across users.

Example Code#

function generateChart(api, params, context) {
 const items = api.queryItems("type = 'task'");
 const byUser = api.groupBy(items, 'assignee');
 
 const labels = Object.keys(byUser);
 const values = labels.map(u => byUser[u].length);
 
 return echarts.createBarChart({
 labels: labels,
 values: values
 }, {
 title: 'User Workload',
 xLabel: 'User',
 yLabel: 'Tasks'
 });
}

Full Example#

See source: source-files/02_user_workload_bar.js

Customization#

Filter by status:

const items = api.queryItems("type = 'task' status = 'open'");

Chart - Priority Scatter Plot

Mon, 01 Jan 0001 00:00:00 +0000

Display priority vs due date as a scatter plot.

Example Code#

function generateChart(api, params, context) {
 const items = api.queryItems("type = 'task'");
 
 const data = items
 .filter(i => i.DueDate() !== null)
 .map(i => ({
 value: [
 new Date(i.DueDate()).getTime(),
 getPriorityScore(i.GetField('priority'))
 ],
 item: i
 }));
 
 return echarts.createScatterChart(data, {
 title: 'Priority vs Due Date',
 xLabel: 'Due Date',
 yLabel: 'Priority'
 });
}

function getPriorityScore(priority) {
 switch(priority) {
 case 'critical': return 4;
 case 'high': return 3;
 case 'medium': return 2;
 case 'low': return 1;
 default: return 0;
 }
}

Full Example#

See source: source-files/03_priority_scatter.js

Customization#

Change priority values:

function getPriorityScore(priority) {
 switch(priority) {
 case 'critical': return 100;
 case 'high': return 75;
 case 'medium': return 50;
 case 'low': return 25;
 default: return 0;
 }
}

Chart Source Files

Mon, 01 Jan 0001 00:00:00 +0000

This directory contains example JavaScript code for creating custom charts using the Scripted Charts feature.

How to Use These Examples#

These are example scripts that demonstrate how to write JavaScript code for scripted charts. To use them:

Navigate to a group’s page in Timill
Add a new widget and select “Scripted Chart”
In the widget configuration:
- Set a title for your chart
- Select the group to query data from
- Copy and paste the example JavaScript code into the Monaco Editor
- Optionally set a chart type hint and auto-refresh interval
Save the widget

The JavaScript code will execute on the backend when the widget is rendered, querying your data and generating an ECharts configuration.