JQPlot es una solucion muy potente para mostrar graficos y es eficaz para gestionar cualquier tipo de grafico. Ofrece muchas posibilidades de configuración y funciona enteramente en javascript, esto quiere decir que nuestros graficos se veran bien en Iphone y Ipad.

Quiero compartir con vosotro un tema que creo que puede ser util: usar diferentes colores en un grafico con dos series,

El siguente grafico lo conseguí usando el parametro varyBarColor a true y añadiendo un vector de seriesColors[…] con el listado de los colores para cada elemento.

[js]

series:[ { seriesColors: [ "blue", "red",…] .. rendererOptions: { varyBarColor : true, .. }, // end first serie

// start second serie {

rendererOptions: { varyBarColor : true, }, }] … // outside of the series block // this is the color of the line seriesColors: [ "darkgreen"], …

[/js]

y aqui teneis la version completa

[js] <script type="text/javascript">// <![CDATA[ $(document).ready(function () { var s1 = [<?php $suma = 100; for($i=0; $i<count($datos); $i++){

$suma = $suma + $suma*(round($datos[$i][5])/100); echo(‘[‘.($i+1).’, ‘. $suma . ‘]’); if ($i<count($datos)-1)                 echo(‘,’);                 }         ?>]; var s2 = [<?php

for($i=0; $i<count($datos); $i++){

echo(‘[‘.($i+1).’, ‘. (round($datos[$i][5]*100)/100) . ‘]’); if ($i<count($datos)-1)                 echo(‘,’);                 }         ?>];

plot1 = $.jqplot("chart1", [s2, s1], {

// Turns on animatino for all series in this plot. animate: true, // Will animate plot on calls to plot1.replot({resetAxes:true}) animateReplot: true, cursor: { show: true, zoom: true, looseZoom: true, showTooltip: false }, series:[ { seriesColors: [ <?php

for($i=0; $i<count($datos); $i++){

echo((round($datos[$i][5]*100)/100)<0?’"red"’:’"#0A0"’ ); if ($i<count($datos)-1)                 echo(‘,’);                 }         ?>] ,

pointLabels: { show: true }, renderer: $.jqplot.BarRenderer, showHighlight: false, yaxis: ‘y2axis’, rendererOptions: { varyBarColor : true, // Speed up the animation a little bit. // This is a number of milliseconds. // Default for bar series is 3000. animation: { speed: 1000 }, barWidth: 15, barPadding: -15, barMargin: 0, highlightMouseOver: false } }, {

rendererOptions: { varyBarColor : true, // speed up the animation a little bit. // This is a number of milliseconds. // Default for a line series is 2500. padding: 20, animation: { speed: 500 } } } ], axesDefaults: { pad: 0 }, axes: { // These options will set up the x axis like a category axis. xaxis: { tickInterval: 1, drawMajorGridlines: false, drawMinorGridlines: true, drawMajorTickMarks: false, rendererOptions: { tickInset: 0.5, minorTicks: 1

}

},

yaxis: {

tickOptions: { formatString: "€.%’d" }, rendererOptions: { forceTickAt0: false } }, y2axis: { tickOptions: { formatString: "%’d%", showLabel: false

}, rendererOptions: {

// align the ticks on the y2 axis with the y axis. alignTicks: true, forceTickAt0: true } } },

seriesColors: [ "darkgreen"],

highlighter: { show: true, showLabel: true, tooltipAxes: ‘y’, sizeAdjust: 7.5 , tooltipLocation : ‘n’ } });

}); ]]></script> [/js]

Os consejo este libro sobre Java Script que está muy util y da muy buenos consejos: