Color countries based on array of items

[BetoDev]

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

[Akash Biswas]

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.

[BetoDev]

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

[Akash Biswas]

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.

[BetoDev]

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. 

[BetoDev]

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');}" +
   "}" +
"}";

[Akash Biswas]

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.

[BetoDev]

Thanks for the reply. There is a possibility if only display a modal only for those countries with value and not for countries with no values?. 

Because that events are for the entire map, and i just want only to countries with values.

 

Thanks in advance

[Akash Biswas]

Hi,

 

To display a modal only for those countries with value and not for countries with no values, you can keep a check(using an if construct) within the "entityClick" event handler function. The if construct will check whether the clicked entity has a null value or not. Refer to the below sample implementing this technique :

https://codepen.io/Akash008/pen/QWwoWmE?__cf_chl_jschl_tk__=477828519e34255e7bcea4185e194d9de5d38f50-1592547764-0-AWzWLBLrFYQR8kqDx34OeazyIpye0_KTF55jz70dLOOhqMEm5MD3rqSuxCVp7n_qnk53HU4UIa6hRYTjPqvu-aQD2tkea9Ze70xX-FT4q7TcT_xLmNEcVrNd4a584MEPxiz8MF8MdgAMVgLFbB47dYMufrhKOLH5FWKxlCJmr2q9N-7StkC8ft6iObeEAtTrSpGt9mxA7YdYA1uRn6i1q_tQ6XlLqs_AJwKSASdfe8gSk-UAPGhEEcaAK6wHACnU8qDvzvz5X8MsuY4FGZSMWFCJHDW5tV5DftITlX5GvXgHMSoWK9P1iRRq09_2OprbnA4KJ7IehsaOXcsztbh0xwe2OhHZePBFPUOQFa_7mBu8

 

Thanks,

Akash.