ypavank

Hi Guys, I am creating some demo mobile applications and have a question on how to render jchartfx I have 2 pages, Index.html and Page2.html. I want to show the jChart in Page2.html. This is how i am routing from Index.html to Page2.html Index.Html <div style="margin-top: 50px;"> <ul data-role="listview" class='someText'> <li><a href="Page2.html" class="catagory">Downtime Daily Report</a></li> </ul> </div> javascript function Page2(){ document.title = "Page2.html"; $.mobile.changePage("Page2.html",{data:{arg1:$('#selectLine').val()}}); } Page2.html <div id="dtrByPeriodPage" classname="nothing" data-role="page" data-add-back-btn="false"> <button onclick="CreateJFxChart()">Click Me!</button> <div id="ChartDiv1" style="width: 550px; height: 400px; display: inline-block"></div> </div> function CreateJFxChart(){ try { var chart1; chart1 = new cfx.Chart(); chart1.getLegendBox().setVisible(true); var axis1 = chart1.getAxisY(); var axis2 = chart1.getAxisY2(); var axis3 = new cfx.AxisY(); var axisX2 = new cfx.AxisX(); //chart1.getAxesY().add(axis3); //chart1.getAxesX().add(axisX2); axis1.setTextColor("#1D2793"); axis1.setForceZero(true); axis1.setVisible(true); axis1.getTitle().setText("DownTime(Hours)"); //axis1.getLabelsFormat().setFormat(cfx.AxisFormat.Currency); axis2.setTextColor("#9F1000"); axis2.setForceZero(true); axis2.setSeparation(15); axis2.getTitle().setText("DowmTime(Count)"); //axis2.getLabelsFormat().setFormat(cfx.AxisFormat.Currency); axis2.getGrids().getMajor().setVisible(true); //axis3.setTextColor("#14650C"); //axis3.setVisible(true); //axis3.setForceZero(false); //axis3.setPosition(cfx.AxisPosition.Far); //axis3.getTitle().setText("Clothing Sales"); //axis3.getLabelsFormat().setFormat(cfx.AxisFormat.Currency); //axis3.getGrids().getMajor().setVisible(false); var series1 = chart1.getSeries().getItem(0); var series2 = chart1.getSeries().getItem(1); var series3 = chart1.getSeries().getItem(2); series1.setAxisY(axis1); series2.setAxisY(axis2); //series3.setAxisY(axis3); series1.setColor("#9F1000"); series2.setColor("#1D2793"); series2.setGallery(cfx.Gallery.Bar); series2.setFillMode(cfx.FillMode.Pattern); chart1.getAllSeries().setMarkerShape(cfx.MarkerShape.None); chart1.getAllSeries().getLine().setWidth("4"); axisX2.getGrids().setInterlaced(false); axisX2.getGrids().getMajor().setVisible(false); axisX2.setPosition(cfx.AxisPosition.Near); axisX2.setStyle(cfx.AxisStyles.Centered); axisX2.getLabelsFormat().setFormat(cfx.AxisFormat.Date) var items = [{"Period":"2/24/2014 12:00:00 AM","DownTime":683.019,"Occurence":33},{"Period":"3/3/2014 12:00:00 AM","DownTime":93.3395,"Occurence":125},{"Period":"3/10/2014 12:00:00 AM","DownTime":133.080833,"Occurence":123},{"Period":"3/17/2014 12:00:00 AM","DownTime":415.372333,"Occurence":86},{"Period":"3/24/2014 12:00:00 AM","DownTime":28.936166,"Occurence":72}]; chart1.setDataSource(items); var chartDiv = document.getElementById('ChartDiv1'); chart1.create(chartDiv); $("#ChartDiv1").trigger('create'); } catch(e){alert(e);} } Once the Page is rendered, it is showing the jChartFx is very inappropriate colours Like (black and white). but when i move the div(ChartDiv) content to the original Index.HTML page, it is rendering with the colors i am expecting it to. Not sure why it is not displaying the graph properly on Page2. Any thoughts? Thanks for you time and help.