jQuery UI Widgets Forums Chart Adding custom data to legend

This topic contains 13 replies, has 3 voices, and was last updated by  kir_rik 9 years, 4 months ago.

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
  • Adding custom data to legend #68614

    kir_rik
    Participant

    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?

    Adding custom data to legend #68627

    yoda
    Participant

    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’.

    Adding custom data to legend #68628

    Peter Stoev
    Keymaster

    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/

    Adding custom data to legend #68671

    kir_rik
    Participant

    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.

    • This reply was modified 9 years, 4 months ago by  kir_rik.
    Adding custom data to legend #68677

    Peter Stoev
    Keymaster

    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/

    Adding custom data to legend #68679

    kir_rik
    Participant

    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.

    Adding custom data to legend #68680

    Peter Stoev
    Keymaster

    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/

    Adding custom data to legend #68685

    kir_rik
    Participant

    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.

    Adding custom data to legend #68687

    Peter Stoev
    Keymaster

    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/

    Adding custom data to legend #68696

    kir_rik
    Participant

    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;
        },
    • This reply was modified 9 years, 4 months ago by  kir_rik.
    Adding custom data to legend #68698

    Peter Stoev
    Keymaster

    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/

    Adding custom data to legend #68702

    kir_rik
    Participant

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

    Adding custom data to legend #68704

    Peter Stoev
    Keymaster

    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/

    Adding custom data to legend #68707

    kir_rik
    Participant

    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>
Viewing 14 posts - 1 through 14 (of 14 total)

You must be logged in to reply to this topic.