Ramsauer
-
Posts
4 -
Joined
-
Last visited
Content Type
Profiles
Forums
Events
Posts posted by Ramsauer
-
-
Worked Great. Thanks
-
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> -
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
ToolTip
in General Questions
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>