We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
  1. Home
  2. Forum
  3. Angular
  4. How to put a small simple line graph inside a grid

How to put a small simple line graph inside a grid

Just need to essentially have a little line representing a trend of data inside a grid cell. Didn't know if there was an obvious way to do this.


      <ej-grid #grid id="Grid"
        [enableAltRow]="true"
        [allowSorting]="true"
        [dataSource]="data"
        (create)="onGridCreate($event)"
        class="herd-list-table">
        <e-columns>
          <e-column field="naab" headerText="NAAB" textAlign="left" width=150></e-column>
          <e-column field="name" headerText="Name" textAlign="left" width=150></e-column>
          <e-column field="priceTrend" headerText="Price Trend" [allowSorting]="false" textAlign="left" width=150></e-column>
          <e-column field="retailPrice" headerText="Retail Price" textAlign="left" width=150></e-column>
          <e-column field="specialPrice" headerText="Special Price" textAlign="left" width=150></e-column>
        </e-columns>
      </ej-grid>

The price trend column would probably be an array of data points. If this is not something easily done then maybe showing how to put in a picture or some other alternative.

5 Replies
SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team March 6, 2017 09:26 AM UTC

Hi Zack,  
 
Thanks for contacting Syncfusion Support.  
 
We can achieve your requirement “Placing controls with in the Grid Cell” using the column-template feature of the Grid. Refer to the following API Reference.  
 
 
In the following code example, we have placed an element in the template and later in the dataBound event and actionComplete event of the Grid, respective control will be rendered. 
 
 
<ej-grid #grid [allowPaging]="true" [pageSettings]="{pageSize: 2}" [dataSource]="GridDataManager" (actionComplete)="onPaging($event)" (dataBound)="onCreate($event)"> 
    <e-columns> 
        <e-column headerText="Lines" [template]="columnTemplate" width=600 textAlign="right"></e-column> 
 
    </e-columns> 
</ej-grid> 
 
    export class GridComponent { 
 
        public columnTemplate = "#columnTemplate"; 
    } 
 
Index.html 
 
<script type="text/x-jsrender" id="columnTemplate"> 
    <span id="container{{:OrderID}}"></span> 
</script> 
 
Therefore, in the dataBound event and actionComplete event, you can get the currentViewData of the Grid. Using the data, you can render the chart control within the Grid cells which were already rendered with an template elements as discussed about.  
 
onCreate(e){ 
        //Acces cell values using currentViewData 
        var data = e.model.currentViewData; 
        for(var i = 0; i < data.length; i++){ 
            $("#container" + data[i].OrderID).ejChart({ 
                series: 
                    [{ 
                        dataSource: data, 
                        xName: "Freight", 
                        yName: "EmployeeID", 
                        type: "line" 
                    }], 
            });       
        }   
    } 
    onPaging(e){ 
        if(e.requestType == "paging") { 
            //Acces cell values using currentViewData 
            var data = e.model.currentViewData; 
            for(var i = 0; i < data.length; i++) { 
                $("#container" + data[i].OrderID).ejChart({ 
                    series: 
                        [ 
                            { 
                                dataSource: data, 
                                xName: "Freight", 
                                yName: "EmployeeID", 
                                type: "line" 
                            } 
                        ] 
                });       
            }   
        } 
    } 
 
We have prepared a sample that can be downloaded from the following location. 
 
 
Regards,  
Seeni Sakthi Kumar S. 


ZA Zack March 7, 2017 02:30 PM UTC

I'd like to avoid paging. I was thinking something smaller using sparklines 

http://js.syncfusion.com/demos/web/#!/bootstrap/sparkline/defaultfunctionalities

https://help.syncfusion.com/angular-2/grid/columns

So far trying to merge these two with your response I've gotten to here 


      <ej-grid #grid id="Grid"
        [enableAltRow]="true"
        [allowSorting]="true"
        [dataSource]="data"
        (dataBound)="onCreate($event)"
        class="herd-list-table">
        <e-columns>
          <e-column field="naab" headerText="NAAB" textAlign="left" width=150>e-column>
          <e-column field="name" headerText="Name" textAlign="left" width=150>e-column>
          <e-column headerText="Price Trend" [allowSorting]="false" textAlign="right" width=150>
            <template e-template let-data>
              <span *ngIf="data.id" id="container{{data.id}}">hellospan>
            template>
          e-column>
          <e-column field="retailPrice" headerText="Retail Price" textAlign="left" width=150>e-column>
          <e-column field="specialPrice" headerText="Special Price" textAlign="left" width=150>e-column>
        e-columns>
      ej-grid>


  onCreate(e){ 
    //Acces cell values using currentViewData 
    var data = e.model.currentViewData; 
    for(var i = 0; i < data.length; i++){ 
      $("#container" + data[i].id).ejSparkline({ 
        dataSource: this.data[i].priceTrend,
        tooltip: {
          visible: true,
          font: {
              size: "12px",
          }
        },
        type: "line",
        size: { height: 20, width: 150 }
      });       
    }    
  } 

I'd also really like to avoid putting script tags into my index.html to grab a column template if at all possible.






ZA Zack March 7, 2017 02:33 PM UTC

Nevermind got it working can totally live with it. Thanks for the help!

ZA Zack March 7, 2017 03:02 PM UTC

Here is what I did, gets a spark line in the graph nicely and on sorting the other columns keeps the spark line in the chart. 


In the html template

      <ej-grid #grid id="Grid"
        [enableAltRow]="true"
        [allowSorting]="true"
        [dataSource]="data"
        (dataBound)="onCreate($event)"
        (actionComplete)="onComplete($event)"
        class="herd-list-table">
        <e-columns>
          <e-column field="naab" headerText="NAAB" textAlign="left" width=140></e-column>
          <e-column field="name" headerText="Name" textAlign="left" width=140></e-column>
          <e-column headerText="Price Trend" [template]="template" [allowSorting]="false" textAlign="left" width=160></e-column>
          <e-column field="retailPrice" headerText="Retail Price" textAlign="left" width=140></e-column>
          <e-column field="specialPrice" headerText="Special Price" textAlign="left" width=140></e-column>
        </e-columns>
      </ej-grid>

In the component

  public template= "#columnTemp"; 

  onCreate(e){ 
    var data = e.model.currentViewData; 
    for(var i = 0; i < data.length; i++){ 
      $("#container" + data[i].id).ejSparkline({ 
        dataSource: data[i].priceTrend,
        type: "line",
        size: { height: 20, width: 150 }
      });       
    }    
  } 

  onComplete(e){
    if(e.requestType == "sorting"){ 
      this.onCreate(e);
    }
  }

In the index.html 

  <script type="text/x-jsrender" id="columnTemp"> 
    <span id="container{{:id}}"></span>
  </script> 

Not really sure how it all works but it's very nice

SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team March 8, 2017 04:03 AM UTC

Hi Zack,  
 
Thanks for the update. We are happy to you hear that your requirement has been achieved and you are good to go. 
 
Regards, 
Seeni Sakthi Kumar S. 


Loader.
Up arrow icon