Tutorial: Mapa de Vendas utilizando a biblioteca FusionChart

Neste exemplo, utilizaremos a biblioteca do FusionCharts para exibir um mapa de calor das vendas efetuadas.

1 – Crie uma aplicação do tipo Blank.

2 – Prosseguimos para criar uma biblioteca externa

3 – Crie uma nova biblioteca a nível de projeto, chamada “fusioncharts_sample” (1). Clique no botão “Usar biblioteca” (2), salve-a no projeto (3) e em seguida, clique na opção para “editar” a biblioteca (4).

4 – Na edição da biblioteca, vamos criar dois arquivos, um .js e outro .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 – Após Salvar a biblioteca no projeto, podemos usar a macro sc_include_lib () para chamar a biblioteca externa dentro do evento onExecute da aplicação Blank.

6 – Usamos o seguinte código para então criar o mapa.

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