Dynamic Chart / Points / Series VB.NET

Question

Hi there, i've been looking on the forums for this kind of functionality, let me explain my requirement.

I've have some data that i would like to put on a StackedBar, but i can't do it dynamically, i hope you can help me on how to do this.

I have attached an image "00-Goal.jpg" where it showns the wanted chart. The image "01-SQL Data.jpg" contains an example of the data that i want to use on the chart.

In the example of the code, i just called the "COMEDOR" Type, but i would like to do all dynamically for all "Types", is there a way? On image 03 And image 04 i show 2 differents outputs so far, can u tell me where or what i'm doing wrong? Thanks in advance.

The ASP code is:
            <ej:Chart ID="chart_global_EvaluacionEmpleado" runat="server" IsResponsive="true">
                <Title Text="EVALUACION DEL EMPLEADO"></Title>
                <CommonSeriesOptions>
                    <Marker>
                        <DataLabel Visible="true" EnableContrastColor="true" TextPosition="Middle" VerticalTextAlignment="Center" HorizontalTextAlignment="Center"></DataLabel>
                    </Marker>
                </CommonSeriesOptions>
                <Legend Position="Bottom"></Legend>
            </ej:Chart>

The actual code behind [VB]:
    Private Sub global_EvaluacionEmpleado()

        Dim data = New List(Of Chart_StackedBars)
        Dim dt_fechaIni As System.Nullable(Of DateTime) = Nothing
        Dim dt_fechaFin As System.Nullable(Of DateTime) = Nothing
        'Dim dblAus, dblRelSup, dblDesmp, dblViolRegl, dblOtro, dblRedPlan, dblTermProy, dblDop, dblIncp, dblPerm As Double

        dt_fechaIni = FormatDateTime(tb_fechaInicial.Text, DateFormat.GeneralDate)
        dt_fechaFin = FormatDateTime(tb_fechaFinal.Text, DateFormat.GeneralDate)

        Dim qryComedor_qro = _db.vReporteES_Global_Comedor.Where(
                              Function(m) (m.Fecha_Encuesta >= dt_fechaIni And
                              m.Fecha_Encuesta <= dt_fechaFin)).GroupBy(Function(p) p.Comedor).Select(
                              Function(n) New With {
                                Key .Comedor = n.Key,
                                Key .Total = n.Sum(Function(y) y.Total)})

        'Dim i As Integer = 0
        Dim series As New Series

        'series = New series
        'series.Type = Syncfusion.JavaScript.DataVisualization.SeriesType.StackingBar100
        'series.Name = "COMEDOR"
        'series.XName = "Xval"
        'series.YName = "Yval"

        'chart_global_EvaluacionEmpleado.Series.Add(series)

        For Each p In qryComedor_qro
            'System.Diagnostics.Debug.WriteLine("Elemento: " & p.Comedor & "Valor: " & p.Total)

            series = New Series
            series.Type = Syncfusion.JavaScript.DataVisualization.SeriesType.StackingBar100
            series.Name = p.Comedor
            series.XName = "Xval"
            series.YName = "Yval"

            'series.Points.Add(New Points("COMEDOR", p.Total))
            chart_global_EvaluacionEmpleado.Series.Add(series)

            data.Add(New Chart_StackedBars("COMEDOR", p.Total))

        Next

        'chart_global_EvaluacionEmpleado.Series.Add(series)

        chart_global_EvaluacionEmpleado.DataSource = data
        chart_global_EvaluacionEmpleado.DataBind()

    End Sub

Attachment: Images_400a24.zip

Baby Palanidurai · Answer

Hi Alejandro,

Thanks for using syncfusion products,

We have analyzed your query. As for your requirement, we have prepared a sample based on your data. In that sample, we have filter the data based on the classification fields and assign to series data source in the controller page.

Please find the code snippet below to achieve this requirement,

Controller.cs:

Dim data As New List(Of LineChartData)()

data.Add(New LineChartData("Bueno(a)", 639, "COMEDOR"))

data.Add(New LineChartData("Malo(a)", 33, "COMEDOR"))

data.Add(New LineChartData("Muy Bueno(a)", 244, "COMEDOR"))

data.Add(New LineChartData("NO APLICA", 290, "COMEDOR"))

data.Add(New LineChartData("Regualar", 144, "COMEDOR"))

data.Add(New LineChartData("Bueno(a)", 140, "TRANSPORTE"))

data.Add(New LineChartData("Malo(a)", 290, "TRANSPORTE"))

data.Add(New LineChartData("Muy Bueno(a)", 300, "TRANSPORTE"))

data.Add(New LineChartData("NO APLICA", 20, "TRANSPORTE"))

data.Add(New LineChartData("Regualar", 520, "TRANSPORTE"))

data.Add(New LineChartData("Bueno(a)", 100, "OPPORTUNIDAD DE APRENDER"))

data.Add(New LineChartData("Malo(a)", 200, "OPPORTUNIDAD DE APRENDER"))

data.Add(New LineChartData("Muy Bueno(a)", 433, "OPPORTUNIDAD DE APRENDER"))

data.Add(New LineChartData("NO APLICA", 55, "OPPORTUNIDAD DE APRENDER"))

data.Add(New LineChartData("Regualar", 333, "OPPORTUNIDAD DE APRENDER"))

//

For Each dataValue As Object In data

If count < 5 Then

Dim tempData As New List(Of LineChartData)()

For Each dataValue1 As Object In data

If dataValue.Xvalue = dataValue1.Xvalue Then

tempData.Add(dataValue1)

End If

series.DataSource = tempData

series.XName = "YValue2"

series.YName = "YValue1"

series.Name = dataValue.Xvalue

Me.Chart1.Series.Add(series)

count += 1

End If

Screenshot:

Sample for your reference, can be find from below link,

https://www.syncfusion.com/downloads/support/forum/137190/ze/sample265865680

Kindly revert us, if you have any concerns.

Thanks,

Baby

Alejandro Villagomez · Answer

Thanks! I'll try it to test it in this days! Thanks a lot!

Baby Palanidurai · Answer

Hi Alejandro, 

Thanks for your update, 

Please let us know if you need any further assistance on this. 

Regards, 
Baby

Alejandro Villagomez · Answer

Thanks a lot, this works like a charm!Thanks!

Baby Palanidurai · Answer

Hi Alegandro,    Most welcomeThanks,Baby