jQuery UI Widgets › Forums › Chart › Not showing values when I put on the column
This topic contains 3 replies, has 2 voices, and was last updated by tamaraOnt 11 years, 10 months ago.
Viewing 4 posts - 1 through 4 (of 4 total)
-
Author
-
I’m doing a Column Chart, but the values don’t appear when I collocate my mouse on the column
This is the code that I have:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html lang="en"><head> <title id='Description'>jqxChart Column Series Example</title> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.10.1.min.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxchart.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> <script type="text/javascript"> $(document).ready(function () {var settingsColumns = { showLegend: true, enableAnimations: true, padding: { left: 5, top: 5, right: 5, bottom: 5 }, titlePadding: { left: 90, top: 0, right: 0, bottom: 10 }, // source: dataAdapter, categoryAxis: { dataField: 'tipoGrafico', showGridLines: true }, colorScheme: 'scheme01', seriesGroups: [ { type: 'column', columnsGapPercent: 50, valueAxis: { unitInterval: 100, displayValueAxis: true, description: 'Euros' }, series: [ { dataField: 'euros_a_recuperar', displayText: 'Euros a recuperar'}, { dataField: 'euros_recuperados', displayText: 'Euros recuperados' }, { dataField: 'euros_perdidos', displayText: 'Euros perdidos' } ] } ] }; var source = [ { tipoGrafico: 'Total Fraudulentas', euros_a_recuperar: 300, euros_recuperados:100,euros_perdidos:200} ]; var dataAdapter = new $.jqx.dataAdapter(source, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error);} }); settingsColumns.title="Evolucion de los euros"; settingsColumns.description="Respecto del total de ordenes infractoras"; settingsColumns.source = dataAdapter; $('#jqxChartGlobalColumnEuros').jqxChart(settingsColumns); }); </script> </head><body class='default'> <div id='jqxChartGlobalColumnEuros' style="width:680px; height:300px"></div> </div></body></html>
Hello tamaraOnt,
We have tested your example locally using version 2.9.2. The chart tooltips correctly show the values of the columns. We suggest you to update to the latest version of jQWidgets.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/I have the problem when I have more than one jqxchart in the same file.
I show you the code that I have.
<link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.10.1.min.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxchart.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script><script type="text/javascript"> var settingsPie = { enableAnimations: true, showLegend: true, legendLayout: { left: 500, top: 140, width: 300, height: 200, flow: 'vertical' }, padding: { left: 5, top: 5, right: 5, bottom: 5 }, titlePadding: { left: 0, top: 0, right: 0, bottom: 10 }, // source: dataAdapter, colorScheme: 'scheme03', seriesGroups: [ { type: 'pie', showLabels: true, series: [ { dataField: 'valor', displayText: 'tipoOrden', labelRadius: 120, initialAngle: 15, radius: 95, centerOffset: 0, formatSettings: { sufix: '%', decimalPlaces: 1 } } ] } ] }; var settingsColumns = { showLegend: true, enableAnimations: true, padding: { left: 5, top: 5, right: 5, bottom: 5 }, titlePadding: { left: 90, top: 0, right: 0, bottom: 10 }, categoryAxis: { dataField: 'tipoGrafico', showGridLines: true }, colorScheme: 'scheme01', seriesGroups: [ { type: 'column', columnsGapPercent: 50, valueAxis: { unitInterval: 100, displayValueAxis: true, description: 'Euros' }, series: [ { dataField: 'euros_a_recuperar', displayText: 'Euros a recuperar'}, { dataField: 'euros_recuperados', displayText: 'Euros recuperados' }, { dataField: 'euros_perdidos', displayText: 'Euros perdidos' } ] } ] }; var settingsLine = { enableAnimations: true, showLegend: true, padding: { left: 10, top: 5, right: 10, bottom: 5 }, titlePadding: { left: 90, top: 0, right: 0, bottom: 10 }, //source: dataAdapter, categoryAxis: { dataField: 'fecha', formatFunction: function (value) { return (value.getMonth() + 1) + "-" + value.getFullYear(); }, toolTipFormatFunction: function (value) { return value.getDate() + '-' + (value.getMonth()+1)+ "-" + value.getFullYear(); }, type: 'date', baseUnit: 'month', showTickMarks: true, tickMarksInterval: 1, tickMarksColor: '#888888', unitInterval: 1, showGridLines: true, gridLinesInterval: 3, gridLinesColor: '#888888', valuesOnTicks: false }, colorScheme: 'scheme04', seriesGroups: [ { type: 'line', valueAxis: { unitInterval: 10, minValue: 0, maxValue: 100, displayValueAxis: true, description: 'Daily Closing Price', axisSize: 'auto', tickMarksColor: '#888888' }, series: [ { dataField: 'licencias_infractoras', displayText: 'Licencias Infractoras'}, { dataField: 'licencias_recuperadas', displayText: 'Licencias Recuperadas'}, { dataField: 'licencias_perdidas', displayText: 'Licencias Perdidas'} ] } ] };</script><table <tr> <td width="100%"> <script type="text/javascript"> $(document).ready(function () { //GRAFICO DE COLUMNAS PARA LOS PRECIOS RESPECTO DEL TOTAL DE ORDENES FRAUDULENTAS var source1 = [ { tipoGrafico: 'Total Fraudulentas', euros_a_recuperar: 100, euros_recuperados:60,euros_perdidos:30} ]; var dataAdapter1 = new $.jqx.dataAdapter(source1, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert('Error loading "' + source1.url + '" : ' + error);} }); settingsColumns.title="Evolucion de los euros"; settingsColumns.description="Respecto del total de ordenes infractoras"; settingsColumns.source = dataAdapter1; $('#jqxChartGlobalColumnEuros').jqxChart(settingsColumns); //GRAFICO DE COLUMNAS PARA LOS PRECIOS RESPECTO DE LAS ORDENES FRAUDULENTAS TRATADAS var source2 = [ { tipoGrafico: 'Fraudulentas Tratadas', euros_a_recuperar: 80 , euros_recuperados:60,euros_perdidos:30} ]; var dataAdapter2 = new $.jqx.dataAdapter(source2, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert('Error loading "' + source2.url + '" : ' + error);} }); settingsColumns.title="Evolucion de los euros"; settingsColumns.description="Respecto de las ordenes tratadas"; settingsColumns.source = dataAdapter2; $('#jqxChartParcialColumnEuros').jqxChart(settingsColumns); //GRAFICO DE LINEAS PARA EL HISTORICO var source= [ { fecha: '2013-01-01', licencias_infractoras: 80 , licencias_recuperadas:60,licencias_perdidas:30}, { fecha: '2013-02-01', licencias_infractoras: 50 , licencias_recuperadas:30,licencias_perdidas:20}, { fecha: '2013-03-01', licencias_infractoras: 100 , licencias_recuperadas:50,licencias_perdidas:10} ]; var dataAdapter = new $.jqx.dataAdapter(source, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error); } }); settingsLine.title="Historico"; settingsLine.source = dataAdapter; $('#jqxChartLine').jqxChart(settingsLine); }); </script> <table width="95%" border="0" align="center" cellpadding="0"cellspacing="0"> <thead align="left"><tr><th colspan="5" style="padding-left: 10%" ></th></tr></thead> <tbody> <tr bgcolor="ffffff"> <td colspan="5"> <div id='jqxChartGlobalColumnEuros' style="width: 680px; height: 300px; position: relative; left: 0px;top: 0px;"></div> </td> <td colspan="5"> <div id='jqxChartParcialColumnEuros' style="width: 680px; height: 300px; position: relative; left: 0px;top: 0px;"></div> </td> </tr> <tr bgcolor="ffffff"> <td colspan="5"> <div id='jqxChartLine' style="width:680px; height:400px; position: relative; left: 0px; top: 0px;"></div> </td> </tr> </tbody> </table> </td> </tr> </table>
I have the solution.
I have to delete the label: position:relation in every div, and Its works without problem.
<div id='jqxChartLine' style="width:680px; height:400px; position: relative; left: 0px; top: 0px;"></div>
-
AuthorPosts
Viewing 4 posts - 1 through 4 (of 4 total)
You must be logged in to reply to this topic.