Saltar al contenido
Consejos

Crear gráficos usando PHP y el Tutorial de MongoDB

Ahora que hemos establecido la conexión con nuestra base de datos, buscaremos datos para nuestro gráfico.

Aquí está un vistazo rápido a nuestra colección de datos de gráficos en la base de datos de myProject que usaremos para renderizar el gráfico.

Crear gráficos usando PHP y el Tutorial de MongoDB
Crear gráficos usando PHP y el Tutorial de MongoDB

A continuación se muestra el código PHP para obtener datos de nuestra base de datos:

123456789// recuperar datos de la base de datos$db=$dbconn-essmessmessment-project;$myObj=$db-essment- chartData-essment-favoravoravorable;//convertir MongoCursor en un array$data=iterator_to_array($myObj);// ordenar el dataasort($data);

php

Después de que el código anterior se ejecute con éxito, $data retendrá los datos obtenidos de nuestra base de datos. Ahora formaremos una matriz asociativa JSON para el gráfico.

FusionCharts entiende los formatos de datos XML y JSON. Como usaremos JSON, ahora añadiremos los datos (obtenidos de la base de datos en la variable $data) junto con la configuración del gráfico de FusionCharts y analizaremos el resultado final como una matriz asociativa JSON.

A continuación se presenta el código PHP necesario para adjuntar los datos de los gráficos obtenidos de la base de datos:

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384if($data){$categoryArray=array(); $dataseries1=array();$dataseries2=array();foreach($dataas$dataset){array_push($categoryArray,array("label"=&gt.; $dataset["mes"]));array_push($serie de datos1,array("valor"=>$conjunto de datos["gasolina"]));array_push($serie de datos2,array("valor"=>$conjunto de datos["gasóleo"]);}$arrData=array("gráfico"=[;array("leyenda"=> "Comparación del precio de la gasolina y el gasóleo", "xNombre del eje"=> "Mes", "yNombredeEje"=>; "Precio", "númeroPrefijo"=>;"$", "paletaColores"=>; "#876EA1, #72D7B2", "usoPlotgradientcolor"=>; "0", "gráficoBorderAlpha"=>; "0", "bgColor"=>; "#FFFFFFF", "canvasBgColor"=>; "#FFFFFF", "showValues"=>; "0", "showCanvasBorder"=>; "0", "showBorder"=>; "0", "divLineAlpha"=>; "40", "divLineColor"=>; "#DCDCDC", "alternateHGridColor"=>; "#DCDCDC", "alternateHGridAlpha"=>; "15", "labelDisplay"=>; "auto", "baseFont"=> "Assistant", "baseFontColor"=> "#000000", "outCnvBaseFont"=> "Assistant", "outCnvBaseFontColor"=> "#000000", "baseFontSize"=> "13", "outCnvBaseFontSize"=> "13", "labelFontColor"=> "#000000", "captionFontColor"=> "#153957", "captionFontBold"=> "1", "captionFontSize"=>; "20", "subCaptionFontColor"=>; "#153957", "subCaptionfontSize"=>; "17", "subCaptionFontBold"=>; "0", "captionPadding"=[]; "20", "valueFontBold"=[]; "0", "showAxisLines"=[]; "1", "yAxisLineColor"=[]; "#DCDCDC", "xAxisLineColor"=[]]; "#DCDCDC", "xAxisLineAlpha"=[]; "15", "yAxisLineAlpha"=[]; "15", "toolTipPadding"=[]; "7", "toolTipBorderColor"=[]; "#DCDCDC", "toolTipBorderThickness"=[]; "0", "toolTipBorderRadius"=>; "2", "showShadow"=>; "0", "toolTipBgColor"=>; "#153957", "toolTipBgAlpha"=>; "90", "toolTipColor"=>; "#FFFFFF", "legendBorderAlpha"=> "0", "legendShadow"=§; "0", "legendItemFontSize"=§; "14"));$arrData["categories"]=array(array("category"=§..; $categoryArray));// crear conjunto de datos object$arrData["conjunto de datos"]=array(array("nombre de la serie"=> "precio de la gasolina", "datos"=),array("nombre de la serie"=> "precio del gasóleo", "datos"=));$jsonEncodedData=json_encode($arrData);}

php

Cada gráfico que aparece en una página web se presenta dentro de un contenedor HTML único. Usaremos el elemento para crear el contenedor HTML de nuestro gráfico.

A continuación se presenta el código para crear el contenedor de la carta:

123<cuerpo¶;div¶;Las Cartas de Fusión rendirán aquí</div...
html


Ahora que tenemos los datos JSON y el contenedor de gráficos en su lugar, crearemos la instancia FusionCharts y llamaremos al método de renderización para renderizar el gráfico.



La instancia del gráfico incluye los detalles necesarios para presentar el gráfico, como el tipo de gráfico, el ID del gráfico, las dimensiones del gráfico, el ID del contenedor HTML, etc., se pasarán a esta instancia del gráfico.




123$msChart=newFusionCharts("msline", "demochart", "600", "400", "chart-container", "json",$jsonEncodedData);$msChart-();
php