Descripción del Control

Control de gráficas basado en la librería D3js. Permite mostrar gráficas responsivas con un diseño atractivo de forma sencilla. Los tipos de gráficas disponibles son: Área, DinamicArea, Streamgraph, SequenceSunburst, Line, MultiLine, BarHierarchy, Bar, GroupedChart.

Compatibilidad

Web 

Usando el control 

Abrir Extensibility Catalog y dirigirse a la sección Web a través del menú lateral izquierdo.
 
Seleccionar el control D3jsCharts y luego instalar. (Ver documentación del Extensibility Catalog si tiene dudas en el proceso de instalación de controles). 

Durante el proceso de instalación se recomienda importar el XPZ de ejemplo que viene con el control. 
Al importar el XPZ de ejemplo del User Control en la ruta Ignia/Controls/D3jsCharts se crean varios  Web Panel  de ejemplo con varios ejemplos de los distintos tipos de gráficos y los SDT con la estructura de datos para cada tipo de gráfico.

Area

Procedimiento de carga de datos de esta gráfica:

Cargamos los valores del eje y en la colección &D3jsData.yAxisValues y del eje x en &D3jsData.xAxis

Sub "Load Data Area"
    &count = 30
    &i = 0
   
    &D3jsData.YAxisDescription = "sales"
    for &i = 0 to &count
        &ram = Random()*1300 + 400
        &D3jsData.yAxisValues.Add(&ram)                
    endfor
    
    &dateString  = "2014-07-"
    &i = 0
    
    for &i = 1 to &count
        if (&i < 10)
            &D3jsData.xAxis.Add("2014-07-0"+&i.ToString().Trim())
        else
            &D3jsData.xAxis.Add("2014-07-"+&i.ToString().Trim())
        endif    
    endfor
    
    &D3jsData.Categories.Add("date")
    
    &D3jsData.DateFormat = "%Y-%m-%d"
    
    &D3jsData.ColorRange.Add("#4DB6AC")
EndSub

Dinamic Area

Procedimiento de carga de datos de esta gráfica:

Los sucesivos valores se cargan llamando al procedimiento inidicado en LoadServicesUrl,

Sub "Load Data"
    
    &count = 50
    &i = 0
    
    &D3jsData.LoadServiceUrl = DinamicAreaNextValue.Link()
    
    for &i = 0 to &count
        &ram = Random()*48
        &D3jsData.yAxisValues.Add(&ram)                
    endfor
    
    &D3jsData.ColorRange.Add("rgba(205,105,105,0.5)")
    
EndSub

Multi Serie

Procedimiento de carga de datos de esta gráfica:

Sub "Load Data"
    &D3jData.Keys.Add("Alpha")
    &D3jData.Keys.Add("Delta")
    &D3jData.Keys.Add("Sigma")
    
    &Record = new()
    &Record.RecordDate = "2015/06/14"
    &Record.Values.Add(110)
    &Record.Values.Add(30)
    &Record.Values.Add(190)
    
    &D3jData.Records.Add(&Record)
       
    &Record = new()
    &Record.RecordDate = "2015/06/15"
    &Record.Values.Add(90)
    &Record.Values.Add(48)
    &Record.Values.Add(170)
    
    &D3jData.Records.Add(&Record)
       
    &Record = new()
    &Record.RecordDate = "2015/06/17"
    &Record.Values.Add(115)
    &Record.Values.Add(25)
    &Record.Values.Add(210)
    
    &D3jData.Records.Add(&Record)
       
    &Record = new()
    &Record.RecordDate = "2015/06/18"
    &Record.Values.Add(143)
    &Record.Values.Add(60)
    &Record.Values.Add(180)
    
    &D3jData.Records.Add(&Record)
          
    &D3jData.ColorRange.Add("#4CAF50")
    &D3jData.ColorRange.Add("#FF5722")
    &D3jData.ColorRange.Add("#5C6BC0")
    
    &D3jData.DateFormat = "%Y/%m/%d"
    
    &D3jData.YAxisDescription = "Sales"
EndSub

Sequence Sunburst