VivekChaurasia

Map is not rendering on mobile device

Recommended Posts

Map is properly getting rendered properly on my laptop but when I am trying to open in on my mobile it is not displaying and showing me error Chart type not supported.

You may test it on vivekcharuasia.com

Please help

Code:

<?php                          
                  // Widget appearance configuration
                  $arrMapConfig = array(
                    "chart" => array(
                      "includevalueinlabels" => "1",
                      "labelsepchar" => ": ",
                      "entityFillHoverColor" => "#FFF9C4",
                      "theme" => "fusion",
                      "containerBackgroundOpacity" => '0',
                      "bgcolor" => "#191c25",
                      "canvasBgAlpha" => "0",
                    )
                  );

                  // Widget color range data
                  $colorDataObj = array("minvalue" => "0", "code" => "#293038", "gradient" => "0", 
                  "color" => array(
                      ["minvalue"=> "0", "maxvalue"=> "1000", "code"=> "#00FF00"],
                      ["minvalue"=> "1000", "maxvalue"=> "30000", "code"=> "#FFFF00"],
                      ["minvalue"=> "30000","maxvalue"=> "150000", "code"=> "#FFA500"],
                      ["minvalue"=> "150000","maxvalue"=> "350000", "code"=> "#FF0000"]
                  ));

                  // Map data array
                  $mapArrayData=json_decode($content,true);
                  if ($mapArrayData === NULL) die('Error parsing json');
                  
                  $mapData = array();
                  foreach ($mapArrayData as $key => $val) {
                      $c=0;
                      foreach($val['districtData'] as $value => $v) {								
                          $c = $c + $v['confirmed'];
                      }
                      $code=$val['statecode']; 
                      $str=getStateID($code);
                      array_push($mapData,array("id" => $str, "value" => $c, "lable" => $key, "link" => "n-state.php?id=$code"));
                  }
                  $arrMapConfig["data"] = $mapData;
                  $arrMapConfig["colorRange"] = $colorDataObj;
                  
                  //print_r($arrMapConfig);
                  // JSON Encode the data to retrieve the string containing the JSON representation of the data in the array.
                  $jsonEncodedData = json_encode($arrMapConfig);
                                  
                  // Map object
                  $Map = new FusionCharts("maps/india", "Covid-19 India Map" , "100%", "450", "map-container", "json", $jsonEncodedData);

                  // Render the Map
                  $Map->render(); ?>
                  <!--<div id="audience-map" class="vector-map"></div>-->
                  <div id="map-container">Map will render here!</div>

 

Share this post


Link to post
Share on other sites

Hi,

To render India map you need to include following javascript library files of FusionCharts, in the following order:
 

  • fusioncharts.js
  • fusioncharts.maps.js
  • fusioncharts.india.js

Thanks,
Ayan

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