dmcadam Report post Posted April 22, 2015 Hello FusionCharts community! I am having a number of very simple problems with coding charts and maps with FusionCharts. I have followed all the steps for this tutorial to create a example map (http://docs.fusioncharts.com/tutorial-getting-started-your-first-charts-building-your-map.html) Then I painstakingly edited my .html file in TextEdit on a Mac to create a custom map similar to this JSFiddle map: http://jsfiddle.net/fusioncharts/sCwbV/ I currently have a .html file with the following code that works when I open it in Google Chrome: <html> <head> <title>Death & the Environment</title> <script type="text/javascript" src="fusioncharts/fusioncharts.js"></script> <script type="text/javascript" src="fusioncharts/themes/fusioncharts.theme.fint.js"></script> <script type="text/javascript"> FusionCharts.ready(function () { var salesMap = new FusionCharts({ "type": "maps/usa", "renderAt": "chartContainer", "width": "600", "height": "400", "dataFormat": "json", "dataSource": { "chart": { "caption": "Traditional Funeral", //“subcaption": "Highest & lowest state", "entityFillColor": "#cccccc", "entityFillHoverColor": "#666666", "theme": "fint" }, "data": [ { "id": "SD", "value": "920000", "color": "#e44a00", "alpha": "100", //“showLabel": "1", "fontBold": "1", //Using custom label to display //“displayValue": "Lowest sale.{br}$920K", //Using custom tooltip //“tooltext": "Lowest sale for last week. Indiana $dataValue" }, ] } }); salesMap.render(); }); </script> </head> <body> <div id="chartContainer">FusionMaps XT will load s map here!</div> </body> </html> My problem comes up when I try to change any basic feature of the code. For example, if I change the subcaption line to: “subcaption": "space occupied", or any other words beside the ones already in there, the map will not load when I try to open it. If I try to change the id line (for the state colored in) to: "id": "OK", it won't load in Google Chrome either. Instead, I get a blank page with "FusionMaps XT will load s map here!", the default text from my chart container. These seem to all be basic changes to my code/map, so I'm unsure what exactly I could be altering in the code that would stop it from working? Is something anyone else has run into? Should I try doing this work on a different machine or perhaps in a different text editing software? Help! Share this post Link to post Share on other sites
Moonmi Sonowal Report post Posted April 23, 2015 Hi, Welcome to FusionCharts forum posts. We are sharing with you a demo map sample in the drop box link below. Please download and test it at your end. Link: https://www.dropbox.com/s/g7p5s3ihmtfuw1k/forum.rar?dl=0 If the issue still persists please revert back to us by updating the sample so that we can assist you accordingly. Awaiting for your response. Share this post Link to post Share on other sites
dmcadam Report post Posted April 24, 2015 Thank you for the quick response, Moonmi! I downloaded the forum.rar file. Opened it and dragged the forum folder onto my desktop. I opened the sample.html file with Google Chrome and everything looked fine. I opened sample.html in TextEdit and changed one line from // "subcaption": "Space occupied", to "subcaption": "Space occupiedd", I saved sample.html then tried reopening it in Google Chrome. The map doesn't load and instead just gives me a blank page with the container text: http://imgur.com/h0NdRjz This again seemed like an extremely minor edit. What could possibly be the issue? Perhaps I am editing the .html files the wrong way? Is there a more appropriate program to do that in? Attached is the full code that doesn't load into a map. <html> <head> <title>My First map using FusionCharts Suite XT</title> <script type="text/javascript" src="fusioncharts/fusioncharts.js"></script> <script type="text/javascript" src="fusioncharts/themes/fusioncharts.theme.fint.js"></script> <script type="text/javascript"> FusionCharts.ready(function () { var salesByState = new FusionCharts({ "type": "maps/usa", "renderAt": "chartContainer", "width": "600", "height": "400", "dataFormat": "json", "dataSource": { "chart": { "caption": "Annual Sales by State", "subcaption": "Space occupiedd”, "entityFillHoverColor": "#cccccc", "numberScaleValue": "1,1000,1000", "numberScaleUnit": "K,M,B", "numberPrefix": "$", "showLabels": "1", //"theme": "fint" }, "colorrange": { "minvalue": "0", "startlabel": "Low", "endlabel": "High", "code": "#e44a00", "gradient": "1", "color": [ { "maxvalue": "56580", "displayvalue": "Average", "code": "#f8bd19" }, { "maxvalue": "100000", "code": "#6baa01" } ] }, "data": [ { "id": "HI", "value": "3189" }, { "id": "DC", "value": "2879" }, { "id": "MD", "value": "920" }, { "id": "DE", "value": "4607" }, { "id": "RI", "value": "4890" }, { "id": "WA", "value": "34927" }, { "id": "OR", "value": "65798" }, { "id": "CA", "value": "61861" }, { "id": "AK", "value": "58911" }, { "id": "ID", "value": "42662" }, { "id": "NV", "value": "78041" }, { "id": "AZ", "value": "41558" }, { "id": "MT", "value": "62942" }, { "id": "WY", "value": "78834" }, { "id": "UT", "value": "50512" }, { "id": "CO", "value": "73026" }, { "id": "NM", "value": "78865" }, { "id": "ND", "value": "50554" }, { "id": "SD", "value": "35922" }, { "id": "NE", "value": "43736" }, { "id": "KS", "value": "32681" }, { "id": "OK", "value": "79038" }, { "id": "TX", "value": "75425" }, { "id": "MN", "value": "43485" }, { "id": "IA", "value": "46515" }, { "id": "MO", "value": "63715" }, { "id": "AR", "value": "34497" }, { "id": "LA", "value": "70706" }, { "id": "WI", "value": "42382" }, { "id": "IL", "value": "73202" }, { "id": "KY", "value": "79118" }, { "id": "TN", "value": "44657" }, { "id": "MS", "value": "66205" }, { "id": "AL", "value": "75873" }, { "id": "GA", "value": "76895" }, { "id": "MI", "value": "67695" }, { "id": "IN", "value": "33592" }, { "id": "OH", "value": "32960" }, { "id": "PA", "value": "54346" }, { "id": "NY", "value": "42828" }, { "id": "VT", "value": "77411" }, { "id": "NH", "value": "51403" }, { "id": "ME", "value": "64636" }, { "id": "MA", "value": "51767" }, { "id": "CT", "value": "57353" }, { "id": "NJ", "value": "80788" }, { "id": "WV", "value": "95890" }, { "id": "VA", "value": "83140" }, { "id": "NC", "value": "97344" }, { "id": "SC", "value": "88234" }, { "id": "FL", "value": "88234" } ] } }); salesByState.render(); }); </script> </head> <body> <div id="chartContainer">FusionMaps XT will load s map here!</div> </body> </html> Share this post Link to post Share on other sites
Moonmi Sonowal Report post Posted April 28, 2015 Hi, Could you please replace the subcaption line to the line as below: "subcaption": "Space occupiedd" The issue seems to be with the unmatched double quotes <" example"> . Hope this would resolve your issue. Thanks. Share this post Link to post Share on other sites
