Charts Integration

Sparklines

FancyGrid uses sparkline library http://omnipotent.net/jquery.sparkline/
To use sparklines, it needs include it on page.

Sparklines are used as column types.

They are: sparklineline, sparklinebar, sparklinetristate, sparklinediscrete, sparklinebullet ,sparklinepie, sparklinebox

Here is basic samples

Example: data index

{
  title: 'Line',
  index: 'data1',
  type: 'sparklineline',
  sparkConfig: {
    spotRadius: 1.7
  }
}

data: [
 { data1: [-2,3,4,1,0,-5], data2: [1,2,3,4,5]},
 ...
];

Example: param values with data indexes

{
  width: 50,
  type: 'sparklineline',
  sparkConfig: {
    sliceColors: ["#9DB160", "#B26668", "#4091BA", "#8E658E", "#3B8D8B", "#B6CA79", "#CB7F81", "#4091BA", "#8E658E", "#3B8D8B"]
  },
  values: ['toyota', 'gm', 'vw', 'ford', 'hyundai']
}

data = [
  { year: 2006, toyota: 6800228, gm: 5779719, vw: 5429896, ford: 3956708, hyundai: 2003608 },
  { year: 2007, toyota: 7211474, gm: 6259520, vw: 5964004, ford: 3565626, hyundai: 2292075 },
  ...
];

Built-in sparklines

FancyGrid has several built-in self sparklines columns.

They are: grossloss, progressbar, progressdonut, hbar

Using of built-in sparklines is similiar to sparklines.
To config use sparkConfig

Example: gross loss

{  
  title: 'Gross/Loss',
  index: 'percents',
  type: 'grossloss',
  width: 75,
  sparkConfig: {
    grossColor: '#6fb270',
    lossColor: '#dc6b67',
    showOnMax: true,
    percents: true
  }
}

Example: progressbar

{  
  index: 'online',
  type: 'progressbar',
  width: 290,
  title: 'Relative size',
  sparkConfig: {
    percents: false
  }
}

Example: progressdonut

{  
  type: 'progressdonut',
  width: 66,
  sparkConfig: {
    size: 28,
    tipTpl: 'Value: {value} %'
  }
}

Example: hbar

{  
  width: 550,
  type: 'hbar',
  index: ['toyota', 'gm', 'vw', 'ford', 'hyundai'],
  sparkConfig: {
    tipFormat: function(o){
      return o.title + ' in ' + o.data.year + ':' + o.percents.toPrecision(4) + '%';
    },
    title: ['Toyota', 'GM', 'Volkswagen', 'Ford', 'Hyundai'],
    legend: {
      type: 'bbar',
      style: {
        'margin-left': '100px'
      }
    }
  }
}

Example: hbar stacked

{  
  index: ['0','1','2'],
  type: 'hbar',
  width: 400,
  sortable: false,
  title: '',
  sparkConfig: {
    tipTpl: '{value}',
    stacked: true,
    tipFormat: function(o){
      var data = o.data;
      
      return [
        'Overall ranking: ' + (data[0] + data[1] + data[2]),
        'Current-account balance: ' + data[0],
        'Private-sector credit: ' + data[1],
        'Foreign debt: ' + data[2]
      ].join("");
    },
    title: ['Balance', 'Credit', 'Foreign debt'],
    legend: {
      type: 'tbar',        
      style: {}
    }
  }
}

Example: hbar stacked full

{  
  width: 550,
  type: 'hbar',
  index: ['toyota', 'gm', 'vw', 'ford', 'hyundai'],
  sparkConfig: {
    fullStack: true,
    stacked: true,
    tipFormat: function(o){
      return o.title + ' in ' + o.data.year + ':' + o.percents.toPrecision(4) + '%';
    },
    title: ['Toyota', 'GM', 'Volkswagen', 'Ford', 'Hyundai'],
    legend: {
      type: 'bbar',
      style: {
        'margin-left': '100px'
      }
    }
  }
}

To change default FancyGrid chart colors use Fancy.COLORS before widget instance

Example: Changing default chart colors

Fancy.COLORS = ['#0078B2', '#003D58', '#00ACDD'];

HighCharts

To use HighCharts it needs to include it on page.

<script src="http://code.highcharts.com/highcharts.js"></script>

If information about chart is set in grid, it will be auto binding: editing, sorting.
Editing in grid will auto update chart.
Sorting of grid will auto update chart.

It is possible to set several charts to grid.

Sending data to chart.

data: {
  items: data,
  chart: [{
    type: 'highchart',
    id: 'column',
    fields: ['toyota', 'gm', 'vw', 'ford', 'hyundai']
  }]
},

Sending data to charts.

data: {
  items: data,
  chart: [{
    type: 'highchart',
    id: 'spline',
    fields: ['toyota', 'gm', 'vw', 'ford', 'hyundai']
  },{
    type: 'highchart',
    id: 'bar',
    fields: ['toyota', 'gm', 'vw', 'ford', 'hyundai']
  },{
    type: 'highchart',
    id: 'column',
    fields: ['toyota', 'gm', 'vw', 'ford', 'hyundai']
  }]
},

Reading from chart.

If do not set data items but set chart info, grid will auto read data from chart.

data: {
  chart: {
    type: 'highchart',
    id: 'chart',
    fields: ['toyota', 'gm', 'vw', 'ford', 'hyundai']
  }
}

Column categories from chart.

To set values of categories from chart set index of column with xAxis.categories.

data: {
  chart: {
    type: 'highchart',
    id: 'chart',
    fields: ['toyota', 'gm', 'vw', 'ford', 'hyundai']
  }
},
columns: [{
  title: 'Year',
  index: 'xAxis.categories',
  editable: false
},{
...