India Map

[steep plover]

Hello i want to create india map with scatter or heatmap kind of chart like i want to show the frequency of values

[cloud oyster]

Hello! I'm AppySmith, your support bot, here to help you with Appsmith. To
create a map visualization of India with scatter or heatmap overlays, you can
use Appsmith's chart widget with custom configurations. Here's a high-level
approach to create a map with a heatmap: 1. Use the Chart Widget. 2. Choose the
'Custom Chart' type. 3. Configure the chart with the appropriate library that
supports geo-heatmaps (like Chart.js, ApexCharts, etc.). 4. Prepare your data
set with longitude and latitude coordinates for places in India, along with
frequency values. 5. Define the options and series for the chart library to
create the heatmap overlay. You might need to pull data from a database or an
API and then bind this data to the chart. If you need help with specific steps
or encounter any issues, let me know and I'll assist you further! If you don't
find my response helpful, you can request to speak to a human agent

[steep plover]

there is no custom chart available in appsmith there is only custom echarts

[cloud oyster]

Apologies for the confusion. You are correct; Appsmith provides the ability to
create custom visualizations with ECharts. Here's how you can create a scatter
or heatmap chart to visualize data on an India map: 1. Add the Chart widget to
your canvas. 2. Select 'Custom Chart' within the Chart widget options. 3. Choose
'map' as the chart type in the ECharts configuration. 4. Obtain geographical
data (GeoJSON) for India if you're creating a map. 5. Prepare your data with
coordinates (longitude, latitude) and frequency values for the heatmap or
scatter data points. 6. Configure the ECharts options to use the geographic data
and your data points. The eCharts option would be a JSON configuration where you
define the specifics of how the map and data points should be visualized. If you
have a dataset ready, I can help you with more detailed steps, such as how to
set the data and options in the Chart's properties panel. Can you provide the
dataset or let me know if you need help with a different aspect of creating the
chart? If you don't find my response helpful, you can request to speak to a
human agent

[steep plover]

i will speak to human agent

[cloud oyster]

Someone from our team will reach out to you on this thread. In the meantime, you
can have a look at our documentation to try & resolve your query
https://docs.appsmith.com?utm=bot

[cloud oyster]

Hello! I'm Amelia with Appsmith Support. 👋
You can use custom ECharts to display the data:
https://docs.appsmith.com/reference/widgets/chart#custom-echart-configuration
Unfortunately, we don’t have an example for a similar use case, but the official
EChart documentation should help:
https://echarts.apache.org/handbook/en/get-started/
[https://echarts.apache.org/handbook/en/get-started/]

[steep plover]

but there is a mapchart widget cant we do there?

[cloud oyster]

This is not possible on Appsmith at this juncture. But we have this feature
request: https://github.com/appsmithorg/appsmith/issues/11050. Please add a
comment with your use case to help us prioritize it.

Thank you for your continuous support and patience. You can track the GitHub
issue that addresses the matter further. Our development team will be taking
over from here.

We value your feedback and would appreciate hearing about your experience with
our support team.
https://survey.frontapp.com/v2/09a400bf433bc9676d67/2017d5bfec378141c831a1585e8f6572
[https://survey.frontapp.com/v2/09a400bf433bc9676d67/2017d5bfec378141c831a1585e8f6572]

[steep plover]

is it possible through apache echarts>

[cloud oyster]

I have checked, and the Chart widget does not support the custom map since it is
not possible to register the custom SVG. We have a feature request for this as
well: https://github.com/appsmithorg/appsmith/issues/29448.
Please add a comment with your use case to help us prioritize it.
At this juncture, I think the only way to achieve it would be to create a custom
widget tailored to your specific requirements:
https://docs.appsmith.com/build-apps/how-to-guides/Create-Custom-Widgets-Using-Iframe
[https://docs.appsmith.com/build-apps/how-to-guides/Create-Custom-Widgets-Using-Iframe]

[steep plover]

this is the code from apache echarts for the geo map , i need to convert this to appsmith jsobject can you please help me with this

[karmic lodge]

@steep plover , this video goes in-depth on how to convert an echart option to a JSObject.
https://youtu.be/EOlu5Rmf9oU?t=480

Also, there's an interactive guide here that shows the basic steps:
https://docs.appsmith.com/build-apps/how-to-guides/create-custom-charts

[steep plover]

ok thank you joseph

[steep plover]

but accessing the geojson is still hard

can you please help me with how to return the json type and how to display the chart in appsmith , i verified ur class but no where u took this kind of problem

https://echarts.apache.org/examples/en/editor.html?c=map-usa
this is the link for the map please have a look and just give idea to plot this map

[karmic lodge]

Do you have the geojson for the India map you want to use? Do you have a query/API with data point that you want to display on each state? What is your end goal? Can you show a mockup?

[steep plover]

i have the geojson

i will send you the link
https://raw.githubusercontent.com/mahesh199827/indiajson/main/india_state_geo.json

with this url we can access the json file

i dont have api query i have sql query i will bind the data when i know its working

the only concern is to plot that geomap in appsmith and how to give the data , as of now u can hard code the input , then i will try to make it dynamic

my end goal is to show tootl tip with the city and its respective value with heat or scatter kind of map

[karmic lodge]

I got it working in the echarts website. The geojson file is massive though, and it's throwing an error when I try to fetch it in appsmith. Checking with the team...

[steep plover]

yeah in eacharts i am able to do it , i am trying with appsmith , and stuck

please check and do the needful

[karmic lodge]

@steep plover , the geojson you are trying to use is 23MB. This is hitting some limit in the browser, so it won't work with our echart widget. I found a much smaller geojson file for india that should work. It just has lower resolution on the shape of each state. This one is only 2MB.
https://github.com/datta07/INDIAN-SHAPEFILES/blob/master/INDIA/INDIA_STATES.geojson

If you want to use the larger geojson, it should work in a custom widget, using echarts the way you would in a regular webapp.

[steep plover]

ok i will use this

but how to access the coordinates in appsmith

like we are giving "name" in data and specifying the 'statename' , how to give it here in appsmith

[steep plover]

export default {
showLoading: true,
async requestData() {
try {
const response = await fetch('https://raw.githubusercontent.com/mahesh199827/indiajson/main/INDIA_STATES.geojson');
if (!response.ok) {
throw new Error('Failed to fetch data');
}
const indiaJson = await response.json();

        // Register India map data
        echarts.registerMap('India', indiaJson);

        return indiaJson;
    } catch (error) {
        console.error(error);
        throw new Error('Failed to load india_state_geo.json');
    }
},

options: {
title: {
text: 'India State Geo Data',
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{b}'
},
series: [
{
type: 'map',
map: 'India',
roam: true,
label: {
show: true,
formatter: '{b}',
fontSize: 10,
color: 'black'
},
data: [
{name:'Karnataka',value:1233}
]
}
]
}
}

how to access the fields in json file , for suppose in apache echarts when i gave my value in data field it is fetching the coordinates and creating heatmap, but in appsmith i dont have idea , can you please guide me on this

now i am using 2.2mb file

[cloud oyster]

@karmic lodge

[karmic lodge]

@steep plover , try this:

import * as $ from 'https://cdn.jsdelivr.net/npm/[email protected]/+esm'

appsmith.onReady(() => {
    var app = {};

var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom, null, {
  renderer: 'svg'
});
var option;
    
myChart.showLoading();
$.default.get(
  'https://raw.githubusercontent.com/mahesh199827/indiajson/main/INDIA_STATES.geojson',
  function (indiaData) {
    myChart.hideLoading();
        //console.log(indiaData)
        echarts.registerMap('India', indiaData);
    option = {
    title: {
        text: 'India State Geo Data',
            left: 'center'
    },
        tooltip: {
            trigger: 'item',
                formatter: '{b}'
        },
            series: [
                {
                    type: 'map',
                    map: 'India',
                    roam: true,
                    label: {
                        show: true,
                        formatter: '{b}',
                        fontSize: 10,
                        color: 'black'
                    },
                    data: [
                        {name:'Karnataka',value:1233}
                    ]
                }
            ]

};
    myChart.setOption(option);
  }
);

option && myChart.setOption(option);
    console.log(option)
});

and this for the HTML

<script src="
https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js
"></script>
<div id="main"></div>

[steep plover]

tried getting blank page joseph

[steep plover]

bundle.237383e….js:2 SyntaxError: 'import' and 'export' may appear only with 'sourceType: module' (1:0) (at acorn.mjs:3554:13)
at ce.raise (acorn.mjs:3554:13)
at J.parseStatement (acorn.mjs:936:16)
at J.parseTopLevel (acorn.mjs:819:21)
at V.parse (acorn.mjs:591:15)
at V.parse (acorn.mjs:641:35)
at Ye (acorn.mjs:5943:17)
at e.value (index.ts:26:27)
at n.updateScriptForPeekOverlay (index.tsx:800:46)
at n.handleMouseOver (index.tsx:824:28)
at HTMLDivElement.<anonymous> (index.tsx:713:18)
at g (debounce.js:95:19)
at _ (debounce.js:144:14)
at T (debounce.js:132:14)
at i (helpers.ts:87:17)
at i.<computed> (zone.js:2405:41)
at e.value (zone.js:406:31)
at t.value (zone.js:178:47)
at t.<anonymous> (instrumentation.ts:522:27)
at value (zone.js:487:34)
at a.useG.invoke (zone.js:476:48)
at r.args.<computed> (zone.js:2385:32)
at nrWrapper (newRelicBrowserAgent1.js:14:15719)
in console getting this error

[karmic lodge]

@steep plover this was a tough one, but I got it working with some help from @brazen shale ! Here ya go!
https://community.appsmith.com/template/india-map-custom-widget

[cloud oyster]

Thank you for your ongoing support and patience. We aim to provide you with
helpful assistance and hope we have addressed your question adequately.

Please take a moment to provide feedback on our service.
https://survey.frontapp.com/v2/09a400bf433bc9676d67/3265485d283e0511075b36d6fbbe462c