Pivot charts options

Hello!
I ask your help with some configuration of pivot chart.

first.
How can i add labels with value for every bar in chart? if i use label:"#field#", i get a error “undefined”. I loading data from php file like “url: ‘…/data.php’”. If i use label: “sum”, then i get next problem http://joxi.ru/5md00G7SvaYlgm

second.
One of my row, which i load in pivot chart - is a date. when i set this field to “group by”, webix start sorting bars like field is a string. Like ‘01.2014 01.2015 02.2014 02.2015’ etc. http://joxi.ru/bmokkBWUM7w8nm
How can i set sort rule for bars in my chart?

third.
How can i set radius options for bar pivot chart like simple chart, where using option like raduis: 5 for nice view?

Thanks a lot for answer!

Hello,

  1. You can use the following to show a value as a bar label:
view:"pivot-chart",
chart: {
	label: function(data){
		return this.value?this.value(data):"";
	}
}
  1. You can try to load timestamp instead of formatted value. And set template of xAxis:
var dateFormat = webix.Date.dateToStr("%m.%Y");
webix.ui({
    view:"pivot-chart",
    chart: {
	label: function(data){
		return this.value(data);
	},
        xAxis: function(data){
              if(pivot.config.structure.filterBy == "date")
                     return dateFormat(data.id);
              return data.id;
         }
    } 
});
  1. the radius can be set via chartMap:
chartMap:{
	bar: function(color){
		return {
			border:0,
			alpha:1,
			radius:5,
			color: color
		};
	}
},

However, radius will affect radar chart. Therefore, in this case you need to delete radar chart from the charts list:

webix.ui({
    id: "pivot",
    ....
});
delete $$("pivot").chartMap.radar;

Maria, thx a lot for answer. You helped me easy solve two of three problem.
But i am still trying to use you answer for second question about date format.

Simple insert your code with simple changes doesnt work for me.

First of all, i doubt about row pivot.config.structure.filterBy == “date” because in my structure row with data in a group by setting. Maybe i should use pivot.config.structure.groupBy == “date”?

Second question - in row
pivot.config.structure.groupBy == “date”
instead of “date” i should use name of field with date?

Third question. in part
return dateFormat(data.id);
return data.id;
what should i set instead of “id”? or nothing must be changed?

Here is my code, maybe it may help

webix.ready(function(){
					var dateFormat = webix.Date.dateToStr("%m.%Y");
					webix.ui({
						container:"chart_div1",
						id:"pivot",
						view:"pivot-chart",
						filterWidth: 1800,
						height:420,
						width:1150,
						structure:{
							groupBy: "dat",
							values: [{name:"coun",                    operation:"sum",color:"#66ccff"}],
							filters:[{name:"year", type:"select"},{name:"place_name", type:"select"}]
						},
						chart: {
							type:"bar",
							label: function(data){
								return this.value?this.value(data):"";
							},
							 xAxis: function(data){
								  if(pivot.config.structure.groupBy == "dat")
										 return dateFormat(data.id);
								  return data.id;
							},
							barWidth:35,
                            gradient:"falling",
							padding: {bottom: 65, left: 90},
							legend: {
								layout: "x",
								align: "center",
								valign: "bottom"
							}
						},
						chartMap:{
							bar: function(color){
								return {
									border:0,
									alpha:0.9,
									gradient:"falling",
									radius:5,
									color: color
								};
							}
						},
						fieldMap:{ "coun" : "Кол-во закупок", "year" : "Год", "place_name" : "ЭТП", "value": "Объем закупок", "dat":"Месяц" },
						url: "../php/table_data9.php"+"?inn="+a1+"&kpp="+a2,
					});
					delete $$("pivot").chartMap.radar;
				});

Hello,

doubt about row pivot.config.structure.filterBy == “date”

Yes, you are correct. There should be groupBy

in row pivot.config.structure.groupBy == “date” instead of “date” i should use name of field with date?

Yes, “date” was an example.

in part return dateFormat(data.id); return data.id; what should i set instead of “id”?

Pivot sets ids as values of the field from “groupBy”. And yes, new Date(data.id) would be more correct:

dateFormat(new Date(data.id));

Hello, Maria.

I try to use your advice, but it still doesnt work. i try to write everything else in xAxis :{} , but it hasnt effect. Looks like a problem in syntax of xAxis. I read some documents of webix and find next rules for configuring chart:
somewhere using xAxis: {template:…} for format values. Maybe i need something like this?

Here is my last code with last edits after your message.

Hope, that you help me. Thx a lot!

webix.ready(function(){
					var dateFormat = webix.Date.dateToStr("%m.%Y");
					webix.ui({
						container:"chart_div1",
						id:"pivot",
						view:"pivot-chart",
						filterWidth: 1800,
						height:420,
						width:1150,
						structure:{
							groupBy: "dat",
							values: [{name:"coun", operation:"sum",color:"#66ccff"}],
							filters:[{name:"year", type:"select"},{name:"place_name", type:"select"}]
						},
						chart: {
							type:"bar",
							label: function(data){
								return this.value?this.value(data):"";
							},
							barWidth:35,
                            gradient:"falling",
							padding: {bottom: 65, left: 90},
							legend: {
								layout: "x",
								align: "center",
								valign: "bottom"
							},
						},
						xAxis: function(data)
						{ 
						if(pivot.config.structure.groupBy == "dat") 
							return dateFormat(new Date(data.id)); 
						return data.id;
						},
						chartMap:{
							bar: function(color){
								return {
									border:0,
									alpha:0.9,
									gradient:"falling",
									radius:5,
									color: color
								};
							}
						},
						fieldMap:{ "coun" : "Кол-во закупок", "year" : "Год", "place_name" : "ЭТП", "value": "Объем закупок (млн. руб.)", "dat":"Месяц"},
						url: "../php/table_data9.php"+"?inn="+a1+"&kpp="+a2
					});
					delete $$("pivot").chartMap.radar;

				});

here is my chart view http://joxi.ru/V2VaaGBc0GqYbm

Hello,

yes, xAxis definition works for Chart widget, but does not fit pivotchart. PivotChart does not allow to change ‘template’ of xAxis. Sorry for the misleading information.

We will include the solution for custom template into the next update (it will be ready within a month).

Thx a lot, Maria, for answer. I ll be waiting next update!