[Rendering JChartFx after ChangePage]

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.