BetoDev

Color countries based on array of items

Recommended Posts

I'm trying to color countries based on arrray of items, but the only solution i've seen is only color countries with ONE VALUE. I want to color  countries if has for example 3 items, that could be numbers, or names (string).

So far i can not implement this, i don't know  if this is possible.

Example: India has 2 values, (Name1, Name2) and i want to color that country because has at least 1 item.

All of this is in ASP.NET C#

My code below:

var chart1 = "{" +
        "'chart':{" +
            "'showlegend':'0'," +
            "'caption':'Clientes por ejecutivo en el mundo'," +
            "'nullentityfillcolor':'#43ccfe'," +
            "'showmarkerlabels':'0'," +
            "'showentityhovereffect':'1'," +
            "'theme':'fusion'" +
        "}," +
        "'colorrange': {" +
        " 'minItems': '1'," +
        "'code': '#004d80'"+
         "}," +
 
            "'data':[" +
         "{" +
            "'id':'05'," +
            "'value': ['1','2','3']" +
         "}," +
        "{" +
            "'id':'101'," +
            "'value': [3]" +
         "}," +
         "{" +
            "'id':'16'," +
         "}," +
         "{" +
            "'id':'27'," +
            "'value': '8'" +
         "}," +
         "]" +
       
"}";

I hope you can help me :)

Share this post


Link to post
Share on other sites

Hi,

 

The maps of FusionMaps supports the "value" attribute of the data objects, that accepts string value and only a single one. It does not accepts array of values for the respective entity IDs provided. Hence, it is not possible to set the colorRange object based on the array of values provided to the "value" attribute in the data objects. Instead the colorRange object defines the color of the entity based on its value(single value) provided to the "value" attribute.

For further reference to colorRange, please check the below documentation link :

https://www.fusioncharts.com/dev/common-use-cases/color-range-usecases

 

 Thanks,

Akash.

Share this post


Link to post
Share on other sites
3 hours ago, Akash Biswas said:

Hi,

 

The maps of FusionMaps supports the "value" attribute of the data objects, that accepts string value and only a single one. It does not accepts array of values for the respective entity IDs provided. Hence, it is not possible to set the colorRange object based on the array of values provided to the "value" attribute in the data objects. Instead the colorRange object defines the color of the entity based on its value(single value) provided to the "value" attribute.

For further reference to colorRange, please check the below documentation link :

https://www.fusioncharts.com/dev/common-use-cases/color-range-usecases

 

 Thanks,

Akash.

Ok i understand, the other posibility is set a value for the number of clients per employees(executive). For example if i want to color Mexico and India, maybe Mexico will have 5 clients, and India 10 clients.

 

The other thing i would want to do is, when click one of these countries i want to display maybe in a tooltext, or modal which clients they have. How could i do this with that example that i provided?. Is it possible?

Thanks in advance :)

Share this post


Link to post
Share on other sites

Hi,

 

You can set the colorRange object based on the values you set for the data objects(entities). So, for example the value set to India is 10 and for Mexico is 5 within the data objects, then in the colorRange object you can set the minimum and maximum range accordingly with the color codes, which will be applied to the entities mapped to its values.

Also you can set custom tool text to individual data objects for the entities, which will be displayed on the tooltip box when hovered over the entities on the map. You need to set the "toolText" attribute with the string within each data objects, that you want to display when hovered over the map entities.

A modal pop up can also be shown when the entities are clicked by using the "entityClick" API event supported. However, the content of the modal need to be set as per your requirement accordingly.

 

Please find the below sample for reference to the above possible solutions :

https://codepen.io/Akash008/pen/QWwoWmE

 

Thanks,

Akash.

Share this post


Link to post
Share on other sites
6 hours ago, Akash Biswas said:

Hi,

 

You can set the colorRange object based on the values you set for the data objects(entities). So, for example the value set to India is 10 and for Mexico is 5 within the data objects, then in the colorRange object you can set the minimum and maximum range accordingly with the color codes, which will be applied to the entities mapped to its values.

Also you can set custom tool text to individual data objects for the entities, which will be displayed on the tooltip box when hovered over the entities on the map. You need to set the "toolText" attribute with the string within each data objects, that you want to display when hovered over the map entities.

A modal pop up can also be shown when the entities are clicked by using the "entityClick" API event supported. However, the content of the modal need to be set as per your requirement accordingly.

 

Please find the below sample for reference to the above possible solutions :

https://codepen.io/Akash008/pen/QWwoWmE

 

Thanks,

Akash.

There is a possibility to do that example in code behind in C#? or how could i combine this js with C#. I'm new doing this and i want some help. 

Share this post


Link to post
Share on other sites
7 hours ago, Akash Biswas said:

Hi,

 

You can set the colorRange object based on the values you set for the data objects(entities). So, for example the value set to India is 10 and for Mexico is 5 within the data objects, then in the colorRange object you can set the minimum and maximum range accordingly with the color codes, which will be applied to the entities mapped to its values.

Also you can set custom tool text to individual data objects for the entities, which will be displayed on the tooltip box when hovered over the entities on the map. You need to set the "toolText" attribute with the string within each data objects, that you want to display when hovered over the map entities.

A modal pop up can also be shown when the entities are clicked by using the "entityClick" API event supported. However, the content of the modal need to be set as per your requirement accordingly.

 

Please find the below sample for reference to the above possible solutions :

https://codepen.io/Akash008/pen/QWwoWmE

 

Thanks,

Akash.

There is a possibility to do that example in code behind in C#? or how could i combine this js with C#. I'm new doing this and i want some help. 

I'm trying to do this but is not working:

var chart1 = "{" +
        "'chart':{" +
            "'showlegend':'0'," +
            "'caption':'Clientes por ejecutivo en el mundo'," +
            "'nullentityfillcolor':'#43ccfe'," +
            "'showmarkerlabels':'0'," +
            "'showentityhovereffect':'1'," +
            "'theme':'fusion'" +
        "}," +
        "'colorrange': {" +
        " 'minItems': '1'," +
        "'code': '#004d80'"+
         "}," +
 
            "'data':[" +
         "{" +
            "'id':'05'," +
            "'value': ['1','2','3']" +
         "}," +
        "{" +
            "'id':'101'," +
            "'value': [3]" +
         "}," +
         "{" +
            "'id':'16'," +
         "}," +
         "{" +
            "'id':'27'," +
            "'value': '8'" +
         "}," +
         "]," + 
"'events':{" +
   "    'entityClick': function(e,data){alert('Hi');}" +
   "}" +
"}";

Share this post


Link to post
Share on other sites

Hi,

 

To render maps in a .NET environment you can use the FusionCharts .NET wrapper. Please refer to the below documentation link for the steps and instruction to render map using the wrapper :

https://www.fusioncharts.com/dev/getting-started/aspnet/your-first-map-using-aspnet

If you face any problem, you can check the showcased sample to render a map and its code for reference : https://www.fusioncharts.com/fusionmaps/examples/average-temperature-of-us-states

 

For the configuration of colorRange object please check the documentation link provided earlier along with the sample for reference.

 

Thanks,

Akash.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now