3.0.0-beta.27 • Published 6 years ago

fenix-ui-chart-creator v3.0.0-beta.27

Weekly downloads
3
License
GPL-2.0
Repository
github
Last release
6 years ago

Stories in Ready

#FENIX UI CHART

Requirejs import :

define(['fenix-ui-chart-creator'], function (ChartCreator) {
...

From a Fenix resource (FX in this document) and some parameters provided to the initialization function, a pivotator-based creator will perform three mains operations : -denormalisation of the dataset(optional) -aggregation (optional) -renderisation of the result with an external library

Constructor :

   this.chart = new ChartCreator(config);

with config is a json Object with these fields :

Full example :

var FX={
  metadata:{
	dsd:{
	columns:[
		{"id" : "country","title" : {"EN" : "COUNTRY CODE"},key:true},
		{"id" : "country_EN","title" : {"EN" : "COUNTRIES"}},
		{"id" : "element","title" : { "EN" : "elementcode"},key:true},
		{"id" : "element_EN","title" : {"EN" : "element"}},
		{"id" : "item","title" : {"EN" : "Item"},key:true},
		{"id" : "item_EN","title" : {"EN" : "item"}},
		{"id" : "year","title" : {"EN" : "year"},key:true,subject:"time"},
		{"id" : "um","title" : {"EN" : "um"},subject:"um"},
		{"id" : "value","title" : {"EN" : "value"},subject:"value",dataType:"number"},
		{"id" : "flag","title" : {"EN" : "flag"},subject:"flag"},
		{"id" : "v1","title" : {"EN" : "v1"},dataType:"number",subject:"value"},
		{"id" : "v1|*v2","title" : {"EN" : "v2"},subject:"flag"}	,{"id" : "v3","title" : {"EN" : "v3"}},{"id" : "v4","title" : {"EN" : "v4"}},{"id" : "v5","title" : {"EN" : "v5"}}
		]
		}
		},
  
  "data" : [
  ["4","Algeria","5312","Area_harvested","366","Artichokes","2006","Ha","1713.00","","","003","1","007",""],
  ["4","Algeria","5312","Area_harvested","366","Artichokes","2007","Ha","1813.00","","","003","1","007",""]]};

var config={
series :["country_EN","element_EN","item_EN"],
 x :["year"],
aggregations:["item_EN"],
y:["value"],
aggregationFn:{value:"sum"},
formatter:"localstring",
model:FX,
el:"#result",
type:"line"
}


   this.chart = new ChartCreator(config);

will create a line chart in the container with the ID=result with country label, element label in row and the year in columns, group by the item: the aggregation function used will be the sum for the columns "value"

#update the update function allow the user to modify the config file and refresh the chart : model,el have don't need to be provided. example :

this.chart.update({type:"area"})