jqxChart inside jqzGrin with API data in Angular

[deitz88Participant]

im a little confused form the documentation about how to set up a chart inside a grid with populated data from an API pull and array of numbers:

a snippet of the component:

 private source = {
    datatype: 'local',
    localdata: [],
    datafields: [
...
 { name: 'priceHistory', type: 'Array<number>'}
    ],

and:

 public columns = [
...
  { text: 'Price Histiory', datafield: 'priceHistory', width: 200 }
  ]

with the populated data looking like:
91500,104500,185000,205000,311500,94000,130000,194500,300000 in the column.

[adminKeymaster]

Hi deitz88,

In order to use the Grid Charting feature, you can refer to https://www.jqwidgets.com/angular/angular-grid/ and open the Grid Charting example. The Chart in the example is built automatically based on the Grid’s selection. If no cells are selected, the Chart uses the full data source. Otherwise, it will use the selected cells data as a data source.

Best regards,
Peter Stoev

jQWidgets Team
https://www.jqwidgets.com/

[deitz88Participant]

using this method, it will be compatable with sparklines/sparkchart correct?

[Yavor DashevParticipant]

Hi deitz88,

Except for the charting options in the example regarding the grid charting some other types of charts are supported such as- stackedspline, waterfall, stackedwaterfall, stackedarea, stepline, stackedspline100, stackedspline etc.

Please, do not hesitate to contact us if you have any additional questions.

Best Regards,
Yavor Dashev
jQWidgets team
https://www.jqwidgets.com

[deitz88Participant]

So i am able to get the values to populate using the cellrendered method – but I cannot seem to be able to convert them into a jqx chart for sparklines. any tips?

[deitz88Participant]

essentially something like:

cellsrenderer = (row: number, columnfield: string, value: Array<string> | Array<number>, defaulthtml: string, columnproperties: any, rowdata: any): string | number => {
  // console.log(value.length) 
  this.rendered = (): void => {
   for(let i=0; i< value.length; i++){
     console.log(value)
     this.createSparkline('sparklineContainer' + i, value[i], i % 2 == 0 ? 'column' : 'line');
      }
    }
   let div = '<div id="sparklineContainer' + row + '" style="margin: 0; margin-bottom: 0; width: 100%; height: 40px;">'+this.rendered+'</div>';
    return div
}

createSparkline(selector, data, type) {

  let options =
      {
          title: '',
          description: '',
          showLegend: false,
          enableAnimations: false,
          showBorderLine: false,
          showToolTips: false,
          backgroundColor: 'transparent',
          padding: { left: 0, top: 0, right: 0, bottom: 0 },
          titlePadding: { left: 0, top: 0, right: 0, bottom: 0 },
          source: data,
          xAxis:
          {
              visible: false,
              valuesOnTicks: false
          },
          colorScheme: 'scheme01',
          seriesGroups:
          [
              {
                  type: type,
                  columnsGapPercent: 0,
                  columnsMaxWidth: 2,
                  valueAxis:
                  {
                      minValue: 0,
                      visible: false
                  },
                  series: [
                      {
                          linesUnselectMode: 'click',
                          colorFunction: (value: any, itemIndex: any, serie: any, group: any): string => {
                              return (value < 10) ? '#307DD7' : '#AA4643';
                          }
                      }
                  ]
              }
          ]
      };

  let myChart: jqwidgets.jqxChart =
      jqwidgets.createInstance(<code>#${selector}</code>, 'jqxChart', options);

}

[Yavor DashevParticipant]

Hi detitz88,

When you want to display a Chart in the jqxGrid you have to use the ready callback not rendered.

I have modified your code snippet partially so that showcases this functionality:

columns: any[] =
    [
        {
            text: 'City', align: 'center', dataField: 'city', width: 250,
        },
        {
            text: 'Store locations', align: 'center', dataField: 'count', width: 200
        },
        {
            text: 'Monthly sales', align: 'center', dataField: 'monthlySales'
        },
        {
            text: 'Daily sales trend', align: 'center', dataField: 'dailyTrend',
            cellsRenderer: (row: any, column: any, value: any, rowData: any) => {
                let div = '<div id="sparklineContainer' + row + '" style="margin: 0; margin-bottom: 0; width: 100%; height: 40px;"></div>';
                return div;
            }
        }
    ];
    createSparkline(selector, data, type) {
        let options =
            {
                title: '',
                description: '',
                showLegend: false,
                enableAnimations: false,
                showBorderLine: false,
                showToolTips: false,
                backgroundColor: 'transparent',
                padding: { left: 0, top: 0, right: 0, bottom: 0 },
                titlePadding: { left: 0, top: 0, right: 0, bottom: 0 },
                source: data,
                xAxis:
                {
                    visible: false,
                    valuesOnTicks: false
                },
                colorScheme: 'scheme01',
                seriesGroups:
                [
                    {
                        type: type,
                        columnsGapPercent: 0,
                        columnsMaxWidth: 2,
                        valueAxis:
                        {
                            minValue: 0,
                            visible: false
                        },
                        series: [
                            {
                                linesUnselectMode: 'click',
                                colorFunction: (value: any, itemIndex: any, serie: any, group: any): string => {
                                    return (value < 10) ? '#307DD7' : '#AA4643';
                                }
                            }
                        ]
                    }
                ]
            };
        let myChart: jqwidgets.jqxChart =
            jqwidgets.createInstance(<code>#${selector}</code>, 'jqxChart', options);
    }
    ready = (): void => {
        for (let i = 0; i < this.data.length; i++) {
            this.createSparkline('sparklineContainer' + i, this.data[i].dailyTrend, i % 2 == 0 ? 'column' : 'line');
        }
    };

and in your app.component.html:

    <jqxGrid #jqxgrid 
        [width]="getWidth()" [source]="dataAdapter" 
		[autoheight]=true
		[showtoolbar]=true
		[toolbarheight]=50
        [columns]="columns" 
		[rowsheight]="120"
		[selectionmode]="'multiplecellsadvanced'"
		[ready]="ready"
		>		
    </jqxGrid>

Let me know if that works for you!

Please, do not hesitate to contact us if you have any additional questions.

Best Regards,
Yavor Dashev
jQWidgets team
https://www.jqwidgets.com

[Author]

Posts