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!
<? php7 – Finally, we run the application.
Comment this post