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

7 – Por fim, executamos a aplicação.

Compartilhe este tutorial

Tutoriais na mesma categoria

Abas com dashboards

Neste exemplo veremos uma aplicação de Abas exibindo várias Dashboards. Aplicações ...

Dashboard de Empregados por Região

Neste tutorial, criaremos um painel de funcionários por região. Criando as aplicações da...

Dashboard de Vendas por Região

Neste tutorial estaremos criando um painel de vendas por região. Criação da Dashboard ...

Dashboard geral de vendas

Neste exemplo iremos desenvolver uma Dashboard para exibir os dados de vendas. 1 - Crie ...

Comente este post