Search the Community
Showing results for tags 'gannt chart'.
Found 2 results
-
Fusion Charts - Gannt chart and 2D Scroll chart not working on same page
SPyder posted a topic in Javascript Problems
I was trying to validate the fusion charts product before i can go to my management for purchasing the product. I was trying to render two graphs on same page one gannt chart and other scroll chart. But only the one loaded first is rendering while other isn't. Attatched are html code . Can some one let me know whats wrong here ? <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> </head> <body> <div id="chart-container">This is Gannt</div> <div id="container">This is 2d Mixed chart expected</div> <script src="js/fusioncharts.js"></script> <script src="js/fusioncharts.widgets.js"></script> <script src="js/scroll2d.js"></script> <script src="js/ganntchart.js"></script> </body> </html> ganntchart.js const dataSource = { chart: { dateformat: "mm/dd/yyyy", theme: "fusion", useverticalscrolling: "0" }, datatable: { headervalign: "bottom", datacolumn: [ { headertext: "Owner", headervalign: "bottom", headeralign: "left", align: "left", text: [ { label: "Product Team" }, { label: "Marketing Team" }, { label: "Product Team" }, { label: "Dev Team" }, { label: "Design Team" }, { label: "Dev Team" }, { label: "QA Team" }, { label: "Product Team" }, { label: "Marketing Team" } ] } ] }, tasks: { task: [ { start: "1/1/2018", end: "1/13/2018", color: "#5D62B5" }, { start: "1/4/2018", end: "1/21/2018", color: "#29C3BE" }, { start: "1/22/2018", end: "2/4/2018", color: "#5D62B5" }, { start: "2/5/2018", end: "2/11/2018", color: "#F2726F" }, { start: "2/12/2018", end: "2/18/2018", color: "#FFC533" }, { start: "2/19/2018", end: "3/11/2018", color: "#F2726F" }, { start: "3/12/2018", end: "3/18/2018", color: "#62B58F" }, { start: "3/16/2018", end: "3/23/2018", color: "#5D62B5" }, { start: "3/24/2018", end: "3/29/2018", color: "#29C3BE" } ] }, processes: { align: "left", headertext: "Tasks", headervalign: "bottom", headeralign: "left", process: [ { label: "PRD & User-Stories" }, { label: "Persona & Journey" }, { label: "Architecture" }, { label: "Prototyping" }, { label: "Design" }, { label: "Development" }, { label: "Testing & QA" }, { label: "UAT Test" }, { label: "Handover & Documentation" } ] }, categories: [ { category: [ { start: "1/1/2018", end: "4/1/2018", label: "Project Pipeline for Q1-2018" } ] }, { category: [ { start: "1/1/2018", end: "1/31/2018", label: "Jan" }, { start: "2/1/2018", end: "2/28/2018", label: "Feb" }, { start: "3/1/2018", end: "4/1/2018", label: "Mar" } ] }, { category: [ { start: "1/1/2018", end: "1/7/2018", label: "Week 1" }, { start: "1/8/2018", end: "1/14/2018", label: "Week 2" }, { start: "1/15/2018", end: "1/21/2018", label: "Week 3" }, { start: "1/22/2018", end: "1/28/2018", label: "Week 4" }, { start: "1/29/2018", end: "2/4/2018", label: "Week 5" }, { start: "2/5/2018", end: "2/11/2018", label: "Week 6" }, { start: "2/12/2018", end: "2/18/2018", label: "Week 7" }, { start: "2/19/2018", end: "2/25/2018", label: "Week 8" }, { start: "2/26/2018", end: "3/4/2018", label: "Week 9" }, { start: "3/5/2018", end: "3/11/2018", label: "Week 10" }, { start: "3/12/2018", end: "3/18/2018", label: "Week 11" }, { start: "3/19/2018", end: "3/25/2018", label: "Week 12" }, { start: "3/26/2018", end: "4/1/2018", label: "Week 13" } ] } ] }; FusionCharts.ready(function() { var myChart = new FusionCharts({ type: "gantt", renderAt: "chart-container", width: "100%", height: "100%", dataFormat: "json", dataSource }).render(); }); scroll2d.js const dataSource = { chart: { caption: "Analysing Subsidies by Youth Population", subcaption: "By province", yaxisname: "Population Count", syaxisname: "Subsidies % of Income", labeldisplay: "rotate", snumbersuffix: "%", scrollheight: "10", numvisibleplot: "10", drawcrossline: "1", theme: "candy" }, categories: [ { category: [ { label: "Matzikama" }, { label: "Cederberg" }, { label: "Bergrivier" }, { label: "Saldanha Bay" }, { label: "Swartland" }, { label: "Witzenberg" }, { label: "Drakenstein" }, { label: "Stellenbosch" }, { label: "Breede Valley" }, { label: "Langeberg" }, { label: "Swellendam" }, { label: "Theewaterskloof" }, { label: "Overstrand" }, { label: "Cape Agulhas" }, { label: "Kannaland" }, { label: "Hessequa" }, { label: "Mossel Bay" }, { label: "George" }, { label: "Oudtshoorn" }, { label: "Bitou" }, { label: "Knysna" }, { label: "Laingsburg" }, { label: "Prince Albert" }, { label: "Beaufort West" } ] } ], dataset: [ { seriesname: "Total Population", plottooltext: "Population: $dataValue", data: [ { value: "71045" }, { value: "52949" }, { value: "67474" }, { value: "111173" }, { value: "133762" }, { value: "130548" }, { value: "280195" }, { value: "173419" }, { value: "176578" }, { value: "105483" }, { value: "40211" }, { value: "117109" }, { value: "93466" }, { value: "36000" }, { value: "24168" }, { value: "54237" }, { value: "94135" }, { value: "208237" }, { value: "97509" }, { value: "59157" }, { value: "73835" }, { value: "8895" }, { value: "14272" }, { value: "51080" } ] }, { seriesname: "Youth", renderas: "area", showanchors: "0", plottooltext: "Youth: $dataValue", data: [ { value: "24598" }, { value: "18302" }, { value: "22162" }, { value: "40696" }, { value: "47420" }, { value: "49981" }, { value: "97230" }, { value: "73162" }, { value: "60668" }, { value: "34594" }, { value: "12567" }, { value: "39907" }, { value: "30681" }, { value: "11323" }, { value: "7801" }, { value: "15785" }, { value: "31478" }, { value: "72762" }, { value: "32301" }, { value: "21401" }, { value: "27863" }, { value: "3254" }, { value: "5562" }, { value: "19047" } ] }, { seriesname: "Subsidies received %", parentyaxis: "S", renderas: "line", plottooltext: "$dataValue subsidies received", showvalues: "0", data: [ { value: "28.0" }, { value: "35.2" }, { value: "23.9" }, { value: "11.8" }, { value: "18.0" }, { value: "26.9" }, { value: "11.1" }, { value: "11.2" }, { value: "24.0" }, { value: "18.9" }, { value: "35.6" }, { value: "37.9" }, { value: "12.9" }, { value: "27.6" }, { value: "40.5" }, { value: "19.9" }, { value: "15.6" }, { value: "28.2" }, { value: "23.3" }, { value: "26.2" }, { value: "16.9" }, { value: "41.9" }, { value: "62.1" }, { value: "31.2" } ] } ] }; FusionCharts.ready(function () { var myChart = new FusionCharts({ type: "scrollcombidy2d", renderAt: "container", width: "100%", height: "100%", dataFormat: "json", dataSource }).render(); }); -
How to export the gannt chart in excel file ? Is it possible ? Meeran.Y