MindTouch introduced an advanced charting tool in the Noatak release. Below are the sample outputs from the charting package, as well as sample code to invoke this functionality.
Pie Chart
| | Code Example
var pie_chart_data = { Beverages: 9, Desserts: 15, Sandwiches: 40, Salads: 21, Soups: 15 };
Chart{
title: "Lunch Sales",
type: "pie",
data: pie_chart_data,
height: 450,
width: 450
};
|
Single/Multi-Series Line Chart
| | Code Example
var line_chart_data = {
Europe:[{Q1:17},{Q2:21},{Q3:13},{Q4:41}],
US:[{Q1:20},{Q2:18},{Q3:13},{Q4:25}],
Japan:[{Q1:12},{Q2:24},{Q3:18},{Q4:33}]
};
Chart {
type:"line",
data: line_chart_data,
xaxis: "2009",
yaxis: "Price (in US Dollars)",
title: "Price per widget",
height:"450",
width:"450"
};
|
Column Chart
| | Code Example
var column_chart_data = [{Damien:17}, {Roy:31}, {Bob:63}];
Chart{
type:"column",
data: column_chart_data,
height:"450",
width:"450"
};
|
Multi-Series Column
| | Code Example
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
| | Code Example
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
| | Code Example
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
| | Code Example
var circular_gauge_chart_data = 67;
Chart{
type:"circulargauge",
data: circular_gauge_chart_data,
height:"450",
width:"450"
};
|
Linear Gauge Chart
| | Code Example
var linear_gauge_chart_data = 42;
Chart{
type:"lineargauge",
data: linear_gauge_chart_data,
height:"450",
width:"450"
};
|
Funnel Chart
| | Code Example
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)Callstack:
at en/docs/MindTouch/Release_Notes/Noatak_(9.12)/Charting_Examples
at Template:MindTouch/Controls/Chart
MindTouch.Deki.Script.Runtime.DekiScriptBadTypeException: num is not valid; expected list or map or xml or nil: /content/body/pre, line 103, column 26
at MindTouch.Deki.Script.Compiler.DekiScriptGeneratorEvaluation.Visit (MindTouch.Deki.Script.Expr.DekiScriptGeneratorForeachValue expr, DekiScriptGeneratorEvaluationState state) [0x00000] in <filename unknown>:0
at MindTouch.Deki.Script.Expr.DekiScriptGeneratorForeachValue.VisitWith[DekiScriptGeneratorEvaluationState,Empty] (IDekiScriptGeneratorVisitor`2 visitor, DekiScriptGeneratorEvaluationState state) [0x00000] in <filename unknown>:0
at MindTouch.Deki.Script.Compiler.DekiScriptGeneratorEvaluation.Generate (MindTouch.Deki.Script.Expr.DekiScriptGenerator expr, MindTouch.Deki.Script.Compiler.DekiScriptEval callback, DekiScriptExpressionEvaluationState state) [0x00000] in <filename unknown>:0
at MindTouch.Deki.Script.Compiler.DekiScriptExpressionEvaluation.Visit (MindTouch.Deki.Script.Expr.DekiScriptForeach expr, DekiScriptExpressionEvaluationState state) [0x00000] in <filename unknown>:0
at MindTouch.Deki.Script.Expr.DekiScriptForeach.VisitWith[DekiScriptExpressionEvaluationState,Range] (IDekiScriptExpressionVisitor`2 visitor, DekiScriptExpressionEvaluationState state) [0x00000] in <filename unknown>:0
at MindTouch.Deki.Script.Compiler.DekiScriptExpressionEvaluation.Visit (MindTouch.Deki.Script.Expr.DekiScriptXmlElement expr, DekiScriptExpressionEvaluationState state) [0x00000] in <filename unknown>:0 | Code Example
var pyramid_chart_data = {Damien:1543, Roy:1011, Bob:833, Emily:1323};
Chart{
type:"pyramid",
data:pyramid_chart_data,
height:"450",
width:"450"
};
|
/content/body/pre, reference to undefined name 'anychart': line 867
I'm Running MindTouch Core v.9.08.3
Do i need to Upgrade to comercial version?
Thanks!