AM Charts for Ractive Dashboard
- Sarah Padilla (Unlicensed)
- Ricky Villa
Owned by Sarah Padilla (Unlicensed)
Here are some of the AM Charts to choose from to put in the dashboard. Â Each dashboard will need a query to display the data desired. Â Click on an AM chart to be brought to the code.
AM Chart Code
 
Drag out a button from components, right click, and select Create Event, Mouse, Mouse Click, and paste the code below.
The stackRactive tag must be on the ractive component (it can be named something other than stackRactive as long as the tag and the query on line 1 match)
On line two delete the <!-- Put Query Here -->Â and replace it with the desired query
On line nine delete the <!-- Put AM Chart Code Here -->Â and replace it with the desired AM Chart as shown under pictures
Note if you are using more than one chart, you will need to put a comma after the last }
var ractiveComponent = query('stackRactive');
var promise = finstack.eval('<!-- Put Query Here -->');
promise.then(function(event)
{
var chartData = event.result.toObj(false,false,true);
ractiveComponent.ractive.set('points',[
<!-- Put AM Chart Here -->
] );
}.bind(this));
Column With Rotated Series
{
btIcon: "icon-menu",
btIconText: "Menu",
view: 'amChart',
amId: top.app.Utils.GetPseudoId(),
range:"today()",
//query: (add a query here)
chartConfig: {
"type": "serial",
"theme": "light",
"marginRight": 70,
"dataProvider": [{
"country": "USA",
"visits": 3025,
"color": "#FF0F00"
}, {
"country": "China",
"visits": 1882,
"color": "#FF6600"
}, {
"country": "Japan",
"visits": 1809,
"color": "#FF9E01"
}, {
"country": "Germany",
"visits": 1322,
"color": "#FCD202"
}, {
"country": "UK",
"visits": 1122,
"color": "#F8FF01"
}, {
"country": "France",
"visits": 1114,
"color": "#B0DE09"
}, {
"country": "India",
"visits": 984,
"color": "#04D215"
}, {
"country": "Spain",
"visits": 711,
"color": "#0D8ECF"
}, {
"country": "Netherlands",
"visits": 665,
"color": "#0D52D1"
}, {
"country": "Russia",
"visits": 580,
"color": "#2A0CD0"
}, {
"country": "South Korea",
"visits": 443,
"color": "#8A0CCF"
}, {
"country": "Canada",
"visits": 441,
"color": "#CD0D74"
}],
"valueAxes": [{
"axisAlpha": 0,
"position": "left",
"title": "Visitors from country"
}],
"startDuration": 1,
"graphs": [{
"balloonText": "<b>[[category]]: [[value]]</b>",
"fillColorsField": "color",
"fillAlphas": 0.9,
"lineAlpha": 0.2,
"type": "column",
"valueField": "visits"
}],
"chartCursor": {
"categoryBalloonEnabled": false,
"cursorAlpha": 0,
"zoomable": false
},
"categoryField": "country",
"categoryAxis": {
"gridPosition": "start",
"labelRotation": 45
},
"export": {
"enabled": true
}
}}
Replace line 7 with your query by removing the // and deleting the (add a query here) and replacing it with your query. Â Then you will be able to change the data provider. Â Lines 2 and 3 can be changed to display a different icon and text on the bottom bar under the chart.
Layered Column Chart
{
btIcon: "icon-menu",
btIconText: "Menu",
view: 'amChart',
amId: top.app.Utils.GetPseudoId(),
range:"today()",
//query:'(add a query here)',
chartConfig: {
theme: "light",
type: "serial",
valueAxes: [{
unit: "%",
position: "left",
title: "GDP growth rate",
}],
startDuration: 1,
graphs: [{
balloonText: "GDP grow in [[category]] (2004): <b>[[value]]</b>",
fillAlphas: 0.9,
lineAlpha: 0.2,
title: "2004",
type: "column",
valueField: "year2004"
}, {
balloonText: "GDP grow in [[category]] (2005): <b>[[value]]</b>",
fillAlphas: 0.9,
lineAlpha: 0.2,
title: "2005",
type: "column",
clustered:false,
columnWidth:0.5,
valueField: "year2005"
}],
plotAreaFillAlphas: 0.1,
categoryField: "country",
categoryAxis: {
gridPosition: "start"
},
export: {
enabled: true
}
}}
Replace line 7 with your query by removing the // and deleting the (add a query here) and replacing it with your query.  Then you will be able to change the data provider.  Lines 2 and 3 can be changed to display a different icon and text on the bottom bar under the chart.
Column and Line Mix
{
btIcon: "icon-menu",
btIconText: "Menu",
view: 'amChart',
amId: top.app.Utils.GetPseudoId(),
range:"today()",
//query: (add a query here)
chartConfig: {
"type": "serial",
"addClassNames": true,
"theme": "light",
"autoMargins": false,
"marginLeft": 30,
"marginRight": 8,
"marginTop": 10,
"marginBottom": 26,
"balloon": {
"adjustBorderColor": false,
"horizontalPadding": 10,
"verticalPadding": 8,
"color": "#ffffff"
},
"dataProvider": [ {
"year": 2009,
"income": 23.5,
"expenses": 21.1
}, {
"year": 2010,
"income": 26.2,
"expenses": 30.5
}, {
"year": 2011,
"income": 30.1,
"expenses": 34.9
}, {
"year": 2012,
"income": 29.5,
"expenses": 31.1
}, {
"year": 2013,
"income": 30.6,
"expenses": 28.2,
"dashLengthLine": 5
}, {
"year": 2014,
"income": 34.1,
"expenses": 32.9,
"dashLengthColumn": 5,
"alpha": 0.2,
"additional": "(projection)"
} ],
"valueAxes": [ {
"axisAlpha": 0,
"position": "left"
} ],
"startDuration": 1,
"graphs": [ {
"alphaField": "alpha",
"balloonText": "<span style='font-size:12px;'>[[title]] in [[category]]:<br><span style='font-size:20px;'>[[value]]</span> [[additional]]</span>",
"fillAlphas": 1,
"title": "Income",
"type": "column",
"valueField": "income",
"dashLengthField": "dashLengthColumn"
}, {
"id": "graph2",
"balloonText": "<span style='font-size:12px;'>[[title]] in [[category]]:<br><span style='font-size:20px;'>[[value]]</span> [[additional]]</span>",
"bullet": "round",
"lineThickness": 3,
"bulletSize": 7,
"bulletBorderAlpha": 1,
"bulletColor": "#FFFFFF",
"useLineColorForBulletBorder": true,
"bulletBorderThickness": 3,
"fillAlphas": 0,
"lineAlpha": 1,
"title": "Expenses",
"valueField": "expenses",
"dashLengthField": "dashLengthLine"
} ],
"categoryField": "year",
"categoryAxis": {
"gridPosition": "start",
"axisAlpha": 0,
"tickLength": 0
},
"export": {
"enabled": true
}
}}
Replace line 7 with your query by removing the // and deleting the (add a query here) and replacing it with your query.  Then you will be able to change the data provider.  Lines 2 and 3 can be changed to display a different icon and text on the bottom bar under the chart.
Duration on Value Axis
{
btIcon: "icon-menu",
btIconText: "Menu",
view: 'amChart',
amId: top.app.Utils.GetPseudoId(),
range:"today()",
//query: (add a query here)
chartConfig: {
"type": "serial",
"theme": "light",
"legend": {
"equalWidths": false,
"useGraphSettings": true,
"valueAlign": "left",
"valueWidth": 120
},
"dataProvider": [{
"date": "2012-01-01",
"distance": 227,
"townName": "New York",
"townName2": "New York",
"townSize": 25,
"latitude": 40.71,
"duration": 408
}, {
"date": "2012-01-02",
"distance": 371,
"townName": "Washington",
"townSize": 14,
"latitude": 38.89,
"duration": 482
}, {
"date": "2012-01-03",
"distance": 433,
"townName": "Wilmington",
"townSize": 6,
"latitude": 34.22,
"duration": 562
}, {
"date": "2012-01-04",
"distance": 345,
"townName": "Jacksonville",
"townSize": 7,
"latitude": 30.35,
"duration": 379
}, {
"date": "2012-01-05",
"distance": 480,
"townName": "Miami",
"townName2": "Miami",
"townSize": 10,
"latitude": 25.83,
"duration": 501
}, {
"date": "2012-01-06",
"distance": 386,
"townName": "Tallahassee",
"townSize": 7,
"latitude": 30.46,
"duration": 443
}, {
"date": "2012-01-07",
"distance": 348,
"townName": "New Orleans",
"townSize": 10,
"latitude": 29.94,
"duration": 405
}, {
"date": "2012-01-08",
"distance": 238,
"townName": "Houston",
"townName2": "Houston",
"townSize": 16,
"latitude": 29.76,
"duration": 309
}, {
"date": "2012-01-09",
"distance": 218,
"townName": "Dalas",
"townSize": 17,
"latitude": 32.8,
"duration": 287
}, {
"date": "2012-01-10",
"distance": 349,
"townName": "Oklahoma City",
"townSize": 11,
"latitude": 35.49,
"duration": 485
}, {
"date": "2012-01-11",
"distance": 603,
"townName": "Kansas City",
"townSize": 10,
"latitude": 39.1,
"duration": 890
}, {
"date": "2012-01-12",
"distance": 534,
"townName": "Denver",
"townName2": "Denver",
"townSize": 18,
"latitude": 39.74,
"duration": 810
}, {
"date": "2012-01-13",
"townName": "Salt Lake City",
"townSize": 12,
"distance": 425,
"duration": 670,
"latitude": 40.75,
"dashLength": 8,
"alpha": 0.4
}, {
"date": "2012-01-14",
"latitude": 36.1,
"duration": 470,
"townName": "Las Vegas",
"townName2": "Las Vegas"
}, {
"date": "2012-01-15"
}, {
"date": "2012-01-16"
}, {
"date": "2012-01-17"
}, {
"date": "2012-01-18"
}, {
"date": "2012-01-19"
}],
"valueAxes": [{
"id": "distanceAxis",
"axisAlpha": 0,
"gridAlpha": 0,
"position": "left",
"title": "distance"
}, {
"id": "latitudeAxis",
"axisAlpha": 0,
"gridAlpha": 0,
"labelsEnabled": false,
"position": "right"
}, {
"id": "durationAxis",
"duration": "mm",
"durationUnits": {
"hh": "h ",
"mm": "min"
},
"axisAlpha": 0,
"gridAlpha": 0,
"inside": true,
"position": "right",
"title": "duration"
}],
"graphs": [{
"alphaField": "alpha",
"balloonText": "[[value]] miles",
"dashLengthField": "dashLength",
"fillAlphas": 0.7,
"legendPeriodValueText": "total: [[value.sum]] mi",
"legendValueText": "[[value]] mi",
"title": "distance",
"type": "column",
"valueField": "distance",
"valueAxis": "distanceAxis"
}, {
"balloonText": "latitude:[[value]]",
"bullet": "round",
"bulletBorderAlpha": 1,
"useLineColorForBulletBorder": true,
"bulletColor": "#FFFFFF",
"bulletSizeField": "townSize",
"dashLengthField": "dashLength",
"descriptionField": "townName",
"labelPosition": "right",
"labelText": "[[townName2]]",
"legendValueText": "[[value]]/[[description]]",
"title": "latitude/city",
"fillAlphas": 0,
"valueField": "latitude",
"valueAxis": "latitudeAxis"
}, {
"bullet": "square",
"bulletBorderAlpha": 1,
"bulletBorderThickness": 1,
"dashLengthField": "dashLength",
"legendValueText": "[[value]]",
"title": "duration",
"fillAlphas": 0,
"valueField": "duration",
"valueAxis": "durationAxis"
}],
"chartCursor": {
"categoryBalloonDateFormat": "DD",
"cursorAlpha": 0.1,
"cursorColor":"#000000",
"fullWidth":true,
"valueBalloonsEnabled": false,
"zoomable": false
},
"dataDateFormat": "YYYY-MM-DD",
"categoryField": "date",
"categoryAxis": {
"dateFormats": [{
"period": "DD",
"format": "DD"
}, {
"period": "WW",
"format": "MMM DD"
}, {
"period": "MM",
"format": "MMM"
}, {
"period": "YYYY",
"format": "YYYY"
}],
"parseDates": true,
"autoGridCount": false,
"axisColor": "#555555",
"gridAlpha": 0.1,
"gridColor": "#FFFFFF",
"gridCount": 50
},
"export": {
"enabled": true
}
}}
Replace line 7 with your query by removing the // and deleting the (add a query here) and replacing it with your query.  Then you will be able to change the data provider.  Lines 2 and 3 can be changed to display a different icon and text on the bottom bar under the chart.
Stacked Column Chart
{
btIcon: "icon-menu",
btIconText: "Menu",
view: 'amChart',
amId: top.app.Utils.GetPseudoId(),
range:"today()",
//query: (add a query here)
chartConfig: {
"type": "serial",
"theme": "light",
"legend": {
"horizontalGap": 10,
"maxColumns": 1,
"position": "right",
"useGraphSettings": true,
"markerSize": 10
},
"dataProvider": [{
"year": 2003,
"europe": 2.5,
"namerica": 2.5,
"asia": 2.1,
"lamerica": 0.3,
"meast": 0.2,
"africa": 0.1
}, {
"year": 2004,
"europe": 2.6,
"namerica": 2.7,
"asia": 2.2,
"lamerica": 0.3,
"meast": 0.3,
"africa": 0.1
}, {
"year": 2005,
"europe": 2.8,
"namerica": 2.9,
"asia": 2.4,
"lamerica": 0.3,
"meast": 0.3,
"africa": 0.1
}],
"valueAxes": [{
"stackType": "regular",
"axisAlpha": 0.3,
"gridAlpha": 0
}],
"graphs": [{
"balloonText": "<b>[[title]]</b><br><span style='font-size:14px'>[[category]]: <b>[[value]]</b></span>",
"fillAlphas": 0.8,
"labelText": "[[value]]",
"lineAlpha": 0.3,
"title": "Europe",
"type": "column",
"color": "#000000",
"valueField": "europe"
}, {
"balloonText": "<b>[[title]]</b><br><span style='font-size:14px'>[[category]]: <b>[[value]]</b></span>",
"fillAlphas": 0.8,
"labelText": "[[value]]",
"lineAlpha": 0.3,
"title": "North America",
"type": "column",
"color": "#000000",
"valueField": "namerica"
}, {
"balloonText": "<b>[[title]]</b><br><span style='font-size:14px'>[[category]]: <b>[[value]]</b></span>",
"fillAlphas": 0.8,
"labelText": "[[value]]",
"lineAlpha": 0.3,
"title": "Asia-Pacific",
"type": "column",
"color": "#000000",
"valueField": "asia"
}, {
"balloonText": "<b>[[title]]</b><br><span style='font-size:14px'>[[category]]: <b>[[value]]</b></span>",
"fillAlphas": 0.8,
"labelText": "[[value]]",
"lineAlpha": 0.3,
"title": "Latin America",
"type": "column",
"color": "#000000",
"valueField": "lamerica"
}, {
"balloonText": "<b>[[title]]</b><br><span style='font-size:14px'>[[category]]: <b>[[value]]</b></span>",
"fillAlphas": 0.8,
"labelText": "[[value]]",
"lineAlpha": 0.3,
"title": "Middle-East",
"type": "column",
"color": "#000000",
"valueField": "meast"
}, {
"balloonText": "<b>[[title]]</b><br><span style='font-size:14px'>[[category]]: <b>[[value]]</b></span>",
"fillAlphas": 0.8,
"labelText": "[[value]]",
"lineAlpha": 0.3,
"title": "Africa",
"type": "column",
"color": "#000000",
"valueField": "africa"
}],
"categoryField": "year",
"categoryAxis": {
"gridPosition": "start",
"axisAlpha": 0,
"gridAlpha": 0,
"position": "left"
},
"export": {
"enabled": true
}
}}
Replace line 7 with your query by removing the // and deleting the (add a query here) and replacing it with your query.  Then you will be able to change the data provider.  Lines 2 and 3 can be changed to display a different icon and text on the bottom bar under the chart.
Stacked Bar Chart
{
btIcon: "icon-menu",
btIconText: "Menu",
view: 'amChart',
amId: top.app.Utils.GetPseudoId(),
range:"today()",
//query: (add a query here)
chartConfig: {
"type": "serial",
"theme": "light",
"legend": {
"horizontalGap": 10,
"maxColumns": 1,
"position": "right",
"useGraphSettings": true,
"markerSize": 10
},
"dataProvider": [{
"year": 2003,
"europe": 2.5,
"namerica": 2.5,
"asia": 2.1,
"lamerica": 0.3,
"meast": 0.2,
"africa": 0.1
}, {
"year": 2004,
"europe": 2.6,
"namerica": 2.7,
"asia": 2.2,
"lamerica": 0.3,
"meast": 0.3,
"africa": 0.1
}, {
"year": 2005,
"europe": 2.8,
"namerica": 2.9,
"asia": 2.4,
"lamerica": 0.3,
"meast": 0.3,
"africa": 0.1
}],
"valueAxes": [{
"stackType": "regular",
"axisAlpha": 0.5,
"gridAlpha": 0
}],
"graphs": [{
"balloonText": "<b>[[title]]</b><br><span style='font-size:14px'>[[category]]: <b>[[value]]</b></span>",
"fillAlphas": 0.8,
"labelText": "[[value]]",
"lineAlpha": 0.3,
"title": "Europe",
"type": "column",
"color": "#000000",
"valueField": "europe"
}, {
"balloonText": "<b>[[title]]</b><br><span style='font-size:14px'>[[category]]: <b>[[value]]</b></span>",
"fillAlphas": 0.8,
"labelText": "[[value]]",
"lineAlpha": 0.3,
"title": "North America",
"type": "column",
"color": "#000000",
"valueField": "namerica"
}, {
"balloonText": "<b>[[title]]</b><br><span style='font-size:14px'>[[category]]: <b>[[value]]</b></span>",
"fillAlphas": 0.8,
"labelText": "[[value]]",
"lineAlpha": 0.3,
"title": "Asia-Pacific",
"type": "column",
"color": "#000000",
"valueField": "asia"
}, {
"balloonText": "<b>[[title]]</b><br><span style='font-size:14px'>[[category]]: <b>[[value]]</b></span>",
"fillAlphas": 0.8,
"labelText": "[[value]]",
"lineAlpha": 0.3,
"title": "Latin America",
"type": "column",
"color": "#000000",
"valueField": "lamerica"
}, {
"balloonText": "<b>[[title]]</b><br><span style='font-size:14px'>[[category]]: <b>[[value]]</b></span>",
"fillAlphas": 0.8,
"labelText": "[[value]]",
"lineAlpha": 0.3,
"title": "Middle-East",
"type": "column",
"color": "#000000",
"valueField": "meast"
}, {
"balloonText": "<b>[[title]]</b><br><span style='font-size:14px'>[[category]]: <b>[[value]]</b></span>",
"fillAlphas": 0.8,
"labelText": "[[value]]",
"lineAlpha": 0.3,
"title": "Africa",
"type": "column",
"color": "#000000",
"valueField": "africa"
}],
"rotate": true,
"categoryField": "year",
"categoryAxis": {
"gridPosition": "start",
"axisAlpha": 0,
"gridAlpha": 0,
"position": "left"
},
"export": {
"enabled": true
}
}}
Replace line 7 with your query by removing the // and deleting the (add a query here) and replacing it with your query.  Then you will be able to change the data provider.  Lines 2 and 3 can be changed to display a different icon and text on the bottom bar under the chart.
Stacked Bar Chart with Negative Values
{
btIcon: "icon-menu",
btIconText: "Menu",
view: 'amChart',
amId: top.app.Utils.GetPseudoId(),
range:"today()",
//query: (add a query here)
chartConfig: {
"type": "serial",
"theme": "light",
"rotate": true,
"marginBottom": 50,
"dataProvider": [{
"age": "85+",
"male": -0.1,
"female": 0.3
}, {
"age": "80-54",
"male": -0.2,
"female": 0.3
}, {
"age": "75-79",
"male": -0.3,
"female": 0.6
}, {
"age": "70-74",
"male": -0.5,
"female": 0.8
}, {
"age": "65-69",
"male": -0.8,
"female": 1.0
}, {
"age": "60-64",
"male": -1.1,
"female": 1.3
}, {
"age": "55-59",
"male": -1.7,
"female": 1.9
}, {
"age": "50-54",
"male": -2.2,
"female": 2.5
}, {
"age": "45-49",
"male": -2.8,
"female": 3.0
}, {
"age": "40-44",
"male": -3.4,
"female": 3.6
}, {
"age": "35-39",
"male": -4.2,
"female": 4.1
}, {
"age": "30-34",
"male": -5.2,
"female": 4.8
}, {
"age": "25-29",
"male": -5.6,
"female": 5.1
}, {
"age": "20-24",
"male": -5.1,
"female": 5.1
}, {
"age": "15-19",
"male": -3.8,
"female": 3.8
}, {
"age": "10-14",
"male": -3.2,
"female": 3.4
}, {
"age": "5-9",
"male": -4.4,
"female": 4.1
}, {
"age": "0-4",
"male": -5.0,
"female": 4.8
}],
"startDuration": 1,
"graphs": [{
"fillAlphas": 0.8,
"lineAlpha": 0.2,
"type": "column",
"valueField": "male",
"title": "Male",
"labelText": "[[value]]",
"clustered": false,
"labelFunction": function(item) {
return Math.abs(item.values.value);
},
"balloonFunction": function(item) {
return item.category + ": " + Math.abs(item.values.value) + "%";
}
}, {
"fillAlphas": 0.8,
"lineAlpha": 0.2,
"type": "column",
"valueField": "female",
"title": "Female",
"labelText": "[[value]]",
"clustered": false,
"labelFunction": function(item) {
return Math.abs(item.values.value);
},
"balloonFunction": function(item) {
return item.category + ": " + Math.abs(item.values.value) + "%";
}
}],
"categoryField": "age",
"categoryAxis": {
"gridPosition": "start",
"gridAlpha": 0.2,
"axisAlpha": 0
},
"valueAxes": [{
"gridAlpha": 0,
"ignoreAxisWidth": true,
"labelFunction": function(value) {
return Math.abs(value) + '%';
},
"guides": [{
"value": 0,
"lineAlpha": 0.2
}]
}],
"balloon": {
"fixedPosition": true
},
"chartCursor": {
"valueBalloonsEnabled": false,
"cursorAlpha": 0.05,
"fullWidth": true
},
"allLabels": [{
"text": "Male",
"x": "28%",
"y": "97%",
"bold": true,
"align": "middle"
}, {
"text": "Female",
"x": "75%",
"y": "97%",
"bold": true,
"align": "middle"
}],
"export": {
"enabled": true
}
}}
Replace line 7 with your query by removing the // and deleting the (add a query here) and replacing it with your query.  Then you will be able to change the data provider.  Lines 2 and 3 can be changed to display a different icon and text on the bottom bar under the chart.
Pie Chart
{
btIcon: "icon-menu",
btIconText: "Menu",
view: 'amChart',
amId: top.app.Utils.GetPseudoId(),
range:"today()",
//query: (add a query here)
chartConfig: {
"type": "pie",
"theme": "light",
"dataProvider": [ {
"country": "Lithuania",
"litres": 501.9
}, {
"country": "Czech Republic",
"litres": 301.9
}, {
"country": "Ireland",
"litres": 201.1
}, {
"country": "Germany",
"litres": 165.8
}, {
"country": "Australia",
"litres": 139.9
}, {
"country": "Austria",
"litres": 128.3
}, {
"country": "UK",
"litres": 99
}, {
"country": "Belgium",
"litres": 60
}, {
"country": "The Netherlands",
"litres": 50
} ],
"valueField": "litres",
"titleField": "country",
"balloon":{
"fixedPosition":true
},
"export": {
"enabled": true
}
}}
Replace line 7 with your query by removing the // and deleting the (add a query here) and replacing it with your query.  Then you will be able to change the data provider.  Lines 2 and 3 can be changed to display a different icon and text on the bottom bar under the chart.
3D Pie Chart
{
btIcon: "icon-menu",
btIconText: "Menu",
view: 'amChart',
amId: top.app.Utils.GetPseudoId(),
range:"today()",
//query: (add a query here)
chartConfig: {
"type": "pie",
"theme": "light",
"dataProvider": [ {
"country": "Lithuania",
"value": 260
}, {
"country": "Ireland",
"value": 201
}, {
"country": "Germany",
"value": 65
}, {
"country": "Australia",
"value": 39
}, {
"country": "UK",
"value": 19
}, {
"country": "Latvia",
"value": 10
} ],
"valueField": "value",
"titleField": "country",
"outlineAlpha": 0.4,
"depth3D": 15,
"balloonText": "[[title]]<br><span style='font-size:14px'><b>[[value]]</b> ([[percents]]%)</span>",
"angle": 30,
"export": {
"enabled": true
}
}}
Replace line 7 with your query by removing the // and deleting the (add a query here) and replacing it with your query.  Then you will be able to change the data provider.  Lines 2 and 3 can be changed to display a different icon and text on the bottom bar under the chart.