Visualizaciones personalizadas
Las visualizaciones personalizadas en MicroStrategy pueden ser usadas para tener más opciones para consumir tu información sin limitarse a las visualizaciones nativas de la plataforma.
Con la versión 10, MicroStrategy facilitó la inclusión de las mismas mediante D3, una librería basada en JavaScript. Existen múltiples ejemplos del uso de esta librería y todas ellas pueden ser adaptadas para ser usadas por MicroStrategy.
Sin embargo, no estamos limitados a esta librería, cualquier visualización que esté basada en JavaScript puede ser adaptada, tal es el caso de la gráfica usada en este post que fue desarrollada con amCharts, otra librería para visualizaciones.
Visualization Builder
Para integrar visualizaciones prefabricadas o de diferentes librerias en JavasScript, MicroStrategy requiere el plugin Visualization Builder. Para tener acceso a este plugin basta con descargarlo (1) , añadirlo a la carpeta de plugins de su instalación (2) y reiniciar el servidor web (3). Una vez hecho esto tendrán una opción extra en su menú lateral:
Dentro de la interfaz del Visualization Builder, las pestañas que se deben usar son las siguientes:
- Code Editor: Es la pestaña donde tendremos el código de la visualización.
- Configuration: Nos permite definir propiedades de la visualización como nombre, ícono y librerías a usar.
- Editor: Aquí se añaden los atributos y métricas para probar la visualización.
Objetivo
El objetivo de este post es adaptar la siguiente visualización de amCharts:
Propiedades de la visualización
Lo primero será definir las propiedades de nuestra visualización.
A continuación una breve descripción de cada una de ellas:
- Visualization Name: Nombre de nuestra visualización.
- Light theme icon: Ícono a usar cuando se use un tema claro en visual insight.
- Dark theme icon: Ícono a usar cuando se use un tema oscuro en visual insight.
- Error message: Mensaje a mostrar cuando no se pueda mostrar la visualización.
- Error details: Mensaje a mostrar para detalle de error.
- Minimum number of attributes: Número mínimo de atributos requeridos para la visualización
- Minimum number of metrics: Número mínimo de métricas requeridas para la visualzación.
- Available for reports: Indica si la visualización podrá ser usada o no en reportes.
- Available for documents: Indica si la visualización podrá ser usada o no en documentos.
- Available for dashboards: Indica si la visualización podrá ser usada o no en Visual Insights.
- Add Library: Permite añadir referencias a librerías a usar por la visualización.
En este ejemplo, las librerías que usaremos son las siguientes:
- https://d3js.org/d3.v3.min.js (Librería de D3, esta gráfica en realidad no es una D3, sin embargo usaremos esta librería para poder crear el área donde estará la gráfica)
- https://www.amcharts.com/lib/3/serial.js
- https://www.amcharts.com/lib/3/amcharts.js
- https://www.amcharts.com/lib/3/plugins/dataloader/dataloader.min.js (Esta no es indispensable)
Guardamos la visualización, al momento de hacerlo por ser la primera vez nos pedirá un nombre para la carpeta en donde se ubicará. Con este nombre podemos identificar nuestra visualización dentro de la carpeta de widgets en nuestro servidor web.
Código
Paso 1.- Integrando la visualización (con datos fijos) en MicroStrategy
El siguiente paso es lograr que el código de la visualización sea desplegado en MicroStrategy con sus datos fijos.
El código completo de la visualización es el siguiente:
<!-- Styles -->
<style>
#chartdiv {
width: 100%;
height: 500px;
}
</style>
<!-- Resources -->
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<!-- Chart code -->
<script>
var chart = AmCharts.makeChart("chartdiv", {
"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
}
});
</script>
<!-- HTML -->
<div id="chartdiv"></div>Lo dividiremos de la siguiente forma:
- Estilos: El estilo de la gráfica, en este caso solo define el ancho y alto de la misma. En este ejemplo esto no nos será útil ya que en MicroStrategy estas propiedades no pueden ser definidas mediante CSS, esto lo solventaremos con el uso de D3.
- Recursos: Librerías usadas por la gráfica, de esta sección solo tomaremos las que no son útiles que son las dos que ya añadimos en la sección de propiedades.
- Código de la gráfica: En esta sección está todo el código que hace funcionar a la gráfica.
- o Datos: Aquí se encuentran los datos usados para graficar, esta sección posteriormente será reemplazada por datos de MicroStrategy.
- Código HTML: En este ejemplo el código HTML es usado para crear el área donde será dibujada la gráfica. En MicroStrategy esto será reemplazado por código D3.
La primer modificación que le haremos al código será sustituir el código HTML y de Estilos por código D3. Esto debido a que el código aceptado por el Visualization Builder es solo javascript, no podemos insertar directamente código HTML. El código debe ir en la pestaña de Code Editor dentro de la sección Plot Code
var body = d3.select(this.domNode)
.append('div')
.attr('id', "chartdiv")
.style('position','absolute')
.style('top', 10 + "px")
.style('left', 10 + "px")
.style('width', 100 + "%")
.style('height', 500 + "px")
De esta manera creamos una variable (body) que selecciona el área de nuestra visualización (this.domNode), añade una capa (chartdiv) y además define algunos estilos como margen superior e izquierdo, sin olvidar el ancho y alto de nuestra visualización.
El siguiente paso consiste en copiar, tal cual, el código de la gráfica y pegarlo debajo de nuestro código D3. Al aplicar los cambios y guardar nuestra visualización podemos ver que ya se muestra dentro de MicroStrategy.
Paso 2.- Formateando la visualización
Antes de permitir que nuestra gráfica use datos de MicroStrategy debemos realizar pequeñas modificaciones al código de la gráfica:
"graphs": [{
"alphaField": "alpha",
"balloonText": "[[value]] miles",
"dashLengthField": "dashLength",
"fillAlphas": 0.7,
"descriptionField": "townName",
"legendPeriodValueText": "total: [[value.sum]] mi",
"legendValueText": "[[value]] mi /[[description]]",
"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",
"descriptionField": "townName",
"legendValueText": "[[value]] /[[description]] ",
"title": "duration",
"fillAlphas": 0,
"valueField": "duration",
"valueAxis": "durationAxis"
}],Algunas funciones o lineas serán eliminadas del código, aquí las razones:
- alphaField: Define si una columna será coloreada con un tono de color diferente, en la gráfica podemos ver que la última columna está un poco transparente con respecto al resto, para este ejemplo no tendremos ningún campo que le indique al código esta característica.
- dashLenghtField: Define si la línea será punteada, también necesita un campo dentro de nuestros datos, para este ejemplo no tendremos nada que indique esta característica.
- labelText: Le indica a la gráfica que campo será usado para mostrar las etiquetas dentro de la gráfica. El ejemplo de la gráfica tiene dos campos descriptivos (TownName y TownName2), TownName2 lo usa para mostrar solo algunas etiquetas dentro de la gráfica (New York, Houston, etc..). En MicroStrategy solo tendremos un atributo descriptivo y mostrar siempre todos los nombres puede llegar a saturar la gráfica, por lo que se quitará.
- bulletSizeField: Indica que campo será usado para darle tamaño a al punto de la línea, se quita por claridad, ya que la leyenda de este valor usado para el tamaño no aparece en ningún lugar de la gráfica.
- mi/ miles: Son leyendas, ya que la gráfica muestra distancia fueron añadidas para dar más claridad al dato, en nuestro caso no serán útiles.
Así tambie, algunas otras lineas serán añadidas al código, aquí las razones:
- descriptionField: Indica que campo es el atributo descriptivo.
- / [[description]]: Añade el atributo descriptivo a la leyenda.
El código debe quedar de la siguiente manera:
"graphs": [{
"balloonText": "[[value]]",
"fillAlphas": 0.7,
"descriptionField": "townName",
"legendPeriodValueText": "total: [[value.sum]]",
"legendValueText": "[[value]]/[[description]]",
"title": "distance",
"type": "column",
"valueField": "distance",
"valueAxis": "distanceAxis"
}, {
"balloonText": "latitude:[[value]]",
"bullet": "round",
"bulletBorderAlpha": 1,
"useLineColorForBulletBorder": true,
"bulletColor": "#FFFFFF",
"descriptionField": "townName",
"labelPosition": "right",
"legendValueText": "[[value]]/[[description]]",
"title": "latitude/city",
"fillAlphas": 0,
"valueField": "latitude",
"valueAxis": "latitudeAxis"
}, {
"bullet": "square",
"bulletBorderAlpha": 1,
"bulletBorderThickness": 1,
"descriptionField": "townName",
"legendValueText": "[[value]] /[[description]] ",
"title": "duration",
"fillAlphas": 0,
"valueField": "duration",
"valueAxis": "durationAxis"
}],
Paso 3.- Integrando datos de MicroStrategy Tutorial (en la visualización)
Para este ejemplo se usó el proyecto Tutorial de Microstrategy y se creó un dataset con las siguientes características:
- Day (Filtrado por el mes enero 2014)
- Country (Filtro: USA)
- # of Customers
- Item Count
- Order Count
Para poder probar los datos necesitaremos un dataset, así que añadimos el dataset previamente creado para esta visualización. Y colocamos los atributos y métricas en la pestaña Editor
El código a usar para obtener la información de MicroStrategy es el siguiente, este código debe ir antes del código que hemos insertado hasta ahora:
var margin = {top: 20, right: 20, bottom: 20, left: 20},
width = parseInt(this.width,10) - margin.left - margin.right,
height = parseInt(this.height,10) - margin.top - margin.bottom;
var csv = this.dataInterface.getRawData(mstrmojo.models.template.DataInterface.ENUM_RAW_DATA_FORMAT.ROWS_ADV,{hasTitleName:true});
// Let's process the data which will be used to render the visualization
var processedData = [];
var numberOfRows = this.dataInterface.getTotalRows();
for (var n = 0; n < numberOfRows; n++) {
processedData[n] = {};
// Getting the values of the attributes
processedData[n][csv[n].headers[0].tname] = csv[n].headers[0].name + "";
processedData[n][csv[n].headers[1].tname] = csv[n].headers[1].name + "";
// Getting the values of the metrics
csv[n].values.forEach(function(value,i){
processedData[n][value.name] = value.rv + "";
});
}
//Getting attributeName
var gridData = this.dataInterface;
var rowHeaders = gridData.getRowHeaders();
var attributeName1 = rowHeaders.titles[0].n;
var attributeName2 = rowHeaders.titles[1].n;
var categories = d3.keys(processedData[0]).filter(function(key) {
return key !== attributeName1 && key !=attributeName2;
});
- margin: Define los márgenes a ser usados por la visualización.
- width: Define el ancho de la visualización.
- height: Define el alto de la visualización
- csv : Lee los datos de MicroStrategy y los almacena en un array.
- proccessedData: Almacena los datos de MicroStrategy en un formato legible para ala visualización.
- attributeName: Almacena los nombres de los atributos
- categories: Almacena los nombres de las métricas.
Dentro del navegador Google Chrome podemos usar las herramientas de desarrollador (Shift + Control + I para Windows). Con esta herramienta inspeccionamos nuestro código, si en algún punto del mismo agregamos una función debbugger podemos pausarlo en cierto punto de su ejecución, como se muestra dentro de la siguiente imagen (si colocamos después de la sección de código que acabamos de añadir podremos explorar los datos almacenados por nuestras variables).
En este porción de código, los nombres de nuestros atributos:
Así como, los nombres de nuestras métricas:
Y los elementos de nuestra información ya procesada:
Paso 4 .- Reemplazando datos fijos por datos dinámicos en MicroStrategy
Comenzaremos por reemplazar la información de datos fijos por nuestra variable processedData, quedando de la siguiente manera:
"dataProvider": processedData,
Después usamos nuestro atributo de día para definir el eje X:
"dataDateFormat": "YYYY-MM-DD", ß Se elimina
"categoryField": attributeName1, ßAtributo 1
Cambiamos el título de nuestros ejes Y:
"valueAxes": [{
"id": "distanceAxis",
"axisAlpha": 0,
"gridAlpha": 0,
"position": "left",
"title": categories[0] ßMétrica 1
}, {
"id": "latitudeAxis",
"axisAlpha": 0,
"gridAlpha": 0,
"labelsEnabled": false,
"position": "right"
}, {
"id": "durationAxis",
"duration": "mm",
"durationUnits": { ß Se elimina ya que nuestra métrica no tiene este formato.
"hh": "h ",
"mm": "min"
},
"axisAlpha": 0,
"gridAlpha": 0,
"inside": true,
"position": "right",
"title": categories[2] ßMétrica 3
}],
Hacemos los últimos ajustes:
"graphs": [{
"balloonText": "[[value]]",
"fillAlphas": 0.7,
"descriptionField": attributeName2, ß Atributo 2
"legendPeriodValueText": "total: [[value.sum]]",
"legendValueText": "[[value]]/[[description]]",
"title": categories[0], ß Métrica 1
"type": "column",
"valueField": categories[0], ß Métrica 1
"valueAxis": "distanceAxis"
}, {
"balloonText": categories[1]+" :[[value]]", ß Métrica 2
"bullet": "round",
"bulletBorderAlpha": 1,
"useLineColorForBulletBorder": true,
"bulletColor": "#FFFFFF",
"descriptionField": attributeName2, ß Atributo 2
"labelPosition": "right",
"legendValueText": "[[value]]/[[description]]",
"title": categories[1] +" / " + attributeName2, ß Métrica 2 + Atributo 2
"fillAlphas": 0,
"valueField": categories[1],
"valueAxis": "latitudeAxis"
}, {
"bullet": "square",
"bulletBorderAlpha": 1,
"bulletBorderThickness": 1,
"descriptionField": attributeName2, ß Atributo 2
"legendValueText": "[[value]]/[[description]]",
"title": categories[2] +" / " + attributeName2, ß Métrica 3 + Atributo 2
"fillAlphas": 0,
"valueField": categories[2], ß Métrica 3
"valueAxis": "durationAxis"
}],
Por último, definimos el área que ocupará nuestra gráfica de manera dinámica usando las variables definidas previamente:
var body = d3.select(this.domNode)
.append('div')
.attr('id', "chartdiv")
.style('position','absolute')
.style('top', margin.top + "px")
.style('left', margin.left + "px")
.style('width', width + "px")
.style('height', height + "px")Una vez hechos estos cambios y habiendo guardado la visualización está lista para ser usada con datos de MicroStrategy, estos últimos pasos son muy dependientes de la visualización que se quiera adaptar. Siempre habrá que estudiarla un poco para determinar en qué parte debemos insertar los datos de MicroStrategy.
Resultado
Código final:
var margin = {top: 20, right: 20, bottom: 20, left: 20},
width = parseInt(this.width,10) - margin.left - margin.right,
height = parseInt(this.height,10) - margin.top - margin.bottom;
var csv = this.dataInterface.getRawData(mstrmojo.models.template.DataInterface.ENUM_RAW_DATA_FORMAT.ROWS_ADV,{hasTitleName:true});
// Let's process the data which will be used to render the visualization
var processedData = [];
var numberOfRows = this.dataInterface.getTotalRows();
for (var n = 0; n < numberOfRows; n++) {
processedData[n] = {};
// Getting the values of the attributes
processedData[n][csv[n].headers[0].tname] = csv[n].headers[0].name + "";
processedData[n][csv[n].headers[1].tname] = csv[n].headers[1].name + "";
// Getting the values of the metrics
csv[n].values.forEach(function(value,i){
processedData[n][value.name] = value.rv + "";
});
}
//Getting attributeName
var gridData = this.dataInterface;
var rowHeaders = gridData.getRowHeaders();
var attributeName1 = rowHeaders.titles[0].n;
var attributeName2 = rowHeaders.titles[1].n;
var categories = d3.keys(processedData[0]).filter(function(key) {
return key !== attributeName1 && key !=attributeName2;
});
var body = d3.select(this.domNode)
.append('div')
.attr('id', "chartdiv")
.style('position','absolute')
.style('top', margin.top + "px")
.style('left', margin.left + "px")
.style('width', width + "px")
.style('height', height + "px")
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "light",
"legend": {
"equalWidths": false,
"useGraphSettings": true,
"valueAlign": "left",
"valueWidth": 120
},
"dataProvider": processedData,
"valueAxes": [{
"id": "distanceAxis",
"axisAlpha": 0,
"gridAlpha": 0,
"position": "left",
"title": categories[0]
}, {
"id": "latitudeAxis",
"axisAlpha": 0,
"gridAlpha": 0,
"labelsEnabled": false,
"position": "right"
}, {
"id": "durationAxis",
"axisAlpha": 0,
"gridAlpha": 0,
"inside": true,
"position": "right",
"title": categories[2]
}],
"graphs": [{
"balloonText": "[[value]]",
"fillAlphas": 0.7,
"descriptionField": attributeName2,
"legendPeriodValueText": "total: [[value.sum]]",
"legendValueText": "[[value]]/[[description]]",
"title": categories[0],
"type": "column",
"valueField": categories[0],
"valueAxis": "distanceAxis"
}, {
"balloonText": categories[1]+" :[[value]]",
"bullet": "round",
"bulletBorderAlpha": 1,
"useLineColorForBulletBorder": true,
"bulletColor": "#FFFFFF",
"descriptionField": attributeName2,
"labelPosition": "right",
"legendValueText": "[[value]]/[[description]]",
"title": categories[1] +" / " + attributeName2,
"fillAlphas": 0,
"valueField": categories[1],
"valueAxis": "latitudeAxis"
}, {
"bullet": "square",
"bulletBorderAlpha": 1,
"bulletBorderThickness": 1,
"descriptionField": attributeName2,
"legendValueText": "[[value]]/[[description]]",
"title": categories[2] +" / " + attributeName2,
"fillAlphas": 0,
"valueField": categories[2],
"valueAxis": "durationAxis"
}],
"chartCursor": {
"categoryBalloonDateFormat": "DD",
"cursorAlpha": 0.1,
"cursorColor":"#000000",
"fullWidth":true,
"valueBalloonsEnabled": false,
"zoomable": false
},
"categoryField": attributeName1,
"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
}
});
