I'm new to Silverlight and I am trying to display the contents of a Dictionary in a Graph:
In codebehind:
ChartData = new Dictionary<DateTime, double> {{DateTime.Now, 10},
{DateTime.Now, 20}, {DateTime.Now, 15}};
And in the silverlight XAML:
<toolkit:Chart HorizontalAlignment="Left" Margin="113,168,0,0" Name="chart1"
Title="Chart Title" VerticalAlignment="Top">
<toolkit:LineSeries ItemsSource="{Binding Path=ChartData}"
DependentValuePath="Key" IndependentValuePath="Value">
</toolkit:LineSeries>
</toolkit:Chart>
But this gives "No suitable axis is availible for plotting the dependent value". Suggestions?
Try this data set:-
ChartData = new Dictionary<DateTime, double>() {
{ DateTime.Now.AddDays(-1), 10 },
{ DateTime.Now, 20 },
{ DateTime.Now.AddDays(1), 15 }
};
(I'm surprise your line of code even worked, since it would attempt to add multiple keys with the same value into the dictionary).
Then change your Xaml:-
<toolkit:LineSeries ItemsSource="{Binding Path=ChartData}"
DependentValuePath="Value" IndependentValuePath="Key">
Its would be highly unusual to use a date as a DependentValue, in fact I can't think of a scenario where a DependentValue would anything other than numeric.
Related
I have a Vanilla Nativescript app that I am testing a RadListView on; populating the items from JS.
As soon as I SET the value of the ObservableArray the app just crashes. I have tried to set the value onload as well as on tap. In this example tab on the BOTTOM LABEL; at the moment a label at the top will display the set value so I know that the object does exist; but when trying to bind the data to the list view things go awry.
Below is the base code to replicate this issue; if you uncomment the line:
pageData.set("items", items);
Any direction would be much appreciated.
HOME-PAGE.XML
<Page class="page"
navigatingTo="onNavigatingTo"
loaded="pageLoaded"
xmlns="http://schemas.nativescript.org/tns.xsd"
xmlns:lv="nativescript-ui-listview"
>
<ActionBar class="action-bar">
<Label class="action-bar-title" text="Home"></Label>
</ActionBar>
<StackLayout>
<!-- Add your page content here -->
<Label text="{{ toptext }}" textAlignment="center" color="#88f" fontSize="15" fontWeight="bold"/>
<lv:RadListView height="350" items="{{ items }}" >
<lv:RadListView.itemTemplate>
<StackLayout orientation="vertical">
<Label fontSize="20" text="{{ itemName }}"/>
<Label fontSize="14" text="{{ itemDescription }}"/>
</StackLayout>
</lv:RadListView.itemTemplate>
</lv:RadListView>
<Label text="BOTTOM LABEL" textAlignment="center" color="#f88" fontSize="33" fontWeight="bold" onTap="fillListview"/>
</StackLayout>
</Page>
HOME-PAGE.JS
const HomeViewModel = require("./home-view-model");
var Observable = require("data/observable").Observable;
var ObservableArray = require("data/observable-array").ObservableArray;
var items = new ObservableArray();
var pageData = new Observable();
function onNavigatingTo(args) {
const page = args.object;
page.bindingContext = new HomeViewModel();
}
exports.onNavigatingTo = onNavigatingTo;
exports.pageLoaded = function(args) {
page = args.object;
page.bindingContext = pageData;
items.push(
{
itemName: "$USD / ZAR",
itemDescription: "13.50",
itemDate: "3 Jul 2019",
itemImage: "~/images/arcade-fire.png"
},
{
itemName: "$USD / ZAR",
itemDescription: "18.00",
itemDate: "17 Aug 2019",
itemImage: "~/images/bon-iver.png"
}
)
};
exports.fillListview = function(args) {
pageData.set("toptext", items);
// pageData.set("items", items);
}
i tried to reproduce your problem in a playground project but all works fine, do you recive some error in console about your problem ??
Here is the project where i was trying your code
i will generate Stacked column chart, which will display on the x-axis cities and on the y-axis are count of genders in column. How to binding chart and this data:
List<Cities> Cities = new List<Cities>()
{
new Cities
{
Name = "Paris",
Genders = new Genders()
{
Man = 350000,
Woman = 436000
}
},
new Cities()
{
Name = "London",
Genders = new Genders()
{
Man = 698056,
Woman = 736982
}
}
};
I am trying to generate Series:
int i = 0;
foreach (var city in Cities)
{
Series s1 = new ColumnSeries();
s1.Title = city.Name;
s1.Name = "S"+i;
StackedColumnChart.Series.Add(s1);
i++;
}
i dont know how to binding data. Thanks
you can try to download a trial version of LightningChart with included demonstration examples for WinForms, WPF with Non-bindable, Semibindable and Fully Bindable examples.
You can easily look at the source code examples, e.g. ExampleStackedBars.
In a code behind you can create a field, which will be binded to the chart BarSeriesCollection property:
public static readonly DependencyProperty BarSeriesProperty =
DependencyProperty.Register(
"BarSeries",
typeof(BarSeriesCollection),
typeof(ExampleStackedBars)
);
public BarSeriesCollection BarSeries
{
get { return GetValue(BarSeriesProperty) as BarSeriesCollection; }
set { SetValue(BarSeriesProperty, value); }
}
And after create a new instance and add data to the collection:
BarSeries = new BarSeriesCollection();
GenerateData();
In XAML you can easily bind it using this line:
<lcusb:LightningChartUltimate.ViewXY>
**<lcusb:ViewXY BarSeries="{Binding BarSeries}">**
<lcusb:ViewXY.BarViewOptions>
<lcusb:BarViewOptions BarSpacing="30" Grouping="ByIndexFitWidth" Stacking="Stack" IndexGroupingFitGroupDistance="20"/>
</lcusb:ViewXY.BarViewOptions>
</lcusb:ViewXY>
</lcusb:LightningChartUltimate.ViewXY>
</lcusb:LightningChartUltimate>
or set binding path in the property tree
Example in Sparrow toolkit is for other chart type. i need Stacked bar chart. My graph must in x-axis cities and for each city must be multiple values in column. This is my chart:
<charting:Chart
Grid.Column="0"
Grid.Row="0"
x:Name="StackedColumnChart"
Title="Stacked Column"
Margin="5">
<charting:StackedColumnSeries>
</charting:StackedColumnSeries>
</charting:Chart>
I dont know what is series. Series is columns? How to assign multiple value (in my example genders) to one column?
I have a simple array of objects:
public var activityArray:Array=["a1", "a2", "a3", "a4"];
How would I basically put this into a data-grid column? I have set up the datagrid as part of it is shown below:
</mx:HBox>
<components:PortalTabGridCanvas id="marketPlansGridCanv" height="33%" width="98.5%">
<mx:AdvancedDataGrid id="marketPlansGrid" height="100%" width="100%" dataProvider="activityArray">
<mx:columns>
<mx:AdvancedDataGridColumn headerText="{Mlc.curr.get('Activity Type')}" width="160" dataField="ATTRIB_VALUE" textAlign="center" headerWordWrap="true"/>
<mx:AdvancedDataGridColumn headerText="{Mlc.curr.get('Activity')}" width="160" dataField="ATTRIB_VALUE" textAlign="center" headerWordWrap="true"/>
A DataGrid is designed to inspect Objects and extract data from that Objects readable properties, as you are using Strings in your dataProvider, there are no properties to read.
To display data from an Object in an AdvancedDataGridColumn, the columns dataField must be the name a readable property from that Object.
You would need to define your dataProvider to contain Objects at a minimum like the below example.
public var activityArray:Array =
[
{
property1:"a1",
property2:"a1's second property"
} ,
{
property1:"a2",
property2:"a2's second property"
}
//etc, etc, etc...
];
And then define your columns like:
<mx:AdvancedDataGridColumn headerText="{Mlc.curr.get('Activity Type')}" width="160" dataField="property1" textAlign="center" headerWordWrap="true"/>
<mx:AdvancedDataGridColumn headerText="{Mlc.curr.get('Activity')}" width="160" dataField="property2" textAlign="center" headerWordWrap="true"/>
I am developing window phone 7 application in C#. I am new to the window phone 7 application. I am also new to the silverlight. I want to generate the bold text of Texblock dynamically. I want to generate the bold text only for some part of the text. I am using the following code
IncometextBlock.Text = "Income entries on " + selectedDate.ToShortDateString() + " Page - "+SelectedButtonName+"";
I want the output as
"Income entries on 21/01/2011 Page - A"
I want the above output. How to make the bold text for above requirement ? Can you please provide me any code or link through which I can resolve the above issue. If I am doing anything wrong then please guide me.
I'd do it like this.
IncometextBlock.Inlines.Clear();
IncometextBlock.Inlines.Add(new Run() {Text = "Income entries", FontWeight = FontWeights.Bold});
IncometextBlock.Inlines.Add(new Run() {Text = " on " });
IncometextBlock.Inlines.Add(new Run() {Text = selectedDate.ToShortDateString(), FontWeight = FontWeights.Bold});
IncometextBlock.Inlines.Add(new Run() {Text = " Page - "});
IncometextBlock.Inlines.Add(new Run() {Text = SelectedButtonName, FontWeight = FontWeights.Bold});
If you use the WrapPanel (from the Toolkit) you can do this:
<Grid>
<toolkit:WrapPanel>
<TextBlock Text="Income entries" FontWeight="Bold"/>
<TextBlock Text=" on "/>
<TextBlock Text="21/01/2011" FontWeight="Bold"/>
<TextBlock Text=" Page - "/>
<TextBlock Text="A" FontWeight="Bold"/>
</toolkit:WrapPanel>
</Grid>
(The above is only in a grid to enable code highlighting here in SO and does not need to be for the effect to work.)
I'm using the WPF ribbon control with some success; I'm trying now to use the Ribbon Gallery, making use of the Categories in a data-bound scenario. Here's some example data: -
var data = new[]
{
new { Category = "Sport", Hobby = "Football" },
new { Category = "Sport", Hobby = "Table Tennis" },
new { Category = "Music", Hobby = "Guitar" },
new { Category = "Music", Hobby = "Piano" },
new { Category = "PC", Hobby = "StarCraft 2" },
};
I'm grouping up the data and want to display the items in a gallery, grouped by Category: -
IEnumerable CategorisedHobbies;
CategorisedHobbies = data.GroupBy(d => d.Category).ToArray();
All fairly standard. My XAML looks as follows: -
<ribbon:RibbonGallery ItemsSource="{Binding CategorisedHobbies}">
<ribbon:RibbonGallery.ItemTemplate>
<DataTemplate>
<ribbon:RibbonGalleryCategory Header="{Binding Key}" ItemsSource="{Binding}" MaxColumnCount="1">
<ribbon:RibbonGalleryCategory.ItemTemplate>
<DataTemplate>
<ribbon:RibbonGalleryItem Content="{Binding Hobby}"/>
</DataTemplate>
</ribbon:RibbonGalleryCategory.ItemTemplate>
</ribbon:RibbonGalleryCategory>
</DataTemplate>
</ribbon:RibbonGallery.ItemTemplate>
</ribbon:RibbonGallery>
However, when the app runs, whilst I correctly get the categories showing in the ribbon gallery, each item is just a blank square. I know that the collections are getting bound because I can see that the category size is bigger for e.g. Sport than PC.
If I hard-code the XAML as follows it of course all works: -
Any ideas what I'm doing wrong here? Thanks!
OK, I have gotten this working now "properly". What I had to do was rather than set the DataTemplate was to apply a style for the ItemsContainerStyle on the RibbonGallery.
This style simply needs to be of type RibbonGalleryCategory, and to have a property setter for the ItemsSource. In my case, it was simply {Binding}, plus I had to set the DisplayMemberPath.
I still don't have a full understanding of the hierarchy of the RibbonGallery in terms of how it styles things - but at least this approach works.
UPDATE:
Here's the appropriate XAML for the code example I originally supplied:
<r:RibbonWindow.Resources>
<Style TargetType="r:RibbonGalleryCategory" x:Key="HobbyCategoryStyle">
<Setter Property="Header" Value="{Binding Key}"/>
<Setter Property="ItemsSource" Value="{Binding}"/>
<Setter Property="DisplayMemberPath" Value="Hobby"/>
</Style>
</r:RibbonWindow.Resources>
<r:RibbonMenuButton Label="Example menu button">
<r:RibbonGallery ItemsSource="{Binding CategorisedHobbies}" ItemContainerStyle="{StaticResource ResourceKey=HobbyCategoryStyle}"/>
</r:RibbonMenuButton>
Not sure why but if you assign an ItemsPanel to RibbonGalleryCategory, it works:
<ribbon:RibbonGalleryCategory.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel IsItemsHost="True" />
</ItemsPanelTemplate>
</ribbon:RibbonGalleryCategory.ItemsPanel>