[OPEN] [#372] line chart with multiple axes and multiple line series....

  1. #1

    [OPEN] [#372] line chart with multiple axes and multiple line series....

    Hi,

    I have following questions regarding Line Chart:


    1) I want to create a line chart where the y-axis has both positive and negative values and I would like to display positive values above x-axis and negative values below x-axis ( X axis is on 0 ).

    How do I accomplish this?

    So far, i have not seen any chart in examples with any negative values below X axis.
    Pls let me know.


    2) In another chart Application, I have X axis as Months and Y axis as some numbers that I retrieve from Database....the values in Y axis also have nulls in between the numbers like e.g, 1,3,null,null,6,8,null etc....


    currently, the chart is behaving in such a way that nulls are considered as 0s in line series......hence the line series connects like this-
    1,3,0,0,6,8,0...etc....

    but, I want to connect only non-null numbers in the series....Let me know how i can accomplish that....


    3) In a chart, if i dont declare minimum and maximum values for the Y-axis ( any axis for that matter...)
    , does it take the minimum value and maximum value of the y axis data that is bound from the Database ???

    If not, how can i set minimum and maximum values dynamically in c# ? also let me know how i can do that in Javascript ? Also, if i set those values again ,
    do i need to recreate / redraw the chart ? also let me know what else I should do once i set min and max values dynamically ?

    fyi, I am using ajax proxy to bind data to axes in the chart...so, once it is bound to the chart store, how can i take the minimum and maximum values ?


    4) I am using a vertical marker plugin for the chart...
    <Plugins>
                            <ext:VerticalMarker ID="VerticalMarker2" runat="server">
                                <XLabelRenderer Handler="return value;" />
                            </ext:VerticalMarker>
                        </Plugins>

    but the vertical marker is not appearing on screen. screenshot attached...how can i resolve this ?


    5) Initially, I am binding empty data to chart store....but in an application event ( slider movement..) I have a direct method where i reload chart store based on this slider value...

    pls let me know how I can get the X axis and Y axis values in code behind after reloading store ?

    Actually, I am usng store load direct event....so I am able to get the chart data as json...but still wondering if there is any other way that avods lot of postbacks to server (that makes app really slow...) ????????



    aspx code for graph :

    ----------------------

    
      <ext:Chart ID="MonthlyChart" Frame="true" runat="server" Width="900" Animate="true" Theme="ChartTheme"
        Height="300" InsetPadding="30"  >
        
           <LegendConfig Position="Bottom" />
        <Loader ID="Loader1" runat="server">
            <LoadMask ShowMask="true"></LoadMask>
        </Loader>
         
         <Store>
                 <ext:Store ID="MonthlyChartStore" runat="server" AutoLoad="true">
                    <Proxy>
                        <ext:AjaxProxy Json="true" Url='<%#MChartURL%>' AutoDataBind="true" >
                            <ActionMethods Read="POST" Create="POST" />
                            <Headers>
                                <ext:Parameter Name="Accept" Value="application/json" />
                                <ext:Parameter Name="Content-Type" Value="application/json" />
                            </Headers>
                            <Reader>
                                <ext:JsonReader Root="" />
                            </Reader>
                            <Writer>
                                <ext:JsonWriter Root="" Encode="true" />
                            </Writer>
                              <ExtraParams> 
                                   
                                <ext:StoreParameter Name="InstanceID" Value="-1"/>  
                                <ext:StoreParameter Name="ISMONTH" Value="month"/> 
                                <ext:StoreParameter Name="GrowthValue" Value="0"/>
                                <ext:StoreParameter Name="MonthsBack" Value="0" />                             
                              
                                </ExtraParams>
                        </ext:AjaxProxy>
                    </Proxy>
                    <Model>
                        <ext:Model ID="MChartStoreModel" runat="server">
                            <Fields>
                                <ext:ModelField Name="PROJECTED_DATE" Type="String">
                              <%--  <Convert Fn="TrimText" />--%>
                                </ext:ModelField>
                                <ext:ModelField Name="PROJECTED_USAGE_MONTH" Type="Float" >
                               <%-- <Convert Fn="percentageConvert" />--%>
                                </ext:ModelField>
                            <ext:ModelField Name="MAX_LINE" Type="Float" />
                            <ext:ModelField Name="PERCENT_GROWTH" Type="Float" />
                            <ext:ModelField Name="PROJECTED_TREND" Type="Float" />
                            <ext:ModelField Name="PERC_GROWTH_TREND" Type="Float" />
                            
                               
                            </Fields>
                        </ext:Model>
                    </Model>
    
                    <DirectEvents>
                    <Load OnEvent="MonChartStoreLoad">
                    <ExtraParams>
                    <ext:Parameter Name="MonthChartData" Value="App.MonthlyChartStore.getRecordsValues()" Mode="Raw" Encode="true" />
                    <ext:Parameter Name="jsonRecord1" Value="Ext.encode(#{MainTable}.getRowsValues({selectedOnly:true}))"
                                                Mode="Raw" />
                    </ExtraParams>
                    </Load>
                    </DirectEvents>
    
                </ext:Store>
    </Store>
    
    
        <Axes>
            <ext:NumericAxis Fields="PROJECTED_USAGE_MONTH" Position="Left" Title="Projected Usage(Mon)" AxisID="Axis1" MajorTickSteps="5">
              <%--  <GridConfig>
                    <Odd Opacity="1" Fill="#ddd" Stroke="#bbb" StrokeWidth="0.5" />
                </GridConfig>--%>
            </ext:NumericAxis>
    
              <ext:NumericAxis 
                                Title="Percent Growth"
                                Fields="PERCENT_GROWTH" MajorTickSteps="5"
                                Position="Right" 
                             >
                                <LabelTitle Fill="#94ae0a" />
                                <Label Fill="#94ae0a" />
                            </ext:NumericAxis>
    
    
               <ext:CategoryAxis Fields="PROJECTED_DATE" Position="Bottom" Title="Months Out(date)" />
           
         <%--   <ext:TimeAxis Fields="PROJECTED_DATE" Position="Bottom" Title="12 Months Out(date)" DateFormat="MMM dd"
                                Constrain="false" />
             --%>
           
        </Axes>
        <Series>
       
      
    
            <ext:LineSeries SeriesID="Series1" Axis="Left" XField="PROJECTED_DATE" YField="PROJECTED_USAGE_MONTH">
                <HighlightConfig Size="7" Radius="7" />
                <MarkerConfig Type="Cross" Size="3" Radius="3" StrokeWidth="0" />
                <Tips ID="Tips1" runat="server" TrackMouse="true" Width="140" Height="35">
                    <Renderer Handler="this.setTitle(storeItem.get('PROJECTED_DATE') + '<br />' + storeItem.get('PROJECTED_USAGE_MONTH'));"></Renderer>
                </Tips>
            </ext:LineSeries>
    
    
              <ext:LineSeries SeriesID="Series11" Axis="Left" XField="PROJECTED_DATE" YField="MAX_LINE" Smooth="3">
                <HighlightConfig Size="7" Radius="7" />
                <MarkerConfig Type="Circle" Size="3" Radius="3" StrokeWidth="0" />
                <Tips ID="Tips2" runat="server" TrackMouse="true" Width="75" Height="35">
                    <Renderer Handler="this.setTitle(storeItem.get('PROJECTED_DATE') + '<br />' + storeItem.get('MAX_LINE'));"></Renderer>
                </Tips>
            </ext:LineSeries>
    
    
             <ext:LineSeries SeriesID="Series21" Axis="Right" XField="PROJECTED_DATE" YField="PERCENT_GROWTH" Smooth="3">
                <HighlightConfig Size="7" Radius="7" />
                <MarkerConfig Type="Circle" Size="3" Radius="3" StrokeWidth="0" />
                <Tips ID="Tips3" runat="server" TrackMouse="true" Width="140" Height="35">
                    <Renderer Handler="this.setTitle(storeItem.get('PROJECTED_DATE') + '<br />' + storeItem.get('PERCENT_GROWTH'));"></Renderer>
                </Tips>
            </ext:LineSeries>
    
    
            
             <ext:LineSeries SeriesID="Series31" Axis="Right" XField="PROJECTED_DATE" YField="PERC_GROWTH_TREND" Smooth="3">
                <HighlightConfig Size="7" Radius="7" />
                <MarkerConfig Type="Circle" Size="3" Radius="3" StrokeWidth="0" />
                <Tips ID="Tips4" runat="server" TrackMouse="true" Width="140" Height="35">
                    <Renderer Handler="this.setTitle(storeItem.get('PROJECTED_DATE') + '<br />' + storeItem.get('PERC_GROWTH_TREND'));"></Renderer>
                </Tips>
            </ext:LineSeries>
    
    
    
            
             <ext:LineSeries SeriesID="Series41" Axis="Left" XField="PROJECTED_DATE" YField="PROJECTED_TREND" Smooth="3">
                <HighlightConfig Size="7" Radius="7" />
                <MarkerConfig Type="Circle" Size="3" Radius="3" StrokeWidth="0" />
                <Tips ID="Tips5" runat="server" TrackMouse="true" Width="140" Height="35">
                    <Renderer Handler="this.setTitle(storeItem.get('PROJECTED_DATE') + '<br />' + storeItem.get('PROJECTED_TREND'));"></Renderer>
                </Tips>
            </ext:LineSeries>
            
    
    
           
        </Series>
    
         <Plugins>
                            <ext:VerticalMarker ID="VerticalMarker2" runat="server">
                                <XLabelRenderer Handler="return value;" />
                            </ext:VerticalMarker>
                        </Plugins>
        </ext:Chart>
    Attached Thumbnails Chart.png  
    Last edited by Daniil; Nov 07, 2013 at 2:04 PM. Reason: [OPEN] [#372]
  2. #2
    Hi @Sowjanya,

    Quote Originally Posted by Sowjanya View Post
    1) I want to create a line chart where the y-axis has both positive and negative values and I would like to display positive values above x-axis and negative values below x-axis ( X axis is on 0 ).

    How do I accomplish this?

    So far, i have not seen any chart in examples with any negative values below X axis.
    Pls let me know.
    Unfortunately, it is not supported. I asked Sencha about it.
    http://www.sencha.com/forum/showthread.php?275519

    As for the other questions. Please keep one issue per thread.

    You could try to draw an axes manually, but it is a challenge task.
  3. #3
    Sencha opened a ticket.

    We created an Issue to monitor.
    https://github.com/extnet/Ext.NET/issues/372

Similar Threads

  1. [CLOSED] Configure Legend of Line Chart Series
    By PriceRightHTML5team in forum 2.x Premium Help
    Replies: 31
    Last Post: Oct 19, 2013, 5:32 AM
  2. [CLOSED] Handle null values in line chart series
    By PriceRightHTML5team in forum 2.x Premium Help
    Replies: 12
    Last Post: Jul 29, 2013, 9:50 AM
  3. [CLOSED] Line chart- Working with multiple lines
    By PriceRightHTML5team in forum 2.x Premium Help
    Replies: 10
    Last Post: Jul 29, 2013, 5:09 AM
  4. How to use Line series Chart in version 1.3
    By Binai in forum 1.x Help
    Replies: 1
    Last Post: May 08, 2013, 1:46 PM
  5. Replies: 3
    Last Post: Jul 13, 2012, 11:28 AM

Tags for this Thread

Posting Permissions