Binding pattern to the points from the datasource

Question

Hello,

I am aware that we can bind fill color to the series points from the datasource.

Can we also bind patterns to the points from datasource like how we can see patterns on selection of series or points?

Thanks,

Anugna

Dharanidharan Dharmasivam · Answer

Hi Anugna,

Thanks for using our products.

We have analyzed your query. As of now predefined patterns used for selection and highlight features can’t be used to fill the points of the series.

However your requirement can be achieved as workaround by using the custom patterns and specify those patterns in the data source. Here you can able to map those patterns using the pointColorMappingName property of series. Kindly find the code snippet below to achieve this scenario.

JS:

//Specify the custom pattern

<svg>

</pattern>

//...

</svg>

var chartData = [

{ x: "China", y: 17, pattern1: "url(#circlePattern)" },

//...

];

$("#container").ejChart({

series:

[

{

dataSource: chartData,

pointColorMappingName: "pattern1",

xName: "x", yName: "y"

}

],

});

In the above code, we have three points with different patterns for each point. You can change this with respect to your requirement.

Screenshot:

Sample for reference can be find from below link

http://jsplayground.syncfusion.com/lkejpz5c

Kindly revert us, if you have any concerns.

Thanks,

Dharani.

anugna · Answer

Thank You.This gives me the patterns with a predefined color. But, I am actually filling up the colors to my points dynamically from a database using the 'pointColorMappingName' attribute. Using the custom patterns is limiting my ability to dynamically fill the point colors. I am looking at getting a pattern with certain predefined color which is defined in the database. I have a large number of points with varied color palettes defined. Can you suggest of anyway on how this can be achieved.

Durga Gopalakrishnan · Answer

Hi Anugna, 
 
We have analysed your query. As of now, support for dynamically applying point color to the custom pattern is not provided. But this requirement can be achieved through a workaround. Using load event, you can assign the fill color from datasource to the predefined patterns. Please find the code snippet below: 
 





var chartData = [ 
           { x: "China", y: 17, y2: 24, pattern1: "url(#circlePattern)", fill: '#0000ff' }, 
           { x: "US", y: 19, y2: 32, pattern1: "url(#innerPattern)", fill: '#bec00f' }, 
           { x: "India", y: 29, y2: 18, pattern1: "url(#pattern)", fill: '#ff0056' },         
]; 
  
load : function(args){ 
       for (var  i =0;i< chartData.length;i++){ 
           var pattern = chartData[i].pattern1; 
           var element = document.getElementById(pattern.slice(pattern.indexOf("#") + 1, pattern.length-1)); 
           element.setAttribute('fill', chartData[i].fill); 
         } 
      }  
 
Sample link: http://jsplayground.syncfusion.com/oyg1bdkc 
 
Please let me know, if you have any queries. 
 
Regards, 
Durga

anugna · Answer

Thank you so much Durga. This helped me partially achieve what I am looking for.

Dharanidharan Dharmasivam · Answer

Hi Anugna, 

Thanks for the update. 

Kindly revert us, if you need any further assistance. 

Thanks, 
Dharani.