Binding pattern to the points from the datasource

[anugna]

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]

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 id="circlePattern" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse"> 

            <circle cx="10" cy="10" r="10" style="stroke: none; fill: #0000ff" /> 

        </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]

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]

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]

Thank you so much Durga. 

This helped me partially achieve what I am looking for.

[Dharanidharan Dharmasivam]

Hi Anugna, 

Thanks for the update. 

Kindly revert us, if you need any further assistance. 

Thanks, 

Dharani.