jQWidgets Forums
jQuery UI Widgets › Forums › Chart › Show value labels on Chart
This topic contains 8 replies, has 2 voices, and was last updated by Nadezhda 10 years, 2 months ago.
-
Author
-
Hi,
I have a problem with my Chart. Like you see in the code i have created a chart with external data but now i want to show the value of point with the command “labels” just like i saw in the Chart “Line Marker Chart”.
I insert the command but my chart don’t show the labels. I don’t know if the problem are the APIs i have installed (because they’re too OLD. I’m using the APIs of 4 mounth ago) or something else.Code :
<link rel=”stylesheet” href=”jqwidgets/styles/jqx.base.css” type=”text/css” />
<script type=”text/javascript” src=”jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxdata.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxbuttons.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxscrollbar.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxdatatable.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxcheckbox.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxlistbox.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxdropdownlist.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxdraw.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxchart.core.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxchart.rangeselector.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxgauge.js”></script><!– Creazione della tabella raffigurante il rapporto tra il numero di macchine di GammaUfficio e Concorrenza –>
<script type=”text/javascript”>
$(document).ready(function () {
//funzione che consente il downolad del Chart in formato immagine
function getExportServer() {
return ‘http://www.jqwidgets.com/export_server/export.php’;
}// prepare the data
var source =
{
datatype: “json”,
datafields: [
{ name: ‘Mese’ },
{ name: ‘GammaUfficio’ },
{ name: ‘Concorrenza’ }
],
url: ‘Dashboard/GetParcoMacc’
};
var dataAdapter = new $.jqx.dataAdapter(source, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert(‘Error loading “‘ + source.url + ‘” : ‘ + error); } });
// setto i parametri del grafico
var settings = {
title: “Numero Parco Macchine”,
description: “MIF”,
enableAnimations: true,
showLegend: true,
padding: { left: 5, top: 5, right: 11, bottom: 5 },
titlePadding: { left: 0, top: 0, right: 0, bottom: 10 },
source: dataAdapter,
xAxis:
{
dataField: ‘Mese’,
//unitInterval: 1,
showGridLines: true,
valuesOnTicks: false,
labels: { visible: true},
//tickMarks: { visible: true, interval: 1 },
//con il seguente codice inserisco un range di valori ed uno schema che mi permetta di gestirlo sul grafico
rangeSelector: {
serieType: ‘area’,
padding: { left: 0, right: 0, top: 0, bottom: 0 },
// il metodo renderTo serve per inserire lo schema di gestione del periodo in un div separato dal grafico
renderTo: $(‘#RangeChart1’),
backgroundColor: ‘white’,
size: 70,
showGridLines: false
}},
seriesGroups:
[
{
type: ‘line’,
valueAxis:
{
//unitInterval: 5,
displayValueAxis: true,
//non dovrebbe servire in questa parte di codice il labels
labels: { visible: true},
description: ‘Numero Macchine’,
tickMarksColor: ‘#888888’
},
//———–
click: myEventHandler,
//———–
series: [
{ dataField: ‘GammaUfficio’, displayText: ‘Gamma Ufficio’, color: ‘#383838’, lineColor: ‘#383838’, symbolType: ‘square’, showToolTips: false, labels: { visible: true} },
{ dataField: ‘Concorrenza’, displayText: ‘Concorrenza’, color: ‘#ED1C24’, lineColor: ‘#ED1C24’, symbolType: ‘square’, showToolTips: false }
]
}
]
};
//creazione evento per visualizzazione dati
function myEventHandler(e) {
var eventData = ‘ ‘ + e.serie.dataField + ‘ device: ‘ + e.elementValue;
$(‘#eventTextLine1’).html(eventData);
};
//—————————————
// Setup del grafico
$(‘#Row1Chart1’).jqxChart(settings);//Esportazione del grafico in PNG
$(“#pngGetParcMacc”).jqxButton({});
$(“#pngGetParcMacc”).click(function () {
// call the export server to create a PNG image
$(‘#Row1Chart1’).jqxChart(‘saveAsPNG’, ‘Parco Macchine.png’, getExportServer());
});});
</script>
Hello LeoSquall,
Here is an example where labels are visible with your settings. If this example does not shows you the labels, I would suggest you to download the latest version of jQWidgets (3.7.0).
<!DOCTYPE html> <html lang="en"> <head> <title></title> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxchart.core.js"></script> <script type="text/javascript"> $(document).ready(function () { // prepare chart data as an array var sampleData = [ { Day: 'Monday', Running: 30, Swimming: 10, Cycling: 25, Goal: 40 }, { Day: 'Tuesday', Running: 25, Swimming: 15, Cycling: 10, Goal: 50 }, { Day: 'Wednesday', Running: 30, Swimming: 10, Cycling: 25, Goal: 60 }, { Day: 'Thursday', Running: 40, Swimming: 20, Cycling: 25, Goal: 40 }, { Day: 'Friday', Running: 45, Swimming: 20, Cycling: 25, Goal: 50 }, { Day: 'Saturday', Running: 30, Swimming: 20, Cycling: 30, Goal: 60 }, { Day: 'Sunday', Running: 20, Swimming: 30, Cycling: 10, Goal: 90 } ]; // prepare jqxChart settings var settings = { title: "Fitness & exercise weekly scorecard", description: "Time spent in vigorous exercise by activity", enableAnimations: true, showLegend: true, padding: { left: 10, top: 10, right: 15, bottom: 10 }, titlePadding: { left: 90, top: 0, right: 0, bottom: 10 }, source: sampleData, colorScheme: 'scheme05', xAxis: { dataField: 'Day', unitInterval: 1, tickMarks: { visible: true, interval: 1 }, gridLinesInterval: { visible: true, interval: 1 }, valuesOnTicks: false, padding: { bottom: 10 } }, valueAxis: { unitInterval: 10, minValue: 0, maxValue: 50, title: { text: 'Time in minutes<br><br>' }, labels: { horizontalAlignment: 'right' } }, seriesGroups: [ { type: 'line', series: [ { dataField: 'Swimming', symbolType: 'square', labels: { visible: true, } }, { dataField: 'Running', symbolType: 'square', labels: { visible: true, } } ] } ] }; // setup the chart $('#chartContainer').jqxChart(settings); }); </script> </head> <body class='default'> <div id='chartContainer' style="width:850px; height:500px"> </div> </body> </html>Best Regards,
NadezhdajQWidgets team
http://www.jqwidgets.com/I’ve tried this way but nothing change. I see Chart without the labels.
I downloaded the last version of jQWidgets (3.7.0) and I load the .js files and .css too; then when I start the project the chart will not appear. I see only a white section where the chart would be.Any suggestion?
Thanks,
Best RegardsHi LeoSquall,
Do you update all your jQWidgets files to version 3.7.0? You need to update all files not only .js and .css. Please also make sure you are using correct paths to script references on your page.
Best Regards,
NadezhdajQWidgets team
http://www.jqwidgets.com/Hi Nadezhda,
I downloaded the jqwidgets-ver3.7.1 and i imported in my project the directories “jqwidgets”, “scripts” and “styles” but i have the same problem… I don’t see my chart. The path are correct because i overwrite the old files with the newest of the version 3.7.1.
Best Regards
I notice another thing. I use 5 charts and 1 gauge. The gauge will appear and it work perfectly instead the chats not. What is the problem?
Thanks
Hi LeoSquall,
Do you use the charts and gauge on the same page? Please, provide us with full example so we can test to determine the source of the issue. Remember to format your code by selecting it and clicking the code button in the toolbar.
Best Regards,
NadezhdajQWidgets team
http://www.jqwidgets.com/<link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" /> <!--<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>--> <script type="text/javascript" src="jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="jqwidgets/jqxchart.core.js"></script> <script type="text/javascript" src="jqwidgets/jqxchart.rangeselector.js"></script> <script type="text/javascript" src="jqwidgets/jqxgauge.js"></script> <!-- Gauge Chart per la visualizzazione dello stato del contratto (buono/incerto/in perdita) --> <script type="text/javascript"> $(document).ready(function () { var labels = { visible: false, position: 'inside' }; var val; //codice che prende dal file Dashboard il valore assegnato alla punta del cruscotto var source = { datatype: "json", datafields: [ { name: 'Valore' } ], url: 'Dashboard/GetCruscotto' }; var dataAdapter = new $.jqx.dataAdapter(source, { autoBind: true, async: false, downloadComplete: function () { }, loadComplete: function (_cruscottoList) { var lista = _cruscottoList[0]; val = lista.Valore; }, loadError: function () { } }); //------------------------------------------ //Creazione del grafico $('#gauge').jqxGauge({ //Definizione dei range dei valori ranges: [{ startValue: 0, endValue: 40, style: { fill: '#ff0000', stroke: '#ff0000' }, endWidth: 40, startWidth: 40 }, { startValue: 40, endValue: 80, style: { fill: '#ffff00', stroke: '#ffff00' }, endWidth: 40, startWidth: 40 }, { startValue: 80, endValue: 220, style: { fill: '#00e600', stroke: '#e2e2e2' }, endWidth: 40, startWidth: 40 } ], cap: { radius: 1 }, //inserimento dell'etichetta caption: { offset: [0, -20], value: 'Gamma Ufficio', position: 'bottom' }, style: { stroke: '#ffffff', 'stroke-width': '1px', fill: '#ffffff' }, animationDuration: 1500, labels: labels, ticksMinor: { interval: 5, size: '5%', visible: false }, ticksMajor: { interval: 10, size: '9%', visible: false } }); //metodi per caricare il valore della punta tramite la variabile definita nel file Dashboard $('#gauge').val(val); $('#gauge').jqxGauge('setValue', val); }); </script> <!-- Script per la creazione della tabella --> <script type="text/javascript"> $(document).ready(function () { // prepare the data var source = { dataType: "json", dataFields: [ { name: 'Mese', type: 'string' }, //Numero di Macchine e Pagine totali {name: 'MacchineT', type: 'string' }, { name: 'PagineT', type: 'string' }, //Numero di Macchine e Pagine di Gamma Ufficio {name: 'MacchineG', type: 'string' }, { name: 'PagineG', type: 'string' }, //Numero di Macchine e Pagine Concorrenza {name: 'MacchineC', type: 'string' }, { name: 'PagineC', type: 'string' }, //Numero di Macchine e Pagine in Percentuale sul rapporto tra Gamma Ufficio e Concorrenza {name: 'MacchineP', type: 'string' }, { name: 'PagineP', type: 'string' }, //Anno {name: 'Anno', type: 'number' } ], url: 'Dashboard/GetTabella' }; var dataAdapter = new $.jqx.dataAdapter(source, { formatData: function (data) { return "{}"; } }); //colorazione delle colonne var cellClass = function (row, dataField, cellText, rowData) { switch (dataField) { case "MacchineG": return "nero"; case "PagineG": return "nero"; case "MacchineC": return "rosso"; case "PagineC": return "rosso"; } } // creazione tabella $("#dataTable").jqxDataTable( { source: dataAdapter, pageSize: 12, pageable: true, altrows: true, filterable: true, incrementalSearch: true, columnsresize: false, width: '100%', //Nasconde alla vista dell'interfaccia la colonna ma mantiene attivo il riferimento cosi da poter effettuare il Serach senza visualizzare la colonna //ready: function () { $("#dataTable").jqxDataTable('hideColumn', 'Anno') }, //all'interno delle varie colonne setto a false per togliere dai filtri e dalla sezione ricerca determinati campi (per la precisione, quelli in cui vi è inserito il suddetto tag) //il tag cellClassName serve per permettere alla funzione sopra citata di contrassegnare quali saranno i campi da colorare columns: [ { text: 'Mese', cellsAlign: 'center', align: 'center', dataField: 'Mese', width: '45px' }, { text: 'Macchine', columngroup: 'TotaleT', cellsAlign: 'center', align: 'center', dataField: 'MacchineT', /*width: '10%',*/filterable: false }, { text: 'Pagine', columngroup: 'TotaleT', dataField: 'PagineT', /*cellsformat: 'd',*/cellsAlign: 'center', align: 'center', /*width: '10%',*/filterable: false }, { text: 'Macchine', columngroup: 'TotaleG', dataField: 'MacchineG', /* cellsformat: 'c2',*/align: 'center', cellsAlign: 'center', /*width: '40px',*/filterable: false, cellClassName: cellClass }, { text: 'Pagine', columngroup: 'TotaleG', cellsAlign: 'center', align: 'center', dataField: 'PagineG', /*width: '10%',*/filterable: false, cellClassName: cellClass }, { text: 'Macchine', columngroup: 'TotaleC', dataField: 'MacchineC', /*cellsformat: 'c2',*/align: 'center', cellsAlign: 'center', /*width: '40px',*/filterable: false, cellClassName: cellClass }, { text: 'Pagine', columngroup: 'TotaleC', cellsAlign: 'center', align: 'center', dataField: 'PagineC', /*width: '10%',*/filterable: false, cellClassName: cellClass }, { text: 'Macchine', columngroup: 'Presenza', dataField: 'MacchineP', /*cellsformat: 'c2',*/align: 'center', cellsAlign: 'center', /*width: '40px',*/filterable: false }, { text: 'Pagine', columngroup: 'Presenza', cellsAlign: 'center', align: 'center', dataField: 'PagineP', /*width: '40px',*/filterable: false }, { text: 'Anno', dataField: 'Anno', hidden: true }, ], //ragruppamento di campi columnGroups: [ { text: 'Totale ', align: 'center', name: 'TotaleT' }, { text: 'Gamma Ufficio', align: 'center', name: 'TotaleG' }, { text: 'Concorrenza', align: 'center', name: 'TotaleC' }, { text: 'Presenza', align: 'center', name: 'Presenza' } ] }); }); </script> <!-- Creazione della tabella raffigurante il rapporto tra il numero di macchine di GammaUfficio e Concorrenza --> <script type="text/javascript"> $(document).ready(function () { //funzione che consente il downolad del Chart in formato immagine function getExportServer() { return 'http://www.jqwidgets.com/export_server/export.php'; } // prepare the data var source = { datatype: "json", datafields: [ { name: 'Mese' }, { name: 'GammaUfficio' }, { name: 'Concorrenza' } ], url: 'Dashboard/GetParcoMacc' }; var dataAdapter = new $.jqx.dataAdapter(source, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error); } }); // setto i parametri del grafico var settings = { title: "Numero Parco Macchine", description: "MIF", enableAnimations: true, showLegend: true, padding: { left: 5, top: 5, right: 11, bottom: 5 }, titlePadding: { left: 0, top: 0, right: 0, bottom: 10 }, source: dataAdapter, xAxis: { dataField: 'Mese', //unitInterval: 1, showGridLines: true, valuesOnTicks: false, //tickMarks: { visible: true, interval: 1 }, //con il seguente codice inserisco un range di valori ed uno schema che mi permetta di gestirlo sul grafico rangeSelector: { serieType: 'area', padding: { left: 0, right: 0, top: 0, bottom: 0 }, // il metodo renderTo serve per inserire lo schema di gestione del periodo in un div separato dal grafico renderTo: $('#RangeChart1'), backgroundColor: 'white', size: 70, showGridLines: false } }, seriesGroups: [ { type: 'line', valueAxis: { //unitInterval: 5, displayValueAxis: true, description: 'Numero Macchine', tickMarksColor: '#888888' }, //----------- click: myEventHandler, //----------- series: [ { dataField: 'GammaUfficio', displayText: 'Gamma Ufficio', color: '#383838', lineColor: '#383838', symbolType: 'square', showToolTips: false}, { dataField: 'Concorrenza', displayText: 'Concorrenza', color: '#ED1C24', lineColor: '#ED1C24', symbolType: 'square', showToolTips: false} ] } ] }; //creazione evento per visualizzazione dati function myEventHandler(e) { var eventData = ' ' + e.serie.dataField + ' device: ' + e.elementValue; $('#eventTextLine1').html(eventData); }; //--------------------------------------- // Setup del grafico $('#Row1Chart1').jqxChart(settings); //Esportazione del grafico in PNG $("#pngGetParcMacc").jqxButton({}); $("#pngGetParcMacc").click(function () { // call the export server to create a PNG image $('#Row1Chart1').jqxChart('saveAsPNG', 'Parco Macchine.png', getExportServer()); }); }); </script> <!-- Creazione della tabella raffigurante il rapporto tra la Presenza di macchine di GammaUfficio e Concorrenza --> <script type="text/javascript"> $(document).ready(function () { //funzione che consente il downolad del Chart in formato immagine function getExportServer() { return 'http://www.jqwidgets.com/export_server/export.php'; } var source = { datatype: "json", datafields: [ { name: 'Mese' }, { name: 'GammaUfficio' }, { name: 'Concorrenza' } ], url: 'Dashboard/GetPresenzaMacc' }; var dataAdapter = new $.jqx.dataAdapter(source, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error); } }); var settings = { title: "Presenza Macchine", description: "MIF", showLegend: true, enableAnimations: true, padding: { left: 5, top: 5, right: 5, bottom: 5 }, titlePadding: { left: 0, top: 0, right: 0, bottom: 10 }, source: dataAdapter, xAxis: { dataField: 'Mese', showGridLines: true }, seriesGroups: [ { type: 'stackedcolumn100', //cambia l'orientamento delle barre //orientation: 'horizontal', valueAxis: { displayValueAxis: true, description: 'Presenza in %' }, //evento attivabile tramite click del mouse click: myEventHandler, series: [ { dataField: 'GammaUfficio', displayText: 'Gamma Ufficio', color: '#383838', lineColor: '#383838', showToolTips: false }, { dataField: 'Concorrenza', displayText: 'Concorrenza', color: '#ED1C24', lineColor: '#ED1C24', showToolTips: false } ] }, ] }; //creazione evento per visualizzazione dati function myEventHandler(e) { var eventData = ' ' + e.serie.dataField + ' device: ' + e.elementValue + '%'; $('#eventText1').html(eventData); }; // Setup del grafico $('#Row1Chart2').jqxChart(settings); //Esportazione del grafico in PNG $("#pngGetPresenzaMacc").jqxButton({}); $("#pngGetPresenzaMacc").click(function () { // call the export server to create a PNG image $('#Row1Chart2').jqxChart('saveAsPNG', 'PresenzaMacchine.png', getExportServer()); }); }); </script> <!-- Creazione della tabella raffigurante il rapporto tra pagine Bianco/Nero e a Colori per Gamma Ufficio --> <script type="text/javascript"> $(document).ready(function () { //funzione che consente il downolad del Chart in formato immagine function getExportServer() { return 'http://www.jqwidgets.com/export_server/export.php'; } // prepare the data var source = { datatype: "json", datafields: [ { name: 'Mese' }, { name: 'Pagine_BN' }, { name: 'Pagine_Colori' } ], url: 'Dashboard/GetPagineBNCOL' }; var dataAdapter = new $.jqx.dataAdapter(source, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error); } }); var settings = { title: "Rapporto Pagine B/N e Colori Gamma Ufficio", description: "", enableAnimations: true, showLegend: true, padding: { left: 10, top: 5, right: 10, bottom: 5 }, titlePadding: { left: 0, top: 0, right: 0, bottom: 10 }, source: dataAdapter, xAxis: { dataField: 'Mese', valuesOnTicks: false, unitInterval: 1, showGridLines: true, rangeSelector: { serieType: 'area', padding: { left: 0, right: 0, top: 0, bottom: 0 }, renderTo: $('#RangeChart3'), backgroundColor: 'white', size: 70, showGridLines: false } }, seriesGroups: [ { type: 'line', valueAxis: { //unitInterval: 20000, displayValueAxis: true, description: 'Numero Pagine' }, click: myEventHandler, series: [ { dataField: 'Pagine_BN', displayText: 'Pagine B/N', color: '#9d9d9d', lineColor: '#9d9d9d', symbolType: 'square', showToolTips: false }, { dataField: 'Pagine_Colori', displayText: 'Pagine Colori', color: '#000089', lineColor: '#000089', symbolType: 'square', showToolTips: false } ] } ] }; //creazione evento per visualizzazione dati function myEventHandler(e) { var eventData = ' ' + e.serie.dataField + ' : ' + e.elementValue; $('#eventText3').html(eventData); }; // Setup the chart $('#Row3Chart1').jqxChart(settings); //Esportazione del grafico in PNG $("#pngGetPagineBNCOL").jqxButton({}); $("#pngGetPagineBNCOL").click(function () { // call the export server to create a PNG image $('#Row3Chart1').jqxChart('saveAsPNG', 'PagineBNCOL.png', getExportServer()); }); }); </script> <!-- Seconda sezione di Grafici che rappresentano i dati relativi alle pagine --> <!-- Creazione della tabella raffigurante il rapporto tra il numero di pagine di GammaUfficio e Concorrenza --> <script type="text/javascript"> $(document).ready(function () { //funzione che consente il downolad del Chart in formato immagine function getExportServer() { return 'http://www.jqwidgets.com/export_server/export.php'; } var source = { datatype: "json", datafields: [ { name: 'Mese' }, { name: 'GammaUfficio' }, { name: 'Concorrenza' } ], url: 'Dashboard/GetProdPagine' }; var dataAdapter = new $.jqx.dataAdapter(source, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error); } }); var settings = { title: "Produzione Mensile Pagine", description: "VOLUMI", enableAnimations: true, showLegend: true, padding: { left: 5, top: 5, right: 11, bottom: 5 }, titlePadding: { left: 10, top: 0, right: 0, bottom: 10 }, source: dataAdapter, xAxis: { dataField: 'Mese', unitInterval: 1, showGridLines: true, valuesOnTicks: false, //con il seguente codice inserisco un range di valori ed uno schema che mi permetta di gestirlo sul grafico rangeSelector: { serieType: 'area', padding: { left: 0, right: 0, top: 0, bottom: 0 }, // Uncomment the line below to render the selector in a separate container renderTo: $('#RangeChart2'), //backgroundColor: 'white', size: 70, showGridLines: false, } }, //colorScheme: 'scheme01', seriesGroups: [ { type: 'line', valueAxis: { //unitInterval: 25000, displayValueAxis: true, description: 'Numero Pagine', tickMarksColor: '#888888' }, //----------- //mouseover: myEventHandler, //mouseout: myEventHandler, click: myEventHandler, //----------- series: [ { dataField: 'GammaUfficio', displayText: 'Gamma Ufficio', color: '#383838', lineColor: '#383838', symbolType: 'square', showToolTips: false }, { dataField: 'Concorrenza', displayText: 'Concorrenza', color: '#ED1C24', lineColor: '#ED1C24', symbolType: 'square', showToolTips: false } ] } ] }; //creazione evento per visualizzazione dati function myEventHandler(e) { var eventData = ' ' + e.serie.dataField + ' pagine: ' + e.elementValue; $('#eventTextLine2').html(eventData); }; //--------------------------------------- // setup the chart $('#Row2Chart1').jqxChart(settings); //Esportazione del grafico in PNG $("#pngGetProdPagine").jqxButton({}); $("#pngGetProdPagine").click(function () { // call the export server to create a PNG image $('#Row2Chart1').jqxChart('saveAsPNG', 'ProduzionePagine.png', getExportServer()); }); }); </script> <!-- Creazione della tabella raffigurante il rapporto tra la Presenza di macchine di GammaUfficio e Concorrenza --> <script type="text/javascript"> $(document).ready(function () { //funzione che consente il downolad del Chart in formato immagine function getExportServer() { return 'http://www.jqwidgets.com/export_server/export.php'; } // prepare chart data as an array var source = { datatype: "json", datafields: [ { name: 'Mese' }, { name: 'GammaUfficio' }, { name: 'Concorrenza' } ], url: 'Dashboard/GetPresenzaPagine' }; var dataAdapter = new $.jqx.dataAdapter(source, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error); } }); // prepare jqxChart settings var settings = { title: "Presenza Pagine", description: "VOLUMI", showLegend: true, enableAnimations: true, padding: { left: 5, top: 5, right: 5, bottom: 5 }, titlePadding: { left: 0, top: 0, right: 0, bottom: 10 }, source: dataAdapter, xAxis: { dataField: 'Mese', showGridLines: true }, //colorScheme: 'scheme01', seriesGroups: [ { type: 'stackedcolumn100', //cambia l'orientamento delle barre //orientation: 'horizontal', //columnsGapPercent: 50, valueAxis: { displayValueAxis: true, description: 'Presenza in %' }, click: myEventHandler, //----------- series: [ { dataField: 'GammaUfficio', displayText: 'Gamma Ufficio', color: '#383838', lineColor: '#383838', showToolTips: false }, { dataField: 'Concorrenza', displayText: 'Concorrenza', color: '#ED1C24', lineColor: '#ED1C24', showToolTips: false } ] }, ] }; //creazione evento per visualizzazione dati function myEventHandler(e) { var eventData = ' ' + e.serie.dataField + ' pagine: ' + e.elementValue + '%'; $('#eventText2').html(eventData); }; //--------------------------------------- // setup the chart $('#Row2Chart2').jqxChart(settings); //Esportazione del grafico in PNG $("#pngGetPresenzaPagine").jqxButton({}); $("#pngGetPresenzaPagine").click(function () { // call the export server to create a PNG image $('#Row2Chart2').jqxChart('saveAsPNG', 'PresenzaPagine.png', getExportServer()); }); }); </script> <script type="text/javascript"> $(document).ready(function () { //funzione che consente il downolad del Chart in formato immagine function getExportServer() { return 'http://www.jqwidgets.com/export_server/export.php'; } //Esportazione del grafico in PNG $("#pngAllPages").jqxButton({}); $("#pngAllPages").click(function () { $('#Row1Chart1').jqxChart('saveAsPNG', 'Macchine.png', getExportServer()); //$('#Row1Chart2').jqxChart('saveAsPNG', 'Grafici.png', getExportServer()); setTimeout(function () { $('#Row1Chart2').jqxChart('saveAsPNG', 'PresenzaMacchine.png', getExportServer()); }, 3000); //$('#Row2Chart1').jqxChart('saveAsPNG', 'Grafici.png', getExportServer()); setTimeout(function () { $('#Row2Chart1').jqxChart('saveAsPNG', 'Pagine.png', getExportServer()); }, 6000); //$('#Row2Chart2').jqxChart('saveAsPNG', 'Grafici.png', getExportServer()); setTimeout(function () { $('#Row2Chart2').jqxChart('saveAsPNG', 'PresenzaPagine.png', getExportServer()); }, 12000); //$('#Row3Chart1').jqxChart('saveAsPNG', 'Grafici.png', getExportServer()); setTimeout(function () { $('#Row3Chart1').jqxChart('saveAsPNG', 'PagineBNCOL.png', getExportServer()); }, 15000); }); }); </script> <style> .nero { color: White; background-color: #383838; } .rosso { color: Black; background-color: #ed1c24; } #div1 { height: 430px; } #div2 { width: 10px; height: 30px; } #div3 { width: 10px; height: 30px; } #divroot { margin-left: 10px; margin-right: 10px; } </style> <div id="divroot"> <br /> <div id="gauge" style=" margin: 0 auto"></div> <div id="div3"></div> <div id="dataTable" style="min-width: 580px; max-width: 1200px"></div> <div id="div3"></div> <div> <!-- prima riga di grafici --> <div id="div1" style=" border-right: 30px"> <div class="container" style=" min-width: 580px; max-width: 1200px; height: 430px; float: left; padding-right: 15px"> <ul style="list-style-type: none; margin: 0px; padding: 0px"> <li class="container" id="Row1Chart1" style="min-width: 580px; max-width: 1200px; height:310px"></li> <li class="container" id="RangeChart1" style="min-width: 580px; max-width: 1200px; height:70px"></li> <li class="container" id="eventTextLine1" style="min-width: 580px; max-width: 1200px; height:20px"></li> <li><input style='float: right; margin-left: 5px;' id="pngGetParcMacc" type="button" value="Salva come PNG" /></li> </ul> </div> <div id="div2" style="float:left"></div> <div class="container" style=" min-width: 580px; max-width: 1200px; height: 430px; float: left; padding-right: 15px"> <ul style="list-style-type: none; margin: 0px; padding: 0px"> <li class="container" id="Row1Chart2" style="min-width: 580px; max-width: 1200px; height:380px"></li> <li class="container" id="eventText1" style="min-width: 580px; max-width: 1200px; height:20px"></li> <li><input style='float: right; margin-left: 5px;' id="pngGetPresenzaMacc" type="button" value="Salva come PNG" /></li> </ul> </div> </div> <!-- seconda riga di grafici --> <div id="div1"> <div class="container" style="min-width: 580px; max-width: 1200px; height: 430px; float:left; padding-right: 15px"> <ul style=" list-style-type: none; margin: 0px; padding: 0px"> <li class="container" id="Row2Chart1" style=" min-width: 580px; max-width: 1200px; height: 310px"></li> <li class="container" id="RangeChart2" style=" min-width: 580px; max-width: 1200px; height: 70px"></li> <li class="container" id="eventTextLine2" style=" min-width: 580px; max-width: 1200px; height: 20px"></li> <li><input style='float: right; margin-left: 5px;' id="pngGetProdPagine" type="button" value="Salva come PNG" /></li> </ul> </div> <div id="div2" style="float:left"></div> <div class="container" style="min-width: 580px; max-width: 1200px; height:430px; float:left; padding-right: 15px"> <ul style="list-style-type: none; margin: 0px; padding: 0px"> <li class="container" id="Row2Chart2" style="min-width: 580px; max-width: 1200px; height:380px"></li> <li class="container" id="eventText2" style="min-width: 580px; max-width: 1200px; height:20px"></li> <li><input style='float: right; margin-left: 5px;' id="pngGetPresenzaPagine" type="button" value="Salva come PNG" /></li> </ul> </div> </div> <div style=" clear:both"></div> <!-- terza riga di grafici --> <div id="div1" > <div class="container" style="min-width: 580px; max-width: 1200px; height:430px; padding-right: 15px; margin: 0 auto"> <ul style="list-style-type: none; margin: 0px; padding: 0px"> <li class="container" id="Row3Chart1" style="min-width: 580px; max-width: 1200px; height:310px"></li> <li class="container" id="RangeChart3" style=" min-width: 580px; max-width: 1200px; height:70px"></li> <li class="container" id="eventText3" style="min-width: 580px; max-width: 1200px; height:30px"></li> <li><input style='float: right; margin-left: 5px;' id="pngGetPagineBNCOL" type="button" value="Salva come PNG" /></li> </ul> </div> </div> </div> <input style='float: left; margin-left: 5px; height: 30px;' id="pngAllPages" type="button" value="Esporta Grafici" /> </div> </asp:Content>Hi LeoSquall,
In the above example you are using some incorrect property names- ‘altrows’ should be ‘altRows’ and ‘columnsresize’ should be ‘columnsResize’.
In the following linevar labels = { visible: false, position: 'inside' };you are set label visibility to false. Please, set ‘visible’ property to true and check if chart label will be visible.Best Regards,
NadezhdajQWidgets team
http://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.