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.
You can post now and register later.
If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.
Question
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.
Link to comment
Share on other sites
0 answers to this question
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.