This is a migrated thread and some comments may be shown as answers.

Panning with groups

0 Answers 32 Views
Chart (HTML5)
This is a migrated thread and some comments may be shown as answers.
Yana
Top achievements
Rank 1
Veteran
Yana asked on 22 Jun 2020, 04:21 PM

I am trying to allow panning, instead chart is trying to fit everything at set width.

Please help!

 <telerik:RadHtmlChart runat="server" ID="chartChangeInJobs" 
                                Height="350" Width="100%"
                                Transitions="true"  Skin="Silk">
                    <ChartTitle Text="">
                    <Appearance Align="Center" Position="Top" Visible="false">
                        <TextStyle Bold="true" FontSize="14px" />
                    </Appearance>
                    </ChartTitle>
                    <Legend>
                        <Appearance BackgroundColor="Transparent" Position="Right" Visible="true"></Appearance>
                    </Legend>
                    <ClientEvents OnLoad="onChartLoad" />
                    <Pan Enabled="true" Lock="None" ModifierKey="None"/>
                    <Zoom Enabled="false">
                        <MouseWheel Enabled="true" />
                        <Selection Enabled="true" ModifierKey="Shift" />
                    </Zoom>
                    <PlotArea>
                        <Series/>
                        <Appearance>
                            <FillStyle BackgroundColor="Transparent"></FillStyle>
                        </Appearance>
                        <XAxis AxisCrossingValue="0" Color="black" MajorTickType="Outside" MinorTickType="Outside"
                                Reversed="false" >
                            <LabelsAppearance RotationAngle="0" Skip="0" Step="1" Mirror="false"  />
                            <TitleAppearance Position="Center" RotationAngle="0" Text="Years" Visible="false"></TitleAppearance>
                            <MinorGridLines Visible="false" />
                        </XAxis>
                        <YAxis AxisCrossingValue="0" Color="black" MajorTickSize="1" MajorTickType="Outside"
                            MinorTickType="None" Reversed="false">
                            <LabelsAppearance RotationAngle="90" Skip="0" Step="1"></LabelsAppearance>
                            <TitleAppearance Position="Center" RotationAngle="0" Text="Sum" Visible="true">
                                <TextStyle FontSize="14" />
                            </TitleAppearance>
                            <MinorGridLines Visible="false" />
                        </YAxis>
                    </PlotArea>
                    <Appearance>
                        <FillStyle BackgroundColor="Transparent"></FillStyle> 
                    </Appearance>                    
              </telerik:RadHtmlChart>

 

  chart.Pan.Enabled = True

            'ADD SERIES

            Dim series_atLeast1Category As Telerik.Web.UI.ColumnSeries = New Telerik.Web.UI.ColumnSeries
            series_atLeast1Category.Name = "At Least 1 Category"
            series_atLeast1Category.LabelsAppearance.Visible = False
            series_atLeast1Category.TooltipsAppearance.Color = Color.White

            series_atLeast1Category.Gap = "4"
            series_atLeast1Category.Spacing = "0.2"

            Dim series_moreThan1Category As Telerik.Web.UI.ColumnSeries = New Telerik.Web.UI.ColumnSeries
            series_moreThan1Category.Name = "More than 1 Category"
            series_moreThan1Category.LabelsAppearance.Visible = False
            series_moreThan1Category.LabelsAppearance.Position = HtmlChart.BarColumnLabelsPosition.InsideBase
            series_moreThan1Category.TooltipsAppearance.Color = Color.White

            Dim series_ElderPopulations As Telerik.Web.UI.ColumnSeries = New Telerik.Web.UI.ColumnSeries
            series_ElderPopulations.Name = "Elder Populations"
            series_ElderPopulations.LabelsAppearance.Visible = False
            series_ElderPopulations.TooltipsAppearance.Color = Color.White

            Dim series_MinorityPopulations As Telerik.Web.UI.ColumnSeries = New Telerik.Web.UI.ColumnSeries
            series_MinorityPopulations.Name = "Minority Populations"
            series_MinorityPopulations.LabelsAppearance.Visible = False
            series_MinorityPopulations.TooltipsAppearance.Color = Color.White

            Dim series_DisabilityStatus As Telerik.Web.UI.ColumnSeries = New Telerik.Web.UI.ColumnSeries
            series_DisabilityStatus.Name = "Disability Status"
            series_DisabilityStatus.LabelsAppearance.Visible = False
            series_DisabilityStatus.TooltipsAppearance.Color = Color.White

            Dim series_LimitedEnglishProficiency As Telerik.Web.UI.ColumnSeries = New Telerik.Web.UI.ColumnSeries
            series_LimitedEnglishProficiency.Name = "Limited English Proficiency"
            series_LimitedEnglishProficiency.LabelsAppearance.Visible = False
            series_LimitedEnglishProficiency.TooltipsAppearance.Color = Color.White

            Dim series_LowIncomePopulations As Telerik.Web.UI.ColumnSeries = New Telerik.Web.UI.ColumnSeries
            series_LowIncomePopulations.Name = "Low-Income Populations"
            series_LowIncomePopulations.LabelsAppearance.Visible = False
            series_LowIncomePopulations.TooltipsAppearance.Color = Color.White

            Dim strFormat As String = "#=series.name# (" & "#= kendo.toString(value,\'\\#,\\#\\#\\#.\\#\\#\\#\\#\\#\') #" & ")"

            For Each dr As DataRow In dt.Rows

                series_atLeast1Category.SeriesItems.Add(Format(dr("EJ_SingleEmp"), "#,###,###,##0.##"))
                series_atLeast1Category.TooltipsAppearance.ClientTemplate = strFormat

                series_moreThan1Category.SeriesItems.Add(IIf(dr("EJ_MultiEmp") Is System.DBNull.Value, 0, dr("EJ_MultiEmp")))
                series_moreThan1Category.TooltipsAppearance.ClientTemplate = strFormat

                series_ElderPopulations.SeriesItems.Add(IIf(dr("EJ_ElderEmp") Is System.DBNull.Value, 0, dr("EJ_ElderEmp")))
                series_ElderPopulations.TooltipsAppearance.ClientTemplate = strFormat

                series_MinorityPopulations.SeriesItems.Add(IIf(dr("EJ_RaceEmp") Is System.DBNull.Value, 0, dr("EJ_RaceEmp")))
                series_MinorityPopulations.TooltipsAppearance.ClientTemplate = strFormat

                series_DisabilityStatus.SeriesItems.Add(IIf(dr("EJ_DiabEmp") Is System.DBNull.Value, 0, dr("EJ_DiabEmp")))
                series_DisabilityStatus.TooltipsAppearance.ClientTemplate = strFormat

                series_LimitedEnglishProficiency.SeriesItems.Add(IIf(dr("EJ_LepEmp") Is System.DBNull.Value, 0, dr("EJ_LepEmp")))
                series_LimitedEnglishProficiency.TooltipsAppearance.ClientTemplate = strFormat

                series_LowIncomePopulations.SeriesItems.Add(IIf(dr("EJ_IncEmp") Is System.DBNull.Value, 0, dr("EJ_IncEmp")))
                series_LowIncomePopulations.TooltipsAppearance.ClientTemplate = strFormat

                chart.PlotArea.XAxis.Items.Add(dr("DistrictName"))

            Next

            chart.PlotArea.YAxis.MajorGridLines.Visible = False
            chart.PlotArea.XAxis.MajorGridLines.Visible = False

            chart.PlotArea.Series.Add(series_atLeast1Category)
            chart.PlotArea.Series.Add(series_moreThan1Category)
            chart.PlotArea.Series.Add(series_ElderPopulations)
            chart.PlotArea.Series.Add(series_MinorityPopulations)
            chart.PlotArea.Series.Add(series_DisabilityStatus)
            chart.PlotArea.Series.Add(series_LimitedEnglishProficiency)
            chart.PlotArea.Series.Add(series_LowIncomePopulations)

            chart.DataBind()

No answers yet. Maybe you can help?

Tags
Chart (HTML5)
Asked by
Yana
Top achievements
Rank 1
Veteran
Share this question
or