Jump to content
JChartFX Community
  • 0
Sat

ToolTip

Question

Hi,

   I have used  Line  chart  To display  data  from db. Now  the Db  will  return  4 items. but  i need to show 2 items  in  Line Chart and In Tooltip  i  want the 4 items to show.  How to do this?  Below  my sample  code.

var divHolder = document.getElementById('ChartDiv');



    $(divHolder).html('');



    chart1 = new cfx.Chart();



    var axisY = chart1.getAxisY();



    var title = new cfx.TitleDockable();



    title.setText("Report");



    chart1.getTitles().add(title);



 



    chart1.setGallery(cfx.Gallery.Lines);



 



    var legBox = chart1.getLegendBox();



    legBox.setDock(cfx.DockArea.Bottom);



   
legBox.setContentLayout(cfx.ContentLayout.Center);



 



 



    //----Assign
data fields--------



 



    var fields =
chart1.getDataSourceSettings().getFields();



    var field1 = new cfx.FieldMap();



    var field2 = new cfx.FieldMap();



    var field3 = new cfx.FieldMap();



    var field4 = new cfx.FieldMap();



 



    field1.setName("amt_date");
field1.setDisplayName(
"Date");



    field1.setUsage(cfx.FieldUsage.XValue); //



    fields.add(field1);



   // chart1.getAxisX().getLabelsFormat().setCustomFormat("MM/dd/yyyy");



   //
chart1.getAxisX().getDataFormat().setFormat(cfx.AxisFormat.DateTime);



    field2.setName("credit");
field2.setDisplayName(
"Credit");



    field2.setUsage(cfx.FieldUsage.Value);



    fields.add(field2);



 



    field4.setName("debit");
field4.setDisplayName(
"Debit");



    field4.setUsage(cfx.FieldUsage.Value);



    fields.add(field4);



 



 



    //----Set
Sample Data------------



    chart1.setDataSource(Data);



 



    var chartDiv = document.getElementById('ChartDiv');



    chart1.create(chartDiv); 

Share this post


Link to post
Share on other sites

6 answers to this question

Recommended Posts

  • 0

I also have a similar problem.

I have 8 series, but for the Stacked Diagramm i only want to show 4 of them.

In the Tooltip i would like to have all 8 of them

 

Thanks in advance 

Share this post


Link to post
Share on other sites
  • 0

You can use the ToolTip Template API to customize the content of the tooltip as follows

    var data = [{"Field1":10, "Field2":20, "Field3":12}, {"Field1":12, "Field2":18, "Field3":15}];


    var fields = chart1.getDataSourceSettings().getFields();

    var field1 = new cfx.FieldMap();

    field1.setName("Field1");

    field1.setUsage(cfx.FieldUsage.Value);

    fields.add(field1);


    chart1.setDataSource(data);


    var tooltipTemplate = '<DataTemplate xmlns:x="a">' +

                          '<DockPanel Orientation="Vertical">' +

                            '<DockPanel Orientation="Horizontal" Margin="3,0,3,0">' +

                              '<TextBlock Text="Field1:" Foreground="{Binding Path=ItemFill}" Margin="0,0,4,0"/>' +

                              '<TextBlock Text="{Binding Path=DataField1}" FontWeight="Bold" HorizontalAlignment="Right"/>' +

                            '</DockPanel>' +

                            '<DockPanel Orientation="Horizontal" Margin="3,0,3,0">' +

                              '<TextBlock Text="Field2:" Foreground="{Binding Path=ItemFill}" Margin="0,0,4,0"/>' +

                              '<TextBlock Text="{Binding Path=DataField2}" FontWeight="Bold" HorizontalAlignment="Right"/>' +

                            '</DockPanel>' +

                            '<DockPanel Orientation="Horizontal" Margin="3,0,3,0">' +

                              '<TextBlock Text="Field3:" Foreground="{Binding Path=ItemFill}" Margin="0,0,4,0"/>' +

                              '<TextBlock Text="{Binding Path=DataField3}" FontWeight="Bold" HorizontalAlignment="Right"/>' +

                            '</DockPanel>' +

                          '</DockPanel>' +

                        '</DataTemplate>';

    chart1.getToolTips().setContentTemplate(tooltipTemplate);

 

JuanC 

Share this post


Link to post
Share on other sites
  • 0

 Hello JuanC,

 

Thank you for your answer.

But i have a Stacked Bar Diagramm and the Problem is, that the Tooltip now prints out the Tooltip Content Template for each Series which is displayed and stacked. 

How can i only display the Tooltip Template once, so it does not get repeated for each Series.

Or that it should only display the Series and the extra property for that series.

Here is an example html:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Diagramm</title>
<link type="text/css" href="http://www.jchartfx.com/resources/Include/cupertino/jquery-ui-1.8.21.custom.css" rel="Stylesheet" id="jqTheme"/>
<script type="text/javascript" src="http://www.jchartfx.com/scripts/jquery-1.7.1.js"></script>
<script type="text/javascript" src="http://www.jchartfx.com/scripts/jquery-ui-1.8.18.custom.min.js"></script>

<script type="text/javascript" src="http://www.jchartfx.com/libs/v7/current/js/jchartfx.system.js"></script>
<script type="text/javascript" src="http://www.jchartfx.com/libs/v7/current/js/jchartfx.coreVector.js"></script>
<script type="text/javascript" src="http://www.jchartfx.com/libs/v7/current/js/jchartfx.advanced.js"></script>
<script type="text/javascript" src="http://www.jchartfx.com/libs/v7/current/js/jchartfx.vectorTemplates.js"></script>
<script type="text/javascript" src="http://www.jchartfx.com/libs/v7/current/js/jchartfx.animation.js"></script>
<script type="text/javascript" src="http://www.jchartfx.com/libs/v7/current/js/jchartfx.ui.js"></script>
</head>

<body>
<div id="jChartFxDiv" style="width: 600px; height: 390px; display: inline-block"></div>
<SCRIPT type="text/javascript">
window.onload = function () {
    onLoadDoc();
};
var chart1;
function onLoadDoc() {
    chart1 = new cfx.Chart();
    chart1.getAnimations().getLoad().setEnabled(true);
    var items = [
{
"Year": "2010",
"Filiale01":114528,
"Filiale02":66272,
"Filiale03":25226,
"Filiale04":0,
"Aberration_Filiale01":100,
"Aberration_Filiale02":100,
"Aberration_Filiale03":100,
"Aberration_Filiale04":0
},
{
"Year": "2011",
"Filiale01":115441,
"Filiale02":71197,
"Filiale03":25743,
"Filiale04":174335,
"Aberration_Filiale01":1,
"Aberration_Filiale02":7,
"Aberration_Filiale03":2,
"Aberration_Filiale04":100
},
{
"Year": "2012",
"Filiale01":112408,
"Filiale02":74570,
"Filiale03":27946,
"Filiale04":173099,
"Aberration_Filiale01":-3,
"Aberration_Filiale02":5,
"Aberration_Filiale03":8,
"Aberration_Filiale04":-1
},
{
"Year": "2013",
"Filiale01":110910,
"Filiale02":76602,
"Filiale03":28132,
"Filiale04":173455,
"Aberration_Filiale01":-1,
"Aberration_Filiale02":3,
"Aberration_Filiale03":1,
"Aberration_Filiale04":0
},
{
"Year": "2014",
"Filiale01":2628,
"Filiale02":1944,
"Filiale03":543,
"Filiale04":3742,
"Aberration_Filiale01":-4120,
"Aberration_Filiale02":-3840,
"Aberration_Filiale03":-5081,
"Aberration_Filiale04":-4535
}];
     document.title='Order-Positions';
     chart1.setDataSource(items);
     chart1.setGallery(cfx.Gallery.Bar);
     var bar = chart1.getGalleryAttributes();
     bar.setTemplate("BarGlass");
     var title = new cfx.TitleDockable();
     title.setText("Year");
     var axisX = chart1.getAxisX();
     axisX.setTitle(title);
     axisX.setStep(1);
     axisX.setLabelAngle(90);
     chart1.getSeries().getItem(1).setStacked(true);
     chart1.getSeries().getItem(2).setStacked(true);
     chart1.getSeries().getItem(3).setStacked(true);
     chart1.getSeries().getItem(4).setVisible(false);
     chart1.getSeries().getItem(5).setVisible(false);
     chart1.getSeries().getItem(6).setVisible(false);
     chart1.getSeries().getItem(7).setVisible(false);
     chart1.getLegendBox().setDock(cfx.DockArea.Bottom);
    var chartDiv = document.getElementById('jChartFxDiv');
    chart1.create(chartDiv);
    chart1.getAxisY().resetScale();
    chart1.recalculateScale();
     };
</script>
</body>
</html>

 

Share this post


Link to post
Share on other sites
  • 0

 One more Thing. The Tooltip gets displayed outside of the diagram on the top of the Bar's.

Here is my Sample Code:

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Diagramm</title>
<link type="text/css" href="http://www.jchartfx.com/resources/Include/cupertino/jquery-ui-1.8.21.custom.css" rel="Stylesheet" id="jqTheme"/>
<script type="text/javascript" src="http://www.jchartfx.com/scripts/jquery-1.7.1.js"></script>
<script type="text/javascript" src="http://www.jchartfx.com/scripts/jquery-ui-1.8.18.custom.min.js"></script>

<script type="text/javascript" src="http://www.jchartfx.com/libs/v7/current/js/jchartfx.system.js"></script>
<script type="text/javascript" src="http://www.jchartfx.com/libs/v7/current/js/jchartfx.coreVector.js"></script>
<script type="text/javascript" src="http://www.jchartfx.com/libs/v7/current/js/jchartfx.advanced.js"></script>
<script type="text/javascript" src="http://www.jchartfx.com/libs/v7/current/js/jchartfx.vectorTemplates.js"></script>
<script type="text/javascript" src="http://www.jchartfx.com/libs/v7/current/js/jchartfx.animation.js"></script>
<script type="text/javascript" src="http://www.jchartfx.com/libs/v7/current/js/jchartfx.ui.js"></script>
</head>

<body>
<div id="jChartFxDiv" style="width: 600px; height: 390px; display: inline-block"></div>
<SCRIPT type="text/javascript">
window.onload = function () {
    onLoadDoc();
};
var chart1;
function onLoadDoc() {
    chart1 = new cfx.Chart();
    chart1.getAnimations().getLoad().setEnabled(true);
    var items = [
{
"Year": "2010",
"Filiale01":114528,
"Filiale02":66272,
"Filiale03":25226,
"Filiale04":0,
"Aberration_Filiale01":100,
"Aberration_Filiale02":100,
"Aberration_Filiale03":100,
"Aberration_Filiale04":0
},
{
"Year": "2011",
"Filiale01":115441,
"Filiale02":71197,
"Filiale03":25743,
"Filiale04":174335,
"Aberration_Filiale01":1,
"Aberration_Filiale02":7,
"Aberration_Filiale03":2,
"Aberration_Filiale04":100
},
{
"Year": "2012",
"Filiale01":112408,
"Filiale02":74570,
"Filiale03":27946,
"Filiale04":173099,
"Aberration_Filiale01":-3,
"Aberration_Filiale02":5,
"Aberration_Filiale03":8,
"Aberration_Filiale04":-1
},
{
"Year": "2013",
"Filiale01":110910,
"Filiale02":76602,
"Filiale03":28132,
"Filiale04":173455,
"Aberration_Filiale01":-1,
"Aberration_Filiale02":3,
"Aberration_Filiale03":1,
"Aberration_Filiale04":0
},
{
"Year": "2014",
"Filiale01":2628,
"Filiale02":1944,
"Filiale03":543,
"Filiale04":3742,
"Aberration_Filiale01":-4120,
"Aberration_Filiale02":-3840,
"Aberration_Filiale03":-5081,
"Aberration_Filiale04":-4535
}];
     document.title='Order-Positions';
     chart1.setDataSource(items);
     chart1.setGallery(cfx.Gallery.Bar);
     var bar = chart1.getGalleryAttributes();
     bar.setTemplate("BarGlass");
     var title = new cfx.TitleDockable();
     title.setText("Monat");
     var axisX = chart1.getAxisX();
     axisX.setTitle(title);
     axisX.setStep(1);
     axisX.setLabelAngle(90);
     chart1.getSeries().getItem(1).setStacked(true);
     chart1.getSeries().getItem(2).setStacked(true);
     chart1.getSeries().getItem(3).setStacked(true);
     chart1.getSeries().getItem(4).setVisible(false);
     chart1.getSeries().getItem(5).setVisible(false);
     chart1.getSeries().getItem(6).setVisible(false);
     chart1.getSeries().getItem(7).setVisible(false);
     chart1.getToolTips().setAllSeries(false);
     chart1.getLegendBox().setDock(cfx.DockArea.Bottom);
     chart1.getToolTips().setContentTemplate('<DataTemplate xmlns:x="a"><DockPanel Orientation="Vertical"><DockPanel Orientation="Horizontal" Margin="3,0,3,0"><TextBlock Text="Filiale01" Foreground="{Binding Path=ItemFill}" M="0,0,4,0"/><TextBlock Text="{Binding Path=DataFiliale01}" FontWeight="Bold" HorizontalAlignment="Right"/></DockPanel><DockPanel Orientation="Horizontal" Margin="3,0,3,0"><TextBlock Text="Aberration_Filiale01:" Foreground="{Binding Path=ItemFill}" Margin="0,0,4,0"/><TextBlock Text="{Binding Path=DataAberration_Filiale01}" FontWeight="Bold" HorizontalAlignment="Right"/></DockPanel><DockPanel Orientation="Horizontal" Margin="3,0,3,0"><TextBlock Text="Filiale02" Foreground="{Binding Path=ItemFill}" M="0,0,4,0"/><TextBlock Text="{Binding Path=DataFiliale02}" FontWeight="Bold" HorizontalAlignment="Right"/></DockPanel><DockPanel Orientation="Horizontal" Margin="3,0,3,0"><TextBlock Text="Aberration_Filiale02:" Foreground="{Binding Path=ItemFill}" Margin="0,0,4,0"/><TextBlock Text="{Binding Path=DataAberration_Filiale02}" FontWeight="Bold" HorizontalAlignment="Right"/></DockPanel><DockPanel Orientation="Horizontal" Margin="3,0,3,0"><TextBlock Text="Filiale03:" Foreground="{Binding Path=ItemFill}" M="0,0,4,0"/><TextBlock Text="{Binding Path=DataFiliale03}" FontWeight="Bold" HorizontalAlignment="Right"/></DockPanel><DockPanel Orientation="Horizontal" Margin="3,0,3,0"><TextBlock Text="Aberration_Filiale03:" Foreground="{Binding Path=ItemFill}" Margin="0,0,4,0"/><TextBlock Text="{Binding Path=DataAberration_Filiale03}" FontWeight="Bold" HorizontalAlignment="Right"/></DockPanel><DockPanel Orientation="Horizontal" Margin="3,0,3,0"><TextBlock Text="Filiale04" Foreground="{Binding Path=ItemFill}" M="0,0,4,0"/><TextBlock Text="{Binding Path=DataFiliale04}" FontWeight="Bold" HorizontalAlignment="Right"/></DockPanel><DockPanel Orientation="Horizontal" Margin="3,0,3,0"><TextBlock Text="Aberration_Filiale04:" Foreground="{Binding Path=ItemFill}" Margin="0,0,4,0"/><TextBlock Text="{Binding Path=DataAberration_Filiale04}" FontWeight="Bold" HorizontalAlignment="Right"/></DockPanel></DockPanel></DataTemplate>');
    var chartDiv = document.getElementById('jChartFxDiv');
    chart1.create(chartDiv);
    chart1.getAxisY().resetScale();
    chart1.recalculateScale();
     };
</script>
</body>
</html>
 

Share this post


Link to post
Share on other sites

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