Page last modified 16:15, 11 May 2010 by coreyg
MindTouch Community Portal > MindTouch Community Portal > Knowledge Base > Using the MindTouch Chart Template
Table of contents
- 1.1. Pie Chart
- 1.1.1. The Chart template call:
- 1.2. Single/Multi-Series Line Chart
- 1.2.1. The Chart template call:
- 1.3. Column Chart
- 1.3.1. The Chart template call:
- 1.4. Multi-Series Column
- 1.4.1. The Chart template call:
- 1.1. Pie Chart
- 2. Bar Chart
- 2.1.1. The Chart template call:
- 2.2. Multi-Series Bar Chart
- 2.2.1. The Chart template call:
- 2.3. Circular Gauge
- 2.3.1. The Chart template call:
- 2.4. Linear Gauge Chart
- 2.4.1. The Chart template call:
- 2.5. Funnel Chart
- 2.5.1. The Chart template call:
- 2.6. Pyramid Chart
- 2.6.1. The Chart template call:
To help end users easily create a chart using MindTouch Charts, a template has been developed that can accept just a few paramaters and a dataset and return a fully-rendered chart. The template can be seen here: MindTouch Chart Template
The template will use the following parameters (although only the chart type and dataset are mandatory, and not all parameters apply to every chart):
| Parameter | Description | Notes |
|---|---|---|
| Type ("type") | Required. Defines the type of chart displayed |
|
| Data ("data") | Required. Dataset to generate chart. | Varies by chart type; input formats outlined below. |
| Height ("height") | Optional. Total outside chart height, including title, labels, and legend. | Default is 450. |
| Width ("width") | Optional. Total outside chart width, including title, labels, and legend. | Default is 450. |
| X-Axis Label ("xaxis") | Optional. Text label for the X-axis. | |
| Y-Axis Label ("yaxis") | Optional. Text label for the Y-axis. | |
| Range Minimum ("min") | Optional. For charts that have a scale associated with them, the starting (lowest) number. | Default is 0. |
| Range Maximum ("max") | Optional. For charts that have a scale associated with them, the ending (highest) number. | Default is 100. |
| Interval Markers ("interval") | Optional. For charts that have a scale associated with them, the intervals between the min and max numbers that have denotation markers. | Default is 10. |
| ID ("id") | Optional. Used to identify specific charts for interaction with outside sources (Javascript/DekiScript calls, dynamic chart updating, etc.) | |
| Chart Title ("title") | The name that will be displayed at the top of the chart |
Pie Chart
The Chart template call:
var pie_chart_data = {Emily:111, Bob:333, Damien:555, Roy:777};
Chart{
type:"pie",
data:pie_chart_data,
height: 450,
width: 450
};
Single/Multi-Series Line Chart
The Chart template call:
var line_chart_data = {
Damien:[{p1:17},{p2:21},{p3:13},{p4:41},{p5:17},{p6:1},{p7:61},{p8:21},{p9:11}],
Roy:[{p1:16},{p2:21},{p3:14},{p4:4},{p5:1},{p6:12},{p7:31},{p8:41},{p9:16}],
Bob:[{p1:32},{p2:2},{p3:63},{p4:-14},{p5:1},{p6:12},{p7:13},{p8:21},{p9:7}]
};
Chart{
type:"line",
data: line_chart_data,
height:"450",
width:"450"
};
Column Chart
The Chart template call:
var column_chart_data = [{Damien:17}, {Roy:31}, {Bob:63}];
Chart{
type:"column",
data: column_chart_data,
height:"450",
width:"450"
};
Multi-Series Column
The Chart template call:
var multiseriescolumn_chart_data = {Damien:[
{Q1:17},
{Q2:31},
{Q3:63},
{Q4:6}
],
Roy:[
{Q1:27},
{Q2:13},
{Q3:16},
{Q4:63}
],
Bob:[
{Q1:72},
{Q2:21},
{Q3:43},
{Q4:19}
],
Emily:[
{Q1:69},
{Q2:14},
{Q3:7},
{Q4:23}
]};
Chart{
type:"multiseriescolumn",
data: multiseriescolumn_chart_data,
height:"450",
width:"450"
};
Bar Chart
The Chart template call:
var bar_chart_data = [{Damien:117}, {Roy:131}, {Bob:93}, {Emily:143}];
Chart{
type:"bar",
data: bar_chart_data,
height:"450",
width:"450"
};
Multi-Series Bar Chart
The Chart template call:
var multiseriesbar_chart_data = {Damien:[
{Q1:17},
{Q2:31},
{Q3:63},
{Q4:6}
],
Roy:[
{Q1:27},
{Q2:13},
{Q3:16},
{Q4:63}
],
Bob:[
{Q1:72},
{Q2:21},
{Q3:43},
{Q4:19}
],
Emily:[
{Q1:69},
{Q2:14},
{Q3:7},
{Q4:23}
]};
Chart{
type:"multiseriesbar",
data: multiseriesbar_chart_data,
height:"450",
width:"450"
};
Circular Gauge
The Chart template call:
var circular_gauge_chart_data = 67;
Chart{
type:"circulargauge",
data: circular_gauge_chart_data,
height:"450",
width:"450"
};
Linear Gauge Chart
The Chart template call:
var linear_gauge_chart_data = 42;
Chart{
type:"lineargauge",
data: linear_gauge_chart_data,
height:"450",
width:"450"
};
Funnel Chart
The Chart template call:
var funnel_chart_data = [{"Website Visits":528756}, {Downloads:164052}, {"Valid Contacts":112167}, {"Interested to Buy":99128}, {Purchased:63876}];
Chart{
type:"funnel",
data:funnel_chart_data,
height:"450",
width:"450"
};
Pyramid Chart
num is not valid; expected list or map or xml or nil: /content/body/pre, line 103, column 26 (click for details)
The Chart template call:
var pyramid_chart_data = {Damien:1543, Roy:1011, Bob:833, Emily:1323};
Chart{
type:"pyramid",
data:pyramid_chart_data,
height:"450",
width:"450"
};
- Was this page helpful?
- Tag page
- What links here
| Images 0 | ||
|---|---|---|
| No images to display in the gallery. |
Copyright © 2011 MindTouch, Inc. Powered by
/content/body/pre, reference to undefined name 'anychart': line 867
Do i need an extension or template?
Thanks!