tuot
-
Posts
6 -
Joined
-
Last visited
Content Type
Profiles
Forums
Events
Posts posted by tuot
-
-
I apoligize. the system.js file was not deployed out to the production directory.
i used the chrome debug and found out it was missing.
Thank you
-
Hello,
i just finished a web app that contains two of jchartfx charts (bar and pie). the charts are rendered fine in visual studio environment. i deployed the project to production IIS and opened it a browser. the app works but the charts are not rendered at all. i check all the jchartfx files and they are in the directory. i did a view source and were able to open up those jchartfx javascripts files. Any ideas?
-
Hello,
Can anyone show me how to format default tooltip? For example, for a bar chart, I would like to display the '$' sign for the value ($2500). Also for the pie chart, i like to display the value for the tooltip instead of the default percent.
I tried a number of things as suggested in the documentation such as:
chart1 = new cfx.Chart();
chart1.setToolTipFormat("This the point %N of series %S");
But it did not work at all.
Thank you,
-
please uncomment the following line in the code that i posted so that it would display to charts.
//drawChart1();
-
Hello,
i am evaluating jchartfx for the first time and ran into tooltip issue. i have two charts (bar and pie in that order). default tooltip does not work for the pie chart. the problem occured only when both charts are together.
I was exciting about this chart library. If i don't resolve this issue, I may not be able to use this library.
Here is the code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="Scripts/Charts/style/demoframe.css" />
<link rel="stylesheet" type="text/css" href="Scripts/Charts/style/jchartfx.css" />
<script type="text/javascript" src="Scripts/Charts/js/jchartfx.system.js"></script>
<script type="text/javascript" src="Scripts/Charts/js/jchartfx.coreVector.js"></script>
<script type="text/javascript" src="Scripts/Charts/js/jchartfx.animation.js"></script>
<script type="text/javascript" src="Scripts/Charts/js/jchartfx.advanced.js"></script>
<script type="text/javascript">
//var chart1;
$(function () {
onLoadDoc();
});
function onLoadDoc() {
//drawChart1();
drawChart2();
}
function drawChart1(){
chart1 = new cfx.Chart();
chart1.getAnimations().getLoad().setEnabled(true);
chart1.setGallery(cfx.Gallery.Gantt); // cfx.Gallery.Gantt for horizontal bars
// set chart title
var title = new cfx.TitleDockable();
title.setText("My chart Title");
chart1.getTitles().add(title);
/////////////////////////////
// set axis title
chart1.getAxisX().getTitle().setText("X Axis Title");
chart1.getAxisY().getTitle().setText("Y Axis Title");
// set bar width (in percentage; maximum 100%)
chart1.getAllSeries().setVolume(60);
// set axis min/max (for horizontal bars, X axis is really for Y axis
chart1.getAxisY().setMin(0);
chart1.getAxisY().setMax(4000);
// set x or y axis angle for marker values (remove for default)
//chart1.getAxisY().setLabelAngle(45);
//chart1.getAxisX().setLabelAngle(45);
////////////////////////////////////////////
// legend
chart1.getLegendBox().setVisible(false); // true - show, false - do not show
var allSeries = chart1.getAllSeries();
allSeries.setBarShape(cfx.BarShape.Cylinder);
var pointLabels = allSeries.getPointLabels();
pointLabels.setVisible(true);
pointLabels.setFormat("$%v");
var items = [
{ "Sales": 2200,"Month":"Jan" },
{ "Sales": 1500,"Month":"Feb" },
{ "Sales": 2100, "Month": "Mar" },
{ "Sales": 2600, "Month": "Apr" },
{ "Sales": 3200, "Month": "May" },
{ "Sales": 3400, "Month": "Jun" },
];
chart1.setDataSource(items);
chart1.create(document.getElementById('ChartDiv1'));
}
function drawChart2(){
Chart2 = new cfx.Chart();
Chart2.getAnimations().getLoad().setEnabled(true);
Chart2.setGallery(cfx.Gallery.Pie);
// set chart title
var title = new cfx.TitleDockable();
title.setText("My Pie Chart");
Chart2.getTitles().add(title);
/////////////////////////////
// legend
Chart2.getLegendBox().setVisible(true); // true - show, false - do not show
var allSeries = Chart2.getAllSeries();
var myPie = (Chart2.getGalleryAttributes());
myPie.setExplodingMode(cfx.ExplodingMode.First);
myPie.setSliceSeparation(15);
var pointLabels = allSeries.getPointLabels();
pointLabels.setVisible(true);
pointLabels.setFormat("$%v");
var items = [
{ "Sales": 2200,"Month":"Jan" },
{ "Sales": 1500,"Month":"Feb" },
{ "Sales": 2100, "Month": "Mar" },
{ "Sales": 2600, "Month": "Apr" },
];
Chart2.setDataSource(items);
Chart2.create(document.getElementById('ChartDiv2'));
}
</script>
<style type="text/css">
body { background-color:gray }
#ChartDiv1 .PointLabel {
fill: navy;
font-family: Arial;
font-size: 8pt;
}
#ChartDiv1 .jchartfx .Title {
font-size:14pt;
font-weight: bold;
fill:red;
}
/* X and Y axis title and markers color */
#ChartDiv1 .jchartfx .AxisText {
fill: black;
font-size:10pt;
}
/* color series */
#ChartDiv1 .jchartfx .Attribute0{
fill:orange;
stroke:#4281A4;
stroke-width:1;
}
#ChartDiv2 .jchartfx .Title {
font-size:14pt;
font-weight: bold;
}
#ChartDiv2 .PointLabel {
fill: white;
font-family: Arial;
font-size: 8pt;
}
</style>
</head>
<body>
<div id="ChartDiv1" style="width: 500px; height: 300px;margin:0 auto">
</div>
<div id="ChartDiv2" style="width: 500px; height: 300px;margin:0 auto">
</div>
</body>
</html>
jchartfx jquery mobile window phone
in jQuery/jQuery UI
Posted
I have a jquery mobile app with jchartfx. The charts render ok in window phone but other rendition was fragmented and tabular data when swiping up and down lost the table display. I tried a few things but nothing corrects the issue. I decided to remove jchartfx api calls and I did not see the problem again. Do you have any idea I can try?