Jump to content
JChartFX Community
  • 0

intermitten tooltip issue


tuot
 Share

Question

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.

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...
 Share

×
×
  • Create New...