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.
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
tuot
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>
Attachments.zip
Link to comment
Share on other sites
2 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.