Sales map with the FusionCharts library

In this example, we will use the Fusion Charts library to display a heat map of sales made.

1 – Create a Blank application.

2 – We proceed to create an external library

3 – Create a new library at the project level, called “fusioncharts_sample” (1). Click on the “Use library” button (2), save it to the project (3) and then click on the option to “edit” the library (4).

4 – Once we obtain the code from the external library, we proceed to create two files, one .js and another .php

maps.php

<? php 

function getChartSQL () 
{ 
// fusionchart key 
// label 
// chart type map 
// the value itself 
if (isset ($ _ GET ['map']) && isset ($ _ GET ['region']) && isset ($ _GET ['country'])) 
{ 
$ str_sql = " 
SELECT 
   states.fs_id, 
   states.statename,    
   states.statename, 
   SUM (orders.priceorder) 
FROM 
   orders INNER JOIN customers ON orders.customerid = customers.customerid 
   INNER JOIN states ON customers.stateid = states.stateid 
   INNER JOIN country ON customers.country = country.iso 
   INNER JOIN country_region ON country.country_region = country_region.regionid 
WHERE
country_region.short_label = \ "". str_replace ('"'," \ "", $ _GET ['region']). "\" AND 
    country.fs_id = \ "". str_replace ('"'," \ "", $ _GET ['country']). "\" 
GROUP BY 
   states.stateid, 
   states.statename,    
   states.statename 
"; 
} 
elseif (isset ($ _ GET ['map']) && isset ($ _ GET ['region'])) 
{ 
$ str_sql =" 
SELECT 
   country .fs_id, 
   country.printable_name,    
   country.fs_map, 
   SUM (orders.priceorder) 
FROM 
   orders INNER JOIN customers ON orders.customerid = customers.customerid 
   INNER JOIN states ON customers.stateid = states.stateid 
   INNER JOIN country ON customers.country = country.iso
   INNER JOIN country_region ON country.country_region = country_region.regionid 
WHERE 
    country_region.short_label = \ "". str_replace ('"'," \ "", $ _GET ['region']). "\" 
GROUP BY 
   country.fs_id, 
   country.printable_name,    
   country.fs_map 
"; 
} 
else 
{ 
$ str_sql =" 
SELECT 
   country_region.short_label, 
   country_region.label, 
   country_region.fs_map, 
   SUM (orders.priceorder) 
FROM 
   orders INNER JOIN customers ON orders.customerid = customers.customerid 
   INNER JOIN states ON customers.stateid = states.stateid 
   INNER JOIN country ON customers.country = country.iso
   INNER JOIN country_region ON country.country_region = country_region.regionid 
GROUP BY 
   country_region.short_label, 
   country_region.label, 
   country_region.fs_map 
"; 
} 

return $ str_sql; 
} 

function getChartMapType () 
{ 
if (isset ($ _ GET ['map'])) 
{ 
return $ _GET ['map']; 
} 
else 
{ 
return "world"; 
} 
} 

function getChartData ($ rs) 
{ 
$ arr_data = array (); 

$ arr_data ['min'] = 0; 
$ arr_data ['max' ] = 0; 
$ arr_data ['data'] = ""; 

foreach ($ rs as $ row) 
{ 
$ link = "";
if (isset ($ _ GET ['map']) && isset ($ _ GET ['region']) && isset ($ _ GET ['country'])) 
{ 

} 
elseif (isset ($ _ GET ['map']) && isset ($ _ GET ['region'])) 
{ 
$ link = "? map =". $ row [2]. "& region =". $ _GET ['region']. "& Country =". $ row [0]. "& last_map =". $ _GET ['map']; 
} 
else 
{ 
$ link = "? map =". $ row [2]. "& region =". $ row [0]; 
} 

if ($ row [3]> $ arr_data ['max']) 
{ 
$ arr_data ['max'] = $ row [3]; 
} 

$ arr_data ['data']. = '{ 
                     "id": "'. $ row [0]. '",
                     "displayValue": "'. $ row [1].'", 
                     "showLabel": "1", 
                     "value": "'. $ row [3].'",
"link": "'. $ link.'", 
                 }, '; 
} 
return $ arr_data; 
} 

function getHtmlBackButton ($ strLang) 
{ 
if (isset ($ _ GET ['last_map']) && isset ($ _ GET ['region']) && isset ($ _ GET ['country'])) 
{ 
return "<a id = 'back' href = '? map = ". $ _GET ['last_map']. "& Region =". $ _GET ['region']. "'>". $ strLang. "</a>"; 
} 
elseif (isset ($ _ GET ['map']) && isset ($ _ GET ['region'])) 
{ 
return "<a id='back' href='?'>". $ strLang. "</a>"; 
} 
else 
{ 
return ""; 
} 
}

maps.js

function drawMap (strChartType, strChartTitle, strChartSubTitle, minValue, avgValue, MaxValue, jsonData) 
{ 
    FusionCharts.ready (function () { 
        var populationMap = new FusionCharts ({ 
            type: 'maps /' + strChartType, 
            renderAt: 'chart-container', 
            width: '100%', 
            height: '100%', 
            dataFormat: 'json', 
            dataSource: { 
                "chart": { 
                    "caption": strChartTitle, 
                    "subcaption": strChartSubTitle, 
                    "theme": "fint", 
                    "formatNumberScale ":" 0 ",
                    "showLabels": "1",
                    "nullEntityColor": "# C2C2D6", 
                    "nullEntityAlpha": "50", 
                    "hoverOnNull": "0", 
                    "useSNameInLabels": "0", 
                    "entityFillColor": "# A8A8A8", 
                    "entityFillHoverColor": "# E5E5E9" , 
"canvasBorderColor": "# FFFFFF", 
"borderColor": "# 808080" 
                }, 
                "colorrange": { 
                    "startlabel": "Low", 
                    "endlabel": "High", 
                    "code": "# e44a00 ", 
                    " minvalue ": minValue, 
                    " gradient ":" 1 ", 
                    " color ": [{
                        "maxvalue": avgValue, 
                        "displayvalue": "Average", 
                        "code": "# f8bd19" 
                    }, { 
                        "maxvalue": MaxValue, 
                        "code": "# 6baa01" 
                    }] 
                }, 
        
                "data": jsonData, 
            } 
        }); 
     populationMap.render (); 
    }); 
}
 

5 – We proceed to use the sc_include_lib () macro to call the external library within the onExecute event of the blank application.

6 – We use the following code to then create the map.

sc_include_library ("prj", "fusioncharts_sample", "maps.php", true, true); 
$ str_sql = getChartSQL (); 
sc_lookup (rs, $ str_sql); 
$ json_data = getChartData ({rs}); 
?> 
 
 
     <? php echo {lang_maps_title}; ?> 

     sc_include_lib ("fusioncharts"); 
     "> 
     json_data = [<? php echo $ json_data ['data'];?>]; langs = [" <? php echo {lang_maps_subs_low}; ?> "," <? php echo {lang_maps_subs_avg}; ?> "," <? php echo {lang_maps_subs_high}; ?> "]; drawMap ('<? php echo getChartMapType ();?>'," <? php echo {lang_maps_title};?> "," <? php echo {lang_maps_subtitle};?> ", '<? php echo $ json_data ['min'];?> ',' <? php echo ($ json_data ['max']) / 2; ?> ',' <? php echo $ json_data ['max']; ?> ', json_data, langs); 
 <style>     a#back{         border: 1px solid #e4d9c1;         border-radius: 5px;         padding: 5px 8px;         position: fixed;         right: 15px;         top: 20px;         background: #e4d9c1;         *text-transform: uppercase;         font-family: sans-serif;         font-size: 12px;         color: #555;         text-decoration: none;         font-weight: bold;     }     a#back:hover{         text-decoration: underline;     } </style>
 
 
     
A world map will load here! 
 
     

 
 
<? php

7 – Finally, we run the application.

Tutorials in the same category

Tutorial: Cloud File Management

Some of the data storage services are ready to securely read and store files and images from your S...

Integration with WhatsApp

To integrate WhatsApp with ScriptCase, we will be using a specific API called Chat-API, it is a...

Tutorial: Blank Application

In this example a Blank application will be created, using for example jquery code to create an acc...

Using the Paypal and Pagseguro API

1 - We create an application of the grid type 2 - We edit the following fields and create a ...

Comment this post