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.