Jump to content
JChartFX Community

Ramsauer

Members
  • Posts

    4
  • Joined

  • Last visited

Ramsauer's Achievements

Newbie

Newbie (1/14)

0

Reputation

  1. Ramsauer

    ToolTip

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

    ToolTip

    Worked Great. Thanks
  3. Ramsauer

    ToolTip

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

    ToolTip

    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
×
×
  • Create New...