SPyder

Members
 View Profile  See their activity

  • Content count

    1

  • Joined

  • Last visited

About SPyder

  • Rank
    Forum Newbie
  1. 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(); });