dynamic radar chart display with .jpg?param1=array(val1)&param2=array(val2)

[malatamil]

i have a URL like this example.com/index.php?param1=10,20,30,40,50¶m2=50,60,70,80,90,10¶m3=40,50,60,70,80

Using PHP,javascript,JSON i did this pentagon radarchart.

If the values are changing then the pentegon image also will be change. and if the parameters limit is 3 only. if it is 1 parameter then the respective parameter values will display.

By using the .php file this radar chart is displaying fine. but i want to use this chart for email marketing. so .php is not supporting, instead of .php i want to make it in .jpg.

Anyone can you help me to get out this issue.

[diafol]

You can create an image (JPEG, PNG...) from primitive vector info with GD2, if you're using PHP.

No idea how you're producing this chart though. You don't provide any code.

[malatamil]

Here is my code

$current_url = $_SERVER['REQUEST_URI'];
    $current_url1 = explode("&",$_SERVER["QUERY_STRING"]);
    $count1 = count($current_url1);

    $query_str = parse_url($current_url, PHP_URL_QUERY);
    parse_str($query_str, $query_params);

    $axisArray = array('TEXTURE','FIRMNESS','WRINKLE','SPOT','RADIANCE');
    $classNameArray = array('CurrentResult','LastResult');      
    $paramName = array('mr1','mr2','mr3');

    function my_filter($var)
    {
        return ($var !== false && $var !== null && $var !== '' && is_numeric($var));
    }

    $strpos_0 = strpos($current_url1[0], "=");
            $strlen_0 = strlen($current_url1[0]);
            $substr_0 = substr($current_url1[0], $strpos_0+1,$strlen_0);
            $mrArray_0 = count(array_filter(explode(",", $substr_0),'my_filter'));

    $strpos_1 = strpos($current_url1[1], "=");
            $strlen_1 = strlen($current_url1[1]);
            $substr_1 = substr($current_url1[1], $strpos_1+1,$strlen_1);
            $mrArray_1 = count(array_filter(explode(",", $substr_1),'my_filter'));
    $strpos_2 = strpos($current_url1[2], "=");
            $strlen_2 = strlen($current_url1[2]);
            $substr_2 = substr($current_url1[2], $strpos_2+1,$strlen_2);
            $mrArray_2 = count(array_filter(explode(",", $substr_2),'my_filter'));


    if(!empty($current_url1))
    {       
        $axesArray = array();

        $j=0;
        foreach ($current_url1 as $key => $value) {
            $strpos_s = strpos($value, "");
            $strlen_s = strlen($value);
            $substr_s = substr($value, $strpos_s,3);                    

            if(in_array($substr_s,$paramName))      
            {
                    $dataArray = array();
                    $jsonArray= array();                    
                    $url = $value;

                    $strpos = strpos($url, "=");
                    $strlen = strlen($url);
                    $substr = substr($url, $strpos+1,$strlen);
                    $mrArray = explode(",", $substr);


                    $i =0;
                    //$status = 0;

                    if(count(array_filter($mrArray,'my_filter'))<5 && $key == 0){
                        //$status = 1;
                        break;
                    } 

                    if(count(array_filter($mrArray,'my_filter'))<5){
                        //$status = 1;
                        continue;
                    }


                    foreach ($mrArray as $value1) {
                        $dataArray[$i]['axis'] = $axisArray[$i];
                        if($value1 == ""){
                            //$status = 1;
                            break;
                        }
                        $dataArray[$i]['value'] = $value1;
                        if($value1>100){
                            $dataArray[$i]['value'] ="100";
                        }
                        $i++;

                    }
                $jsonArray['axes'] = $dataArray;
                $axesArray[$key] = $jsonArray;
            }
            else{   
                if($key == 0)   
                {
                    break;
                }                   
                continue;
            }

        }

        $finalArray = array_reverse($axesArray);    
        $jsonEncodeArray = array();
        foreach ($finalArray as $key => $value){
            if(!empty($classNameArray[$key])){
                $value["className"] = $classNameArray[$key];
                $jsonEncodeArray[] = $value;
            }

        }

}$j++;

  $jsonData = json_encode($jsonEncodeArray); 

?>
<script type="text/javascript">
    var jsonData = '<?php echo $jsonData; ?>';
    var json = JSON.parse(jsonData);
    //console.log(json);
    var data = json;
</script>
</head>

<body>
  <div class="chart-container"></div>
  <script type="text/javascript">
    RadarChart.draw(".chart-container", data);
  </script>

[diafol]

Hmm. SO on page load...

PHP sends data to JS. JS creates 'chart'.

You want PHP sends data to JS. JS creates chart. JS posts 'image' to PHP. PHP sends email with 'image'. ? Is that right?

Not sure if this is possible - it depends on the output of the RadarChart, of which I have no experience.

If it can create an image - e.g.svg (xml), then it should be possible. Where have you got so far?

There are many js radarchart scripts out there - which one are you using? url?

[diafol]

Having said all that - if you're not using this in a page, just sending it in the body of an email, why not just use a PHP lib: http://pchart.sourceforge.net/documentation.php?topic=exemple8

[malatamil]

yeah.. php sends data to JS, and after that i want to display the radarchart in .jpg format from JS, is it possible.

Because this dynamic radarchart i wants to send it through email.

[diafol]

Well that's a bit tricky. I have no idea how you're gooing to generate this 'image'. It would have to be done manually AFAIK as a background script would need to invoke javascript to produce the SVG.

Anyhow. I'm assuing this is the script you're using: https://github.com/alangrafu/radar-chart-d3 as you did not answer my question.

Ideally you should be able to send SVG data in an email, but unfortunately not all clients are able to display SVG. There has been some work done on this in recently and perhaps you should spend some time researching the subject.

Converting SVG to PNG or JPEG can be done with client-side possibly (JS) or ImageMagick (PHP). Converting on the client doesn't seem to help IMO as you'd need to send that to the server, which is a bit of a pain. So looks like ImageMagick may be your best bet. Unfortunately GD2, which is usually bundled and enabled with PHP does not AFAIK handle SVG. You will most likely need to install ImageMagick on your server. If this is a hosted server, then check your cPanel (or equivalent) - you may need to contact your host.

So, as I see it - a rather convoluted way of doing it:

1. Load Page with data from PHP injected into JS variable.
2. SVG created on using data from above.
3. Use an Ajax request to send SVG data to PHP script - where ImageMagick will do its thing.
4. The resulting image from IM can be sent with your usual email as an attachment. (You could also look into Base64 encoding the image and send it as data if you wanted).

Your Ajax method could be just a "load, fire and forget", in which case you're not waiting for a return message or you could make your server script send a confirmation message. Up to you. Just remember that Ajax calls are asynchronous. Image manipulation typically take some time, so setting Ajax to 'synchronous' may make your system hang (not good).

Having said all this, I really think that you'd be better off with a server-side radar chart script. You will lose any interactive animation with a static image anyway. If you can find a method to enable all email clients to display your SVG properly, then that could be ideal.

[malatamil]

Hi everyone, still am facing some problem in the pentagon image generator. if i try with static values the pentagon image is showing perfectly and after the implementation of querystring it is showing empty image format.
i Used pChart libraries.

Here is the new updated source code.while calling valuedata.png?m1=50,60,70,80,90,10&m2=40,50,60,70,80 it will redirect to example.php page

So anyone can help me to solve this.

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <rewrite>
            <rewriteMaps>
                <rewriteMap name="PHPtoJPG">
                </rewriteMap>
            </rewriteMaps>
            <rules>
                <rule name="PHPtoJPG">
                    <match url="valuedata.png" />
                    <action type="Rewrite" url="example.php" />
                </rule>
            </rules>
        </rewrite>
    </system.webServer>
</configuration>

example.php

<?php 
/* CAT:Polar and radars */

 /* pChart library inclusions */
 include("class/pData.class.php");
 include("class/pDraw.class.php");
 include("class/pRadar.class.php");
 include("class/pImage.class.php");

    /* Create and populate the pData object */
    $MyData = new pData();   

    ini_set("display_errors",1);
    error_reporting(1);

    $current_url = $_SERVER['REQUEST_URI'];
    $current_url_string = explode("&",$_SERVER["QUERY_STRING"]);
    $count1 = count($current_url_string);

    $query_str = parse_url($current_url, PHP_URL_QUERY);
    parse_str($query_str, $query_params);

    $axisArray = array('TEXTURE','FIRMNESS','WRINKLE','SPOT','RADIANCE');
    $classNameArray = array('CurrentResult','LastResult');      
    $paramName = array('mr1','mr2','mr3');

    function filter($var)
    {
        return ($var !== false && $var !== null && $var !== '' && is_numeric($var));
    }

    $stringPosMr1 = strpos($current_url_string[0], "=");
            $strlenMr1 = strlen($current_url_string[0]);
            $substrMr1 = substr($current_url_string[0], $stringPosMr1+1,$strlenMr1);
            $mrArrayMr1 = count(array_filter(explode(",", $substrMr1),'filter'));
    $stringPosMr2 = strpos($current_url_string[1], "=");
            $strlenMr2 = strlen($current_url_string[1]);
            $substrMr2 = substr($current_url_string[1], $stringPosMr2+1,$strlenMr2);
            $mrArrayMr2 = count(array_filter(explode(",", $substrMr2),'filter'));
    $stringPosMr3 = strpos($current_url_string[2], "=");
            $strlenMr3 = strlen($current_url_string[2]);
            $substrMr3 = substr($current_url_string[2], $stringPosMr3+1,$strlenMr3);
            $mrArrayMr3 = count(array_filter(explode(",", $substrMr3),'filter'));

    if(!empty($current_url_string))
    {       
        $axesArray = array();
        $j=0;
        foreach ($current_url_string as $key => $value) {
            $strposParam = strpos($value, "");
            $strlenParam = strlen($value);
            $substrParam = substr($value,0, strpos($value,'='));                    

            if(in_array(trim($substrParam),$paramName))     
            {
                    $dataArray = array();
                    $jsonArray= array();                    
                    $url = $value;

                    $strposParamValue = strpos($url, "=");
                    $strlenParamValue = strlen($url);
                    $substrParamValue = substr($url, $strposParamValue+1,$strlenParamValue);
                    $mrArray = explode(",", $substrParamValue);

                    $i =0;
                    if(count(array_filter($mrArray,'filter'))<5 && $key == 0){
                        break;
                    } 
                    if(count(array_filter($mrArray,'filter'))<5){
                        continue;
                    }
                    foreach ($mrArray as $value1) {
                        $dataArray[$i]['axis'] = $axisArray[$i];
                        if($value1 == ""){
                            break;
                        }
                        $dataArray[$i]['value'] = $value1;
                        if($value1>100){
                            $dataArray[$i]['value'] ="100";
                        }
                        $i++;
                    }
                $jsonArray['axes'] = $dataArray;
                $axesArray[$key] = $jsonArray;
            }
            else{   
                if($key == 0)   
                {
                    break;
                }                   
                continue;
            }
        }
        $finalArray = array_reverse($axesArray);

        $jsonEncodeArray = array();
        foreach ($finalArray as $key => $value){
            if(!empty($classNameArray[$key])){
                $value["className"] = $classNameArray[$key];
                $jsonEncodeArray[] = $value;
            }
        }
}$j++;
echo "<pre>";
print_r($jsonEncodeArray);

$classN = array("ScoreA","ScoreB");

foreach($jsonEncodeArray as $key1 => $axesvalue)
{
    echo "\r\n";

    echo "\r\n".$key1."\r\n";
    $resultArr = array();

    foreach($axesvalue as $key2 => $arrayvalue) {

        foreach($arrayvalue as $key3 => $arrayvalue1){

            echo "<pre>";
            array_push($resultArr,$arrayvalue1['value']);

        }

    }
    print_r($resultArr);
    $values["className"] = $classN[$key1];

    print_r($values);

    $MyData->addPoints(array($resultArr),$values);
    //$MyData->setSerieDescription($values,"Application A");
    $MyData->setPalette($values,array("R"=>255,"G"=>255,"B"=>255));
}


 //$MyData->addPoints(array(8,10,12,20,30,15),"ScoreB"); 
 //$MyData->addPoints(array(4,8,16,32,16,8),"ScoreC"); 
 //$MyData->setSerieDescription("ScoreA","Application A");
 //$MyData->setSerieDescription("ScoreB","Application B");
 //$MyData->setSerieDescription("ScoreC","Application C");
 //$MyData->setPalette("ScoreA",array("R"=>255,"G"=>255,"B"=>255));
 //$MyData->setPalette("ScoreB",array("R"=>255,"G"=>255,"B"=>255));
 //$MyData->setPalette("ScoreC",array("R"=>255,"G"=>255,"B"=>255));

 /* Define the absissa serie */
 $MyData->addPoints(array("TEXTURE","FIRMNESS","WRINKLE","SPOT","RADIANCE"),"Labels");
 $MyData->setAbscissa("Labels");

 /* Create the pChart object */
 $myPicture = new pImage(222,209,$MyData,TRUE);

 /* Draw a solid background */
 $Settings = array("R"=>100,"G"=>100,"B"=>100,"Alpha"=>0.5);
 $myPicture->drawFilledRectangle(0,0,350,230,$Settings);

 /* Set the default font properties */ 
 $myPicture->setFontProperties(array("FontName"=>"../fonts/verdana.ttf","FontSize"=>8,"R"=>80,"G"=>80,"B"=>80));

 /* Create the pRadar object */ 
 $SplitChart = new pRadar();

 /* Draw a radar chart */ 
 $myPicture->setGraphArea(5,25,222,209);
 $Options = array("WriteValues"=>FALSE,"Layout"=>RADAR_LAYOUT_STAR,"BackgroundGradient"=>array("StartR"=>252,"StartG"=>46,"StartB"=>0,"StartAlpha"=>100,"EndR"=>163,"EndG"=>8,"EndB"=>0,"EndAlpha"=>100), "FontName"=>"../fonts/pf_arma_five.ttf","FontSize"=>6, "PointRadius"=>2,"AxisRotation"=>-90,"LabelPos"=>RADAR_LABELS_HORIZONTAL,"DrawAxisValues"=>FALSE,"WriteLabels"=>FALSE,'SegmentHeight' => 20,'Segments' => 5); //"BackgroundGradient"=>array("StartR"=>255,"StartG"=>255,"StartB"=>255,"StartAlpha"=>100,"EndR"=>207,"EndG"=>227,"EndB"=>125,"EndAlpha"=>50)
 //WriteValues : TRUE
 //exit();
 $SplitChart->drawRadar($myPicture,$MyData,$Options);

 header('Content-type: image/png');
 /* Render the picture (choose the best way) */
 $myPicture->autoOutput("example.radar.png");

?>

[malatamil]

Problem Solved.

In Above code i used print_r() and echo so the image was not displayed. once i removed the print_r() and echo it is showing the image with respected parameter values.

And i added the array values inside the array that is also one issue and $values is array(classnames).

$MyData->addPoints(array($resultArr),$values);

so i changed into this

$MyData->addPoints($resultArr,"class name hard code");

Other than that everything is fine.Now the pentagon image is coming this is what i expected.