Adding custom data to legend

[kir_rikParticipant]

How can I add some data to my legend?
For example: I have PieChart with 3 section, that show next data: {a:5,b:10, c:15}.
By default my legend with proper layouts will be
“a
b
c”.
But I need:
Some text 30 Some text //5+10+15==30
a [5]
b [10]
c [15]

But I haven’t this data in formatFunction.
Best I could is

formatFunction: function (value, itemIndex, serie, group) {
     if (itemIndex==0)
         return "Generated string with [30]<br/>" + value;//<br/> actually didn't work here
     return value;
}

So there is 2 specific questions:
1)How can I add dinamic string in the legend?
2)How can I get value of serie with it’s name?

[yodaParticipant]

You can use the legendFormatFunction as noted in the docs:

$(document).ready(function () {
	/* input data */
	var data = [
	{Browser: 'Internet Explorer', Share: '24.6'},
	{Browser: 'Firefox', Share: '18'},
	{Browser: 'Chrome', Share: '49.7'},
	{Browser: 'Safari', Share: '4.7'},
	{Browser: 'Opera', Share: '1.5'},
	{Browser: 'Others', Share: '1.6'}];
	
	/* data adapter settings */
	var dataAdapter = new $.jqx.dataAdapter({
		localdata: data,
		datafields: [
			{name: "Browser", type: "string"},
			{name: "Share", type: "number"}
		]
	});

	/* chart settings */
	var chartSettings = {
		source: dataAdapter,
		title: "Desktop browsers market share",
		description: "",
		legendLayout: {
			left: 10,
			top: 80,
			width: 150,
			height: 200,
			flow: "vertical"
		},
		padding: {
			left: 5,
			top: 5,
			right: 5,
			bottom: 5
		},
		titlePadding: {
			left: 5,
			top: 5,
			right: 5,
			bottom: 5
		},
		enableAnimations: false,
		xAxis: {
			dataField: "Browser",
			valuesOnTicks: true
		},
		valueAxis: {
			valuesOnTicks: true
		},
		seriesGroups: [			
			{
				type: "pie",
				series: [					
					{
						dataField: "Share",
						displayText: "Browser",
						labels: {
							visible: true,
							radius: 90
						},
						formatSettings: {
							sufix: "%"
						},
						legendFormatFunction: function(value, itemIndex, serie, group) {
                            return 'item ' + itemIndex + ': '+ value;
						}
					}
				]
			}
		]
	}
	
	/* create chart in the container element */
	$('#chartContainer').jqxChart(chartSettings);
});

Inside the function you have all the paramters that are needed to provide a dynamic string. You can even reference the data in your data source like this:

data[itemIndex][‘propertyName’] where property name is the name of the field you need to access, e.g. in this sample ‘Browser’ or ‘Share’.

[Peter StoevKeymaster]

Hi kir_rik,

Here’s a sample with Legend Formatting: http://jsfiddle.net/jqwidgets/2rLvasyu/

Hope it helps you.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[kir_rikParticipant]

Thanks, you helped a lot. But I still don’t get how can I add string before all elements of legend:

Some text Some text//How add this string?
a [5]
b [10]
c [15]

If I just write something like this:

legendFormatFunction: function(value, itemIndex, serie, group) {
	var result="";
	if (itemIndex==0) result+="Some text Some text<br>";
	result +=  value + ' [+' + sampleData1[itemIndex]['Share']  + ']';
	return result;
}

I just get some problems with element collision: The first element intersects with the second. Anyway I don’t think it’s proper solution.

Another question: can I somehow get the source inside legendFormatFunction? Because I want write source[itemIndex][‘propertyName’] inside and when I create settings variable, I don’t know to which chart it will be applied.

[Peter StoevKeymaster]

Hi kir_rik.

The sample I sent you shows how to add strings to Legends.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[kir_rikParticipant]

Thank you for this sample. It’s helpful. But it’s not explain how to add title to the legend and how to use source inside settings.

[Peter StoevKeymaster]

Hi kir_rik.

It shows how to add Custom Text in the Legend. Ok, additional sample – http://jsfiddle.net/jqwidgets/qmfuwyuL/

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[kir_rikParticipant]

This
return value + "<br>" + dataAdapter.records[index].Share;
uses variable dataAdapter instead of ‘source’ property. It will not work if I use one settings variable to draw many similar chart by changing source property.

Anyway thanks for help. I’ll think of something. Sorry, if it was annoying.

[Peter StoevKeymaster]

Hi kir_rik.

The dataAdapter is the Chart’s data source if you look at the example.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[kir_rikParticipant]

Yes, and it works, obvious.
But the following scenario shows why it is not a good solution:

var settings = {
    //a lot of settings 
    legendFormatFunction: function (value, index) {
         return value + "<br>" + dataAdapter1.records[index].Share;
    },
   //a lot of settings 
}

settings.source = dataAdapter1;
$('#chartContainer1').jqxChart(settings);

settings.source = dataAdapter2;
$('#chartContainer1').jqxChart(settings);

settings.source = dataAdapter3;
$('#chartContainer1').jqxChart(settings);

This is why asked how to use settings’ property ‘source’ instead of variable that was set to this property.
Yes, of course I can just copy-past 50 lines of settings description 3 times. Or 10 times if I will need 10 charts. But it’s not looking good. So I looking for something like

    legendFormatFunction: function (value, index) {
         return value + "<br>" + this.source.records[index].Share;
    },

[Peter StoevKeymaster]

Hi kir_rik,

settings.source === dataAdapter. However, you can’t use this.source because “this” is in the context of your function.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[kir_rikParticipant]

So, it is no way to get access to property ‘source’ inside legendFormatFunction?

[Peter StoevKeymaster]

Hi kir_rik,

I suppose you’re new to JavaScript. Of course there is way. Same sample: http://jsfiddle.net/jqwidgets/u5kevxLr/ – this time using the source of the settings. Note that there is no “this”.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[kir_rikParticipant]

Yes, your assumption is correct. As your sample. It helped me. Thank you for the time spent helping me.
For case anyone will need, there the final code

<html lang="en">
<head>
    <title id='Description'>Titile</title>
	
    <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
	<script type="text/javascript" src="scripts/jquery-1.11.2.min.js"></script>
	<script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
	<script type="text/javascript" src="jqwidgets/jqxchart.core.js"></script>
	<script type="text/javascript" src="jqwidgets/jqxchart.annotations.js"></script>
	<script type="text/javascript" src="jqwidgets/jqxdraw.js"></script>
	<script type="text/javascript" src="jqwidgets/jqxdata.js"></script>

	<script type="text/javascript">

		//All $(document).ready stuff here
		$(document).ready(function () {
			CreateCharts();
		});

	</script>

    <script type="text/javascript">   
		
		function getChartDataAdapter(source){
			return  new $.jqx.dataAdapter(source, {
							async: false,
							autoBind: true,
							loadError: function (xhr, status, error) {
								alert('Error loading "' + source.url + '" : ' + error);
							}
						});
		}
		
		function CreateCharts(){
			var sampleData1 = [
                    { Title:'a', Count: 7037},
                    { Title:'b', Count: 41071},
                    { Title:'c', Count: 6037},
                ];
				
			var sampleData2 = [
                    { Title:'a', Count: 5232},
					{ Title:'b', Count: 39379},
                    { Title:'c', Count: 7232},
                    
                ];
				
			var sampleData3 = [
                    { Title:'a', Count: 3523},
					{ Title:'b', Count: 29020},
                    { Title:'c', Count: 1523},
                ];
				
			var source = {
				datatype: "array",
				datafields: [{
					name: 'Title'
				}, {
					name: 'Count'
				}]
			};
				
            // prepare jqxChart settings
            var settings = {
                description: '',
                padding: { left: 5, top: 5, right: 50, bottom: 150 },
				legendLayout: { left: 100, top: 350, width: 300, height: 200, flow: 'vertical' },

                colorScheme: 'scheme01',
				seriesGroups:
					[
						{
							type: 'pie',
							showLabels: true,
							series:
								[
									{ 
										dataField: 'Count',
										displayText: 'Title',
										labelRadius: 100,
										radius: 130,
										centerOffset: 5,
										legendFormatFunction: function (value, index) {
											return value + ' [+' + settings.source.records[index].Count+']';
										},
									}
								]
						}
					]
            };
			
            // select the chartContainer DIV element and render the chart.
			settings.title = 'title1';
			settings.source = getChartDataAdapter(sampleData1);
            $('#chartContainer1').jqxChart(settings);
			
			settings.title = 'title2'
			settings.source = getChartDataAdapter(sampleData2);
			$('#chartContainer2').jqxChart(settings);
			
			settings.title = 'title3'
			settings.source = getChartDataAdapter(sampleData3);
			$('#chartContainer3').jqxChart(settings);
		}
	
		function CreateGrids(){
		
		}
	</script>
</head>
<body style="background:white;">

	<div id=Label>
	</div>
	
	<div id='Charts'>
	    <div id='chartContainer1' style="width: 450px; height: 450px; float: left;">
		</div>
		
		<div id='chartContainer2' style="width: 450px; height: 450px; float: left;">
		</div>
		
		<div id='chartContainer3' style="width: 450px; height: 450px; float: left; ">
		</div>
	</div>

</body>
</html>

[Author]

Posts