Jump to content
JChartFX Community
  • 0

ToolTip

Sat

Asked by Sat,

 Share

Question

Sat Newbie

Sat

Posted
Posted

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); 

Link to comment
Share on other sites

6 answers to this question

Recommended Posts

  • 0
JuanC Newbie

JuanC

Posted
Posted

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 

Link to comment
Share on other sites
  • 0
Ramsauer Newbie

Ramsauer

Posted
Posted

 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>

 

Link to comment
Share on other sites
  • 0
Ramsauer Newbie

Ramsauer

Posted
Posted

 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>
 

Link to comment
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...
×
 Share
Go to question listing
×
×
  • Create New...