Jump to content
JChartFX Community
  • 0
ypavank

Rendering JChartFx after ChangePage

Question

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. 

 

Share this post


Link to post
Share on other sites

0 answers to this question

Recommended Posts

There have been no answers to this question yet

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.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...