Mixing
How to bind WPF LiveCharts(LVC) enable drill down view?
I am currently learning WPF and venturing WPF LiveCharts(LVC). I understand that the chart has a Chart.DataClick event which could be bound to a point in Chart. However i am unable to get the event to populate a new chart (replacing the old chart) based on the point clicked, which should basically give me a drill down view of the clicked point.
I referred to this example however I am not sure how to bind the new series collection based on the clicked point and bind it to my chart.
Theoretically I thought of the following steps,
- User clicks on a point and the code behind checks the point name and
gets a new predefined seriescollection property - The chart which was already populated based on datacontext and Series, in XAML, is replaced by the new bindingsource seriescollection2 property in the same class.
Here I'm a little confused as I am unsure of how to MVVM the series collection with the chart as the example i am working on does not seem to have implemented MVVM.
I read about IObservableChartPoint the documentation and have a notion that this may be the key to achieve i am looking for. It is strange that no one has posted anything about implementing this library to achieve the drilldown view.
How I would like to use the chart is by reading a flat file with series points data and plot them in a Donut or a Column Chart. I am posting the code that I could write to achieve what I want.
Code Behind:
Public ReadOnly Property SeriesCOllection2 As SeriesCollection
Get
_SeriesCollection2 = New SeriesCollection From {
New PieSeries With {
.Title = "Page1",
.Values = New ChartValues(Of ObservableValue) From {
New ObservableValue(8)
},
.DataLabels = True
},
New PieSeries With {
.Title = "Pag2",
.Values = New ChartValues(Of ObservableValue) From {
New ObservableValue(6)
},
.DataLabels = True
},
New PieSeries With {
.Title = "Pag3",
.Values = New ChartValues(Of ObservableValue) From {
New ObservableValue(10)
},
.DataLabels = True
},
New PieSeries With {
.Title = "Pag4",
.Values = New ChartValues(Of ObservableValue) From {
New ObservableValue(4)
},
.DataLabels = True
},
New PieSeries With {
.Title = "Pag5",
.Values = New ChartValues(Of ObservableValue) From {
New ObservableValue(4)
},
.DataLabels = True
}
}
Return _SeriesCOllection2
End Get
End Property>
Code Behind Events:
Private _SeriesCOllection2 As SeriesCollection
Public Property SeriesCollection As SeriesCollection
Private Sub Chart_DataClick(sender As Object, chartPoint As ChartPoint) ' Click event on chart data point
If chartPoint.SeriesView.Title.ToLower.Equals("opera") Then
Chart.Series = _SeriesCOllection2
End If
End Sub
Private Sub Button_Click(sender As Object, e As RoutedEventArgs) ' Reset the chart
Chart.Series = SeriesCollection
End Sub
Chart XAML:
d:DataContext="{d:DesignInstance local:BasicChart}"
<lvc:PieChart
Name="Chart"
Grid.Row="1"
Margin="0,15"
DataClick="Chart_DataClick"
InnerRadius="80"
Series="{Binding SeriesCollection}">
<lvc:PieChart.DataTooltip>
<lvc:DefaultTooltip SelectionMode="OnlySender" />
</lvc:PieChart.DataTooltip>
</lvc:PieChart>
Does anyone have any idea around this or point me in the right direction? A little code walkthrough would also be appreciated in case of a solution.
PS: I am using WPF vb.net.
wpf vb.net mvvm data-binding livecharts
asked Nov 19 '18 at 17:23
AK23
11
add a comment |
I am currently learning WPF and venturing WPF LiveCharts(LVC). I understand that the chart has a Chart.DataClick event which could be bound to a point in Chart. However i am unable to get the event to populate a new chart (replacing the old chart) based on the point clicked, which should basically give me a drill down view of the clicked point.
I referred to this example however I am not sure how to bind the new series collection based on the clicked point and bind it to my chart.
Theoretically I thought of the following steps,
- User clicks on a point and the code behind checks the point name and
gets a new predefined seriescollection property - The chart which was already populated based on datacontext and Series, in XAML, is replaced by the new bindingsource seriescollection2 property in the same class.
Here I'm a little confused as I am unsure of how to MVVM the series collection with the chart as the example i am working on does not seem to have implemented MVVM.
I read about IObservableChartPoint the documentation and have a notion that this may be the key to achieve i am looking for. It is strange that no one has posted anything about implementing this library to achieve the drilldown view.
How I would like to use the chart is by reading a flat file with series points data and plot them in a Donut or a Column Chart. I am posting the code that I could write to achieve what I want.
Code Behind:
Public ReadOnly Property SeriesCOllection2 As SeriesCollection
Get
_SeriesCollection2 = New SeriesCollection From {
New PieSeries With {
.Title = "Page1",
.Values = New ChartValues(Of ObservableValue) From {
New ObservableValue(8)
},
.DataLabels = True
},
New PieSeries With {
.Title = "Pag2",
.Values = New ChartValues(Of ObservableValue) From {
New ObservableValue(6)
},
.DataLabels = True
},
New PieSeries With {
.Title = "Pag3",
.Values = New ChartValues(Of ObservableValue) From {
New ObservableValue(10)
},
.DataLabels = True
},
New PieSeries With {
.Title = "Pag4",
.Values = New ChartValues(Of ObservableValue) From {
New ObservableValue(4)
},
.DataLabels = True
},
New PieSeries With {
.Title = "Pag5",
.Values = New ChartValues(Of ObservableValue) From {
New ObservableValue(4)
},
.DataLabels = True
}
}
Return _SeriesCOllection2
End Get
End Property>
Code Behind Events:
Private _SeriesCOllection2 As SeriesCollection
Public Property SeriesCollection As SeriesCollection
Private Sub Chart_DataClick(sender As Object, chartPoint As ChartPoint) ' Click event on chart data point
If chartPoint.SeriesView.Title.ToLower.Equals("opera") Then
Chart.Series = _SeriesCOllection2
End If
End Sub
Private Sub Button_Click(sender As Object, e As RoutedEventArgs) ' Reset the chart
Chart.Series = SeriesCollection
End Sub
Chart XAML:
d:DataContext="{d:DesignInstance local:BasicChart}"
<lvc:PieChart
Name="Chart"
Grid.Row="1"
Margin="0,15"
DataClick="Chart_DataClick"
InnerRadius="80"
Series="{Binding SeriesCollection}">
<lvc:PieChart.DataTooltip>
<lvc:DefaultTooltip SelectionMode="OnlySender" />
</lvc:PieChart.DataTooltip>
</lvc:PieChart>
Does anyone have any idea around this or point me in the right direction? A little code walkthrough would also be appreciated in case of a solution.
PS: I am using WPF vb.net.
wpf vb.net mvvm data-binding livecharts
asked Nov 19 '18 at 17:23
AK23
11
Show your Minimal, Complete, and Verifiable example and make sure you ask a specific question. This feels more like something that can be answered by a tutorial, and SO is not great for that.
– jdv
Nov 19 '18 at 17:29
Thanks for the suggestion, posted the sample code. Let me know if it makes sense.
– AK23
Nov 19 '18 at 17:56
That really isn't your Minimal, Complete, and Verifiable example. It's just copied from that tutorial, right? It is unclear what your actual question is. What problem have you found with this code? BTW, no one is going to do a "walkthrough" with you because, well, this isn't what SO is for. I think you are asking how to bind your view and controller in this specific case, but, honestly, I don't think anyone is going to read through this tutorial code to figure it out. Maybe you could take the tutorial and write your own example that demonstrates the problem?
– jdv
Nov 19 '18 at 18:01
add a comment |
I am currently learning WPF and venturing WPF LiveCharts(LVC). I understand that the chart has a Chart.DataClick event which could be bound to a point in Chart. However i am unable to get the event to populate a new chart (replacing the old chart) based on the point clicked, which should basically give me a drill down view of the clicked point.
I referred to this example however I am not sure how to bind the new series collection based on the clicked point and bind it to my chart.
Theoretically I thought of the following steps,
- User clicks on a point and the code behind checks the point name and
gets a new predefined seriescollection property - The chart which was already populated based on datacontext and Series, in XAML, is replaced by the new bindingsource seriescollection2 property in the same class.
Here I'm a little confused as I am unsure of how to MVVM the series collection with the chart as the example i am working on does not seem to have implemented MVVM.
I read about IObservableChartPoint the documentation and have a notion that this may be the key to achieve i am looking for. It is strange that no one has posted anything about implementing this library to achieve the drilldown view.
How I would like to use the chart is by reading a flat file with series points data and plot them in a Donut or a Column Chart. I am posting the code that I could write to achieve what I want.
Code Behind:
Public ReadOnly Property SeriesCOllection2 As SeriesCollection
Get
_SeriesCollection2 = New SeriesCollection From {
New PieSeries With {
.Title = "Page1",
.Values = New ChartValues(Of ObservableValue) From {
New ObservableValue(8)
},
.DataLabels = True
},
New PieSeries With {
.Title = "Pag2",
.Values = New ChartValues(Of ObservableValue) From {
New ObservableValue(6)
},
.DataLabels = True
},
New PieSeries With {
.Title = "Pag3",
.Values = New ChartValues(Of ObservableValue) From {
New ObservableValue(10)
},
.DataLabels = True
},
New PieSeries With {
.Title = "Pag4",
.Values = New ChartValues(Of ObservableValue) From {
New ObservableValue(4)
},
.DataLabels = True
},
New PieSeries With {
.Title = "Pag5",
.Values = New ChartValues(Of ObservableValue) From {
New ObservableValue(4)
},
.DataLabels = True
}
}
Return _SeriesCOllection2
End Get
End Property>
Code Behind Events:
Private _SeriesCOllection2 As SeriesCollection
Public Property SeriesCollection As SeriesCollection
Private Sub Chart_DataClick(sender As Object, chartPoint As ChartPoint) ' Click event on chart data point
If chartPoint.SeriesView.Title.ToLower.Equals("opera") Then
Chart.Series = _SeriesCOllection2
End If
End Sub
Private Sub Button_Click(sender As Object, e As RoutedEventArgs) ' Reset the chart
Chart.Series = SeriesCollection
End Sub
Chart XAML:
d:DataContext="{d:DesignInstance local:BasicChart}"
<lvc:PieChart
Name="Chart"
Grid.Row="1"
Margin="0,15"
DataClick="Chart_DataClick"
InnerRadius="80"
Series="{Binding SeriesCollection}">
<lvc:PieChart.DataTooltip>
<lvc:DefaultTooltip SelectionMode="OnlySender" />
</lvc:PieChart.DataTooltip>
</lvc:PieChart>
Does anyone have any idea around this or point me in the right direction? A little code walkthrough would also be appreciated in case of a solution.
PS: I am using WPF vb.net.
wpf vb.net mvvm data-binding livecharts
asked Nov 19 '18 at 17:23
AK23
11
I am currently learning WPF and venturing WPF LiveCharts(LVC). I understand that the chart has a Chart.DataClick event which could be bound to a point in Chart. However i am unable to get the event to populate a new chart (replacing the old chart) based on the point clicked, which should basically give me a drill down view of the clicked point.
I referred to this example however I am not sure how to bind the new series collection based on the clicked point and bind it to my chart.
Theoretically I thought of the following steps,
- User clicks on a point and the code behind checks the point name and
gets a new predefined seriescollection property - The chart which was already populated based on datacontext and Series, in XAML, is replaced by the new bindingsource seriescollection2 property in the same class.
Here I'm a little confused as I am unsure of how to MVVM the series collection with the chart as the example i am working on does not seem to have implemented MVVM.
I read about IObservableChartPoint the documentation and have a notion that this may be the key to achieve i am looking for. It is strange that no one has posted anything about implementing this library to achieve the drilldown view.
How I would like to use the chart is by reading a flat file with series points data and plot them in a Donut or a Column Chart. I am posting the code that I could write to achieve what I want.
Code Behind:
Public ReadOnly Property SeriesCOllection2 As SeriesCollection
Get
_SeriesCollection2 = New SeriesCollection From {
New PieSeries With {
.Title = "Page1",
.Values = New ChartValues(Of ObservableValue) From {
New ObservableValue(8)
},
.DataLabels = True
},
New PieSeries With {
.Title = "Pag2",
.Values = New ChartValues(Of ObservableValue) From {
New ObservableValue(6)
},
.DataLabels = True
},
New PieSeries With {
.Title = "Pag3",
.Values = New ChartValues(Of ObservableValue) From {
New ObservableValue(10)
},
.DataLabels = True
},
New PieSeries With {
.Title = "Pag4",
.Values = New ChartValues(Of ObservableValue) From {
New ObservableValue(4)
},
.DataLabels = True
},
New PieSeries With {
.Title = "Pag5",
.Values = New ChartValues(Of ObservableValue) From {
New ObservableValue(4)
},
.DataLabels = True
}
}
Return _SeriesCOllection2
End Get
End Property>
Code Behind Events:
Private _SeriesCOllection2 As SeriesCollection
Public Property SeriesCollection As SeriesCollection
Private Sub Chart_DataClick(sender As Object, chartPoint As ChartPoint) ' Click event on chart data point
If chartPoint.SeriesView.Title.ToLower.Equals("opera") Then
Chart.Series = _SeriesCOllection2
End If
End Sub
Private Sub Button_Click(sender As Object, e As RoutedEventArgs) ' Reset the chart
Chart.Series = SeriesCollection
End Sub
Chart XAML:
d:DataContext="{d:DesignInstance local:BasicChart}"
<lvc:PieChart
Name="Chart"
Grid.Row="1"
Margin="0,15"
DataClick="Chart_DataClick"
InnerRadius="80"
Series="{Binding SeriesCollection}">
<lvc:PieChart.DataTooltip>
<lvc:DefaultTooltip SelectionMode="OnlySender" />
</lvc:PieChart.DataTooltip>
</lvc:PieChart>
Does anyone have any idea around this or point me in the right direction? A little code walkthrough would also be appreciated in case of a solution.
PS: I am using WPF vb.net.
wpf vb.net mvvm data-binding livecharts
wpf vb.net mvvm data-binding livecharts
asked Nov 19 '18 at 17:23
AK23
11
asked Nov 19 '18 at 17:23
AK23
11
edited Nov 19 '18 at 17:55
asked Nov 19 '18 at 17:23
AK23
11
asked Nov 19 '18 at 17:23
AK23
11
asked Nov 19 '18 at 17:23
AK23
11
11
Show your Minimal, Complete, and Verifiable example and make sure you ask a specific question. This feels more like something that can be answered by a tutorial, and SO is not great for that.
– jdv
Nov 19 '18 at 17:29
Thanks for the suggestion, posted the sample code. Let me know if it makes sense.
– AK23
Nov 19 '18 at 17:56
That really isn't your Minimal, Complete, and Verifiable example. It's just copied from that tutorial, right? It is unclear what your actual question is. What problem have you found with this code? BTW, no one is going to do a "walkthrough" with you because, well, this isn't what SO is for. I think you are asking how to bind your view and controller in this specific case, but, honestly, I don't think anyone is going to read through this tutorial code to figure it out. Maybe you could take the tutorial and write your own example that demonstrates the problem?
– jdv
Nov 19 '18 at 18:01
add a comment |
Show your Minimal, Complete, and Verifiable example and make sure you ask a specific question. This feels more like something that can be answered by a tutorial, and SO is not great for that.
– jdv
Nov 19 '18 at 17:29
Thanks for the suggestion, posted the sample code. Let me know if it makes sense.
– AK23
Nov 19 '18 at 17:56
That really isn't your Minimal, Complete, and Verifiable example. It's just copied from that tutorial, right? It is unclear what your actual question is. What problem have you found with this code? BTW, no one is going to do a "walkthrough" with you because, well, this isn't what SO is for. I think you are asking how to bind your view and controller in this specific case, but, honestly, I don't think anyone is going to read through this tutorial code to figure it out. Maybe you could take the tutorial and write your own example that demonstrates the problem?
– jdv
Nov 19 '18 at 18:01
Show your Minimal, Complete, and Verifiable example and make sure you ask a specific question. This feels more like something that can be answered by a tutorial, and SO is not great for that.
– jdv
Nov 19 '18 at 17:29
Show your Minimal, Complete, and Verifiable example and make sure you ask a specific question. This feels more like something that can be answered by a tutorial, and SO is not great for that.
– jdv
Nov 19 '18 at 17:29
Thanks for the suggestion, posted the sample code. Let me know if it makes sense.
– AK23
Nov 19 '18 at 17:56
Thanks for the suggestion, posted the sample code. Let me know if it makes sense.
– AK23
Nov 19 '18 at 17:56
That really isn't your Minimal, Complete, and Verifiable example. It's just copied from that tutorial, right? It is unclear what your actual question is. What problem have you found with this code? BTW, no one is going to do a "walkthrough" with you because, well, this isn't what SO is for. I think you are asking how to bind your view and controller in this specific case, but, honestly, I don't think anyone is going to read through this tutorial code to figure it out. Maybe you could take the tutorial and write your own example that demonstrates the problem?
– jdv
Nov 19 '18 at 18:01
That really isn't your Minimal, Complete, and Verifiable example. It's just copied from that tutorial, right? It is unclear what your actual question is. What problem have you found with this code? BTW, no one is going to do a "walkthrough" with you because, well, this isn't what SO is for. I think you are asking how to bind your view and controller in this specific case, but, honestly, I don't think anyone is going to read through this tutorial code to figure it out. Maybe you could take the tutorial and write your own example that demonstrates the problem?
– jdv
Nov 19 '18 at 18:01
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53379748%2fhow-to-bind-wpf-livechartslvc-enable-drill-down-view%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53379748%2fhow-to-bind-wpf-livechartslvc-enable-drill-down-view%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Show your Minimal, Complete, and Verifiable example and make sure you ask a specific question. This feels more like something that can be answered by a tutorial, and SO is not great for that.
– jdv
Nov 19 '18 at 17:29
Thanks for the suggestion, posted the sample code. Let me know if it makes sense.
– AK23
Nov 19 '18 at 17:56
That really isn't your Minimal, Complete, and Verifiable example. It's just copied from that tutorial, right? It is unclear what your actual question is. What problem have you found with this code? BTW, no one is going to do a "walkthrough" with you because, well, this isn't what SO is for. I think you are asking how to bind your view and controller in this specific case, but, honestly, I don't think anyone is going to read through this tutorial code to figure it out. Maybe you could take the tutorial and write your own example that demonstrates the problem?
– jdv
Nov 19 '18 at 18:01