FusionCharts Developers,几种用法

2015 年 10 月 23 日4700

          都是官方内容,放到这里便于以后随时查找:

 

Integrating with your stack: PHP

下载

http://www.fusioncharts.com/php-charts/

 

 

The FusionCharts PHP wrapper lets you load data for a chart using:

  • a static JSON string

  • a static XML string

  • a JSON string generated from an associative array

  • an XML string generated from an associative array

In this section, you will be shown how the FusionCharts PHP wrapper uses each of these methods to generate charts.

 

Loading Data from a Static JSON String

image

The data structure needed to render the above chart is given below:

<?php
    /*
        Include the `fusioncharts.php` file that contains functions to embed the charts.
    */
    include("includes/fusioncharts.php");
?>

<html>

    <head>
        <title>FusionCharts XT - Simple Area 2D Chart with JSON Data</title>

        <!--  Include the `fusioncharts.js` file. This file is needed to render the chart. Ensure that the path to this JS file is correct. Otherwise, it may lead to JavaScript errors. -->
        <script src="fusioncharts/fusioncharts.js"></script>
    </head>
    <body>
        <?php
            /*
                Create a `area2DChart` chart object using the FusionCharts PHP class constructor. Syntax for the constructor is `FusionCharts("type of chart", "unique chart id", "width of chart", "height of chart", "div id to render the chart", "data format", "data source")`. To load data from a JSON string, `json` is passed as the value for the data format parameter of the constructor. The actual JSON data for the chart is passed as a string to the constructor.
            */
            $area2DChart = new FusionCharts("Area2D", "myFirstChart" , 600, 300, "chart-1", "json",
                                            '{
                                                "chart": {
                                                    "caption": "Sales of Liquor",
                                                    "subCaption": "Last week",
                                                    "xAxisName": "Day",
                                                    "yAxisName": "Sales (In USD)",
                                                    "numberPrefix": "$",
                                                    "paletteColors": "#0075c2",
                                                    "bgColor": "#ffffff",
                                                    "showBorder": "0",
                                                    "showCanvasBorder": "0",
                                                    "plotBorderAlpha": "10",
                                                    "usePlotGradientColor": "0",
                                                    "plotFillAlpha": "50",
                                                    "showXAxisLine": "1",
                                                    "axisLineAlpha": "25",
                                                    "divLineAlpha": "10",
                                                    "showValues": "1",
                                                    "showAlternateHGridColor": "0",
                                                    "captionFontSize": " 14",
                                                    "subcaptionFontSize": "14",
                                                    "subcaptionFontBold": "0",
                                                    "toolTipColor": "#ffffff",
                                                    "toolTipBorderThickness": "0",
                                                    "toolTipBgColor": "#000000",
                                                    " toolTipBgAlpha": "80",
                                                    "toolTipBorderRadius": "2",
                                                    "toolTipPadding": "5"
                                                },
                                                "data": [{
                                                    "label": " Mon",
                                                    " value": "4123"
                                                }, {
                                                    "label": "Tue",
                                                    "value": "  4633"
                                                }, {
                                                    "label": "Wed",
                                                    "value": "5507"
                                                }, {
                                                    "label": "Thu",
                                                    "value": "4910"
                                                }, {
                                                    "label": "Fri",
                                                    "value": "5529"
                                                }, {
                                                    "label": "Sat",
                                                    "value": "5803"
                                                }, {
                                                    "label": "Sun",
                                                    "value": "6202"
                                                }]
                                            }'
                                        );

            // Render the chart
            $area2DChart->render();
        ?>
    <div id="chart-1">Fusion Charts will render here</div>
   </body>
</html>
 

Loading Data from a Static XML String

image

The data structure needed to render the above chart is given below:

 

<?php
    /*
        Include the `fusioncharts.php` file that contains functions to embed the charts.
    */
    include("includes/fusioncharts.php");
?>
<html>
    <head>
        <title>FusionCharts XT - Simple Line Chart with XML Data</title>
        <!--  Include the `fusioncharts.js` file. This file is needed to render the chart. Ensure that the path to this JS file is correct. Otherwise, it may lead to JavaScript errors. -->
        <script src="fusioncharts/fusioncharts.js"></script>
    </head>
    <body>
        <?php
            /*
                Create a `lineChart` chart object using the FusionCharts PHP class constructor. Syntax for the constructor is `FusionCharts("type of chart", "unique chart id", "width of chart", "height of chart", "div id to render the chart", "data format", "data source")`. To load data from an XML string, `xml` is passed as the value for the data format parameter of the constructor. The actual XML data for the chart is passed as a string to the constructor.
            */
            $lineChart = new FusionCharts("line", "myFirstChart" , 600, 300, "chart-1", "xml",
                                            '<chart caption="Total footfall in Bakersfield Central" subcaption="Last week" xaxisname="Day" yaxisname="No. of Visitors" linethickness="2" palettecolors="#0075c2" basefontcolor="#333333" basefont="Helvetica Neue,Arial" captionfontsize="14" subcaptionfontsize="14" subcaptionfontbold="0" showborder="0" bgcolor="#ffffff" showshadow="0" canvasbgcolor="#ffffff" canvasborderalpha="0" divlinealpha="100" divlinecolor="#999999" divlinethickness="1" divlinedashed="1" divlinedashlen="1" divlinegaplen="1" showxaxisline="1" xaxislinethickness="1" xaxislinecolor="#999999" showalternatehgridcolor="0">
                                                <set label="Mon" value="15123" />
                                                <set label="Tue" value="14233" />
                                                <set label="Wed" value="23507" />
                                                <set label="Thu" value="9110" />
                                                <set label="Fri" value="15529" />
                                                <set label="Sat" value="20803" />
                                                <set label="Sun" value="19202" />
                                            </chart>'
                                        );
            // Render the chart
            $lineChart->render();
        ?>
        <div id="chart-1">Fusion Charts will render here</div>
    </body>
</html>
 

Loading Data from a JSON String Generated from an Associative Array

image

 

The data structure needed to render the above chart is given below:

 

<?php
    /*
        Include the `fusioncharts.php` file that contains functions to embed the charts.
    */
    include("includes/fusioncharts.php");
?>

<!DOCTYPE html>
<html>
    <head>
        <title>FusionCharts XT - Pie 2D Chart</title>
        <!--  Include the `fusioncharts.js` file. This file is needed to render the chart. Ensure that the path to this JS file is correct. Otherwise, it may lead to JavaScript errors. -->
        <script src="fusioncharts/fusioncharts.js"></script>
    </head>
    <body>
        <?php
            /* `$arrData` is the associative array that is initialized to store the chart attributes. */
            $arrData = array(
                "chart" => array(
                    "caption" => "Split of Visitors by Age Group",
                    "subCaption" => "Last year",
                    "paletteColors" => "#0075c2,#1aaf5d,#f2c500,#f45b00,#8e0000",
                    "bgColor" => "#ffffff",
                    "showBorder" => "0",
                    "use3DLighting" => "0",
                    "showShadow" => "0",
                    "enableSmartLabels" => "0",
                    "startingAngle" => "0",
                    "showPercentValues" => "1",
                    "showPercentInTooltip" => "0",
                    "decimals" => "1",
                    "captionFontSize" => "14",
                    "subcaptionFontSize" => "14",
                    "subcaptionFontBold" => "0",
                    "toolTipColor" => "#ffffff",
                    "toolTipBorderThickness" => "0",
                    "toolTipBgColor" => "#000000",
                    "toolTipBgAlpha" => "80",
                    "toolTipBorderRadius" => "2",
                    "toolTipPadding" => "5",
                    "showHoverEffect" => "1",
                    "showLegend" => "1",
                    "legendBgColor" => "#ffffff",
                    "legendBorderAlpha" => "0",
                    "legendShadow" => "0",
                    "legendItemFontSize" => "10",
                    "legendItemFontColor" => "#666666",
                    "useDataPlotColorForLabels" => "1"
                )
            );
            /*
                The data to be plotted on the chart is stored in the `$actualData` array in the key-value form.
            */
            $actualData = array(
                "Teenage" => 1250400,
                "Adult" => 1463300,
                "Mid-age" => 1050700,
                "Senior" => 491000
            );
            /*
                Convert the data in the `$actualData` array into a format that can be consumed by FusionCharts. The data for the chart should be in an array wherein each element of the array is a JSON object having the "label" and “value” as keys.
            */
            $arrData['data'] = array();
            // Iterate through the data in `$actualData` and insert in to the `$arrData` array.
            foreach ($actualData as $key => $value) {
                array_push($arrData['data'],
                    array(
                        'label' => $key,
                        'value' => $value
                    )
                );
            }

            /*
                JSON Encode the data to retrieve the string containing the JSON representation of the data in the array.
            */
            $jsonEncodedData = json_encode($arrData);
            /*
                Create an object for the pie chart  using the FusionCharts PHP class constructor. Syntax for the constructor is ` FusionCharts("type of chart", "unique chart id", width of the chart, height of the chart, "div id to render the chart", "data format", "data source")`. Because we are using JSON data to render the chart, the data format will be `json`. The variable `$jsonEncodeData` holds all the JSON data for the chart, and will be passed as the value for the data source parameter of the constructor.
            */
            $pieChart = new FusionCharts("pie2D", "myFirstChart" , 600, 300, "chart-1", "json", $jsonEncodedData);
            // Render the chart
            $pieChart->render();
        ?>
        <div id="chart-1">Fusion Charts will render here</div>
    </body>
</html>
 

Loading Data from an XML String Generated from an Associative Array

image

 

The data structure needed to render the above chart is given below:

 

<?php
    /*
        Include the `fusioncharts.php` file that contains functions to embed the charts.
    */
    include("includes/fusioncharts.php");
?>
<!DOCTYPE html>
<html>
    <head>
        <title>FusionCharts XT - Bar 2D Chart</title>
        <!-- Include the `fusioncharts.js` file. This file is needed to render the chart. Ensure that the path to this JS file is correct. Otherwise, it may lead to JavaScript errors. -->
        <script src="fusioncharts/fusioncharts.js"></script>
    </head>
    <body>
    <?php
        /*
            Set up templates for the XML data. To create an XML string, using templates is an easier option that manual string concatenation.
        */
        $chartXMLTemplate = <<< CHART
        <chart __attributes__>__set__</chart>
        CHART;
        $attributeTemplate = <<<ATTRIBUTE
        __key__="__value__"
        ATTRIBUTE;
        $setXMLTemplate = <<<SET
        <set label="__label__" value="__value__" />
        SET;
        /* `$arrData` is the associative array that is initialized to store the chart attributes. */
        $arrData = array(
            "chart" => array(
                "caption" => "Top 5 Stores by Sales",
                "subcaption" => "Last month",
                "yaxisname" => "Sales (In USD)",
                "numberprefix" => "$",
                "palettecolors" => "#0075c2",
                "bgcolor" => "#ffffff",
                "showborder" => "0",
                "showcanvasborder" => "0",
                "useplotgradientcolor" => "0",
                "plotborderalpha" => "10",
                "placevaluesinside" => "1",
                "valuefontcolor" => "#ffffff",
                "showaxislines" => "1",
                "axislinealpha" => "25",
                "divlinealpha" => "10",
                "aligncaptionwithcanvas" => "0",
                "showalternatevgridcolor" => "0",
                "captionfontsize" => "14",
                "subcaptionfontsize" => "14",
                "subcaptionfontbold" => "0",
                "tooltipcolor" => "#ffffff",
                "tooltipborderthickness" => "0",
                "tooltipbgcolor" => "#000000",
                "tooltipbgalpha" => "80",
                "tooltipborderradius" => "2",
                "tooltippadding" => "5"
            )
        );
        // The data to be plotted on the chart is stored in the `$arrData` array.
        $arrData['data'] = array(
            "Bakersfield Central" => 880000,
            "Garden Groove harbour" => 730000,
            "Los Angeles Topanga" => 590000,
            "Compton-Rancho Dom" => 520000,
            "Daly City Serramonte" => 330000
        );
        /*
            To convert the chart attributes array, `$arrData`, to XML, we will use the templates instead of manipulating the strings. Individual attribute strings will be stored in the array; they will then be combined into one string using the `implode` method.
        */
        $chartAttributeList = array();
        // Iterate over each chart attribute and convert it into an attribute string
        foreach ($arrData['chart'] as $key => $value) {
            $tempAttributeTemplate = $attributeTemplate;
            $tempAttributeTemplate = str_replace('__key__', $key, $tempAttributeTemplate);
            $tempAttributeTemplate = str_replace('__value__', $value, $tempAttributeTemplate);
            array_push($chartAttributeList, $tempAttributeTemplate);
        }
        // Join the array using a single space as the delimiter.
        $chartAttributeString = implode(' ', $chartAttributeList);
        /*      We again use the template to convert the chart data into the XML format.     */
        $setList = array();
        // Iterate over each data and convert it into XML set
        foreach ($arrData['data'] as $key => $value) {
            $tempSetXMLTemplate = $setXMLTemplate;
            $tempSetXMLTemplate = str_replace('__label__', $key, $tempSetXMLTemplate);
            $tempSetXMLTemplate = str_replace('__value__', $value, $tempSetXMLTemplate);
            array_push($setList, $tempSetXMLTemplate);
        }
        $setString = implode('', $setList);
        $chartXML = $chartXMLTemplate;
        // Replace the chart attributes
        $chartXML = str_replace('__attributes__', $chartAttributeString, $chartXML);
        // Replace the data sets
        $chartXML = str_replace('__set__', $setString, $chartXML);
        /*
            Create an object for the bar chart using the FusionCharts PHP class constructor. Syntax for the constructor is ` FusionCharts("type of chart", "unique chart id", width of the chart, height of the chart, "div id to render the chart", "data format", "data source")`. The constructor is used to initialize the chart type, chart id, width, height, the div id of the chart container, the data format, and the data source. Because we are using XML data to render the chart, the data format will be `xml`. The variable `$chartXML` holds all the XML data for the chart, and will be passed as the value for the data source parameter of the constructor.
        */
        $barChart = new FusionCharts("bar2D", "myFirstChart" , 600, 300, "chart-1", "xml", $chartXML);
        // Render the chart
        $barChart->render();
    ?>
    <div id="chart-1"><!-- Fusion Charts will render here--></div>
    </body>
</html>
 

For an example, click here (For XML - check the data under the XML tab).

Multi-series Chart

 

JSON:

 

{
    "chart": {},
    "categories": [
        {
            "category": [
                {
                    "label": "Label for category 1 "
                },
                {
                    "label": "Label for category 2 "
                },
                {
                    "label": "Label for category ... "
                },
                {
                    "label": "Label for category n "
                }
            ]
        }
    ],
    "dataset": [
        {
            "data": [
                {
                    "value": "Value for category 1 series 1"
                },
                {
                    "value": "Value for category 2 series 1"
                },
                {
                    "value": "Value for category ... series 1"
                },
                {
                    "value": "Value for category n series 1"
                }
            ]
        },
        {
            "data": [
                {
                    "value": "Value for category 1 series 2"
                },
                {
                    "value": "Value for category 2 series 2"
                },
                {
                    "value": "Value for category ... series 2"
                },
                {
                    "value": "Value for category n series 2"
                }
            ]
        },
        {
            "data": [
                {
                    "value": "Value for category 1 series ..."
                },
                {
                    "value": "Value for category 2 series ..."
                },
                {
                    "value": "Value for category ... series ..."
                },
                {
                    "value": "Value for category n series ..."
                }
            ]
        },
        {
            "data": [
                {
                    "value": "Value for category 1 series n"
                },
                {
                    "value": "Value for category 2 series n"
                },
                {
                    "value": "Value for category ... series n"
                },
                {
                    "value": "Value for category n series n"
                }
            ]
        }
    ]
}
 
xml:
 
<chart>
    <categories>
        <category label="Label for category 1 " />
        <category label="Label for category 2 " />
        <category label="Label for category ... " />
        <category label="Label for category n " />
    </categories>
    <dataset>
        <set value="Value for category 1 series 1" />
        <set value="Value for category 2 series 1" />
        <set value="Value for category ... series 1" />
        <set value="Value for category n series 1" />
    </dataset>
    <dataset>
        <set value="Value for category 1 series 2" />
        <set value="Value for category 2 series 2" />
        <set value="Value for category ... series 2" />
        <set value="Value for category n series 2" />
    </dataset>
    <dataset>
        <set value="Value for category 1 series ..." />
        <set value="Value for category 2 series ..." />
        <set value="Value for category ... series ..." />
        <set value="Value for category n series ..." />
    </dataset>
    <dataset>
        <set value="Value for category 1 series n" />
        <set value="Value for category 2 series n" />
        <set value="Value for category ... series n" />
        <set value="Value for category n series n" />
    </dataset>
</chart>
 
  • Make sure that the XML strings are escaped properly, especially for instances where the data for the chart is enclosed in quotation marks. Also make sure that the entire string is enclosed in single quotes, while the attributes and corresponding values are enclosed in double quotes. Doing otherwise will break the code.

  • The chart ID should be unique for all charts rendered on the same page. Otherwise, it will result in a JavaScript error.

There! You have now seen how you can use the FusionCharts PHP wrapper to load chart data.

 

URL:  http://www.fusioncharts.com/dev/using-with-server-side-languages/php/different-ways-of-loading-data.html

0 0