locked
ASP.net Chart control X-axis values RRS feed

  • Question

  • User-153404742 posted

    Hi,

    I'm using Asp.net chart control to dynamically create graphs...however, having some issues displaying the graph based on the Interval I use and the actual value.  I have the following setting

    Chart1.ChartAreas[0].AxisX.Maximum = maxX + 1;
    Chart1.ChartAreas[0].AxisX.Interval = 1;
    Chart1.ChartAreas[0].AxisX.IntervalAutoMode = IntervalAutoMode.VariableCount;
    The problem is that If my minimum value for x axis is say 70, then it has 0 then 70 and increasing values after that....I want intervals to be starting from 0,1,2,3...etc so up until interval 69, graph should be empty and the first bar should show at the 70th interval but instead it's putting in 0 then 70,75,etc..on the x-axis.  It's also showing the default interval scale plus the interval scale I set.  Not sure how to skew graph to the right if the first 70 intervals do not have any data points.
    Tuesday, September 25, 2018 9:53 PM

All replies

  • User-893317190 posted

    Hi inkaln,

    If you want the chart to start at the 70th interval with the top 69 intervals, you could add 69 records. Their x axis is 1,2,3,4...69 and their y axis is 0.

    Below is my code.

      <asp:Chart ID="Chart1" runat="server" Width="1000px" >
            <Series>
                
                <asp:Series  ></asp:Series>
            </Series>
            <ChartAreas>
                
                <asp:ChartArea Name="ChartArea1"  ></asp:ChartArea>
            </ChartAreas>
        </asp:Chart>

    Code behind.

     protected void Page_Load(object sender, EventArgs e)
            {
                DataTable table = CreateDataTable();
                
             
                Chart1.ChartAreas[0].AxisX.Interval = 1;
             
                Chart1.ChartAreas[0].AxisY.Interval = 4;
                Chart1.DataSource = table;
                Chart1.DataBind();
                Chart1.Series[0].YValueMembers = "VolumeY";
            
                Chart1.Series[0].XValueMember = "VolumeX";
              
               
            }
            private DataTable CreateDataTable()
    
            {
    
               
                DataTable dt = new DataTable(); dt.Columns.Add("VolumeY"); dt.Columns.Add("VolumeX");
                
                DataRow dr;
                for (int i = 1; i <= 69; i++)
                {
                    //create the first 69 points
                    dr = dt.NewRow();
                    dr["VolumeY"] = 0;
                    dr["VolumeX"] = i;
                    dt.Rows.Add(dr);
                }
    
    
    
                dr = dt.NewRow(); dr["VolumeY"] = 38; dr["VolumeX"] = 70; dt.Rows.Add(dr);
                dr = dt.NewRow(); dr["VolumeY"] = 56; dr["VolumeX"] = 71; dt.Rows.Add(dr);
                dr = dt.NewRow(); dr["VolumeY"] = 79; dr["VolumeX"] = 72; dt.Rows.Add(dr);
                dr = dt.NewRow(); dr["VolumeY"] = 12; dr["VolumeX"] = 73; dt.Rows.Add(dr);
                dr = dt.NewRow(); dr["VolumeY"] = 35; dr["VolumeX"] = 74; dt.Rows.Add(dr);
                dr = dt.NewRow(); dr["VolumeY"] = 67; dr["VolumeX"] = 75; dt.Rows.Add(dr);
    
             
                return dt;
    
            }

    The result.

    In my case , I set Chart1.ChartAreas[0].AxisX.Interval = 5 , it shows well and the default interval scale disappears.

    Best regards,

    Ackerly Xu

    Wednesday, September 26, 2018 6:12 AM
  • User-153404742 posted

    Thank You...that works when binding it like that but I was just adding (x,y) points using the  Chart1.Series[0].Points.AddXY(record.key, record.cnt); where record is a linq object that I use to traverse through in a foreach loop.  So using the dataTable and binding it as you said works; however, the issue is that I want all the points shown on X axis even if the series in between does not have a x value....i.e. I've added the empty points in front by getting the minimum x value from my object and doing a loop to add interval before that.  How do I make it so that missing x values in between the series still shows even if there is nothing..i.e. My x values are as follows:

    14, 16, 18, 20  so I have the graph showing 1 thru 14 on x axis and then 16, 18, 20...but the 15 17 and 19 are missing....I want the x axis marks to show these numbers and I thought interval of 1 will make it show these but they don't. 

    Another thing is, I want a particular (x,y) point to be highlighted a different color bar.  I was able to acquire this but using dataTable logic is a bit changed so not sure if there's any easy way...using if (pt.YValues[0] == studentScoreKeyYValue) and setting pt.Color = Color.Red; won't work as y value could be same for multiple x points.

    Thanks for your help.

    Wednesday, September 26, 2018 4:49 PM
  • User-893317190 posted

    Hi inkaln,

    If you want to  show the intervals between 14,16,18,you could set AxisX.Interval=1.

    If you want to start from 1, you could set AxisX.Minimum = 1.

    If you want to choose the specify point , you could specify it xValue.

    Below is my code.

               Chart1.ChartAreas[0].AxisX.Interval = 1;
    
                Chart1.ChartAreas[0].AxisX.Minimum = 1;
             
                Chart1.Series[0].Points.AddXY(12, 80);
                Chart1.Series[0].Points.AddXY(14, 70);
                Chart1.Series[0].Points.AddXY(18, 56);
                Chart1.Series[0].Points.AddXY(30, 25);
                Chart1.Series[0].Points.AddXY(35, 77);
                Chart1.Series[0].Points.AddXY(35, 70);
                Chart1.Series[0].Points.FirstOrDefault(p => p.XValue == 35&&p.YValues[0]==70).Color = System.Drawing.Color.DarkGray;

    The last line of code use linq , you could choose other linq method such as where clause to achieve the same goal.

    The result.

     

    Best regards,

    Ackerly Xu

    Thursday, September 27, 2018 1:59 AM
  • User-153404742 posted

    not sure why it won't show the missing marks on intervals that don't have values...I've set AxisX.Interval to 1 and they don't show the ones that don't have values.....

    going to try using Chart.js to see if it's better.  Thank you for your help though.

    Friday, September 28, 2018 4:46 PM