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

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} %'
  }
}

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
},{
...