jQWidgets Forums
Forum Replies Created
Viewing 9 posts - 1 through 9 (of 9 total)
-
Author
-
<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>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 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
February 19, 2015 at 1:19 pm in reply to: Show value labels on Chart Show value labels on Chart #67369I’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 RegardsDecember 12, 2014 at 9:47 am in reply to: Export more chart with one button Export more chart with one button #64141I used a high time values in the timeout and it work. I don’t know why but now with this time values it finally work:
Chart1: —
Chart2: 3000
Chart3: 6000
Chart4: 12000
Chart5: 15000if I used a lesser values 1 of the charts will be lost during the process. Can you verify please?
Thanks for your help
December 11, 2014 at 2:27 pm in reply to: Export more chart with one button Export more chart with one button #64121Hi,
I used your method with timeout but if I use 3 or more charts the code export the first and the last. I also tried with different time values without success… Here the code I used in my project :
$(document).ready(function () {
function getExportServer() {
return ‘http://www.jqwidgets.com/export_server/export.php’;
}$(“#pngAllPages”).jqxButton({});
$(“#pngAllPages”).click(function () {
$(‘#Chart1’).jqxChart(‘saveAsPNG’, ‘Chart1.png’, getExportServer());
setTimeout(function () {
$(‘#Chart2’).jqxChart(‘saveAsPNG’, ‘Chart2.png’, getExportServer());
}, 500);
setTimeout(function () {
$(‘#Chart3’).jqxChart(‘saveAsPNG’, ‘Chart3.png’, getExportServer());
}, 1000);
setTimeout(function () {
$(‘#Chart4’).jqxChart(‘saveAsPNG’, ‘Chart4.png’, getExportServer());
}, 1500);
setTimeout(function () {
$(‘#Chart5’).jqxChart(‘saveAsPNG’, ‘Chart5.png’, getExportServer());
}, 2000);
});
});Thanks
December 9, 2014 at 1:32 pm in reply to: Export more chart with one button Export more chart with one button #63959Hi,
I tried this way but the function will export only the last chart i define in the function.
here is my solution that i’ve copied from your tip:
$(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’, ‘Grafici.png’, getExportServer());
$(‘#Row1Chart2’).jqxChart(‘saveAsPNG’, ‘Grafici.png’, getExportServer());
$(‘#Row2Chart1’).jqxChart(‘saveAsPNG’, ‘Grafici.png’, getExportServer());
$(‘#Row2Chart2’).jqxChart(‘saveAsPNG’, ‘Grafici.png’, getExportServer());
$(‘#Row3Chart1’).jqxChart(‘saveAsPNG’, ‘Grafici.png’, getExportServer());
});});
Hi,
I have a last question. Can I enable the scroll on the chart when i use my ipad or smartphone? Because when i try to scroll the page and I touch the chart with my finger the page don’t scroll. If is it possible can you tell me how to do it please?Best Regards
Hi,
thanks for the fast answer. I’ll hope to see a solution for the size’s symbols in the next version.Best Regards
-
AuthorPosts
Viewing 9 posts - 1 through 9 (of 9 total)