Results 1 to 4 of 4

Thread: Question in regards to ExtJs integration with GXT via JSNI

  1. #1
    Sencha Premium Member
    Join Date
    Feb 2015
    Posts
    19

    Default Question in regards to ExtJs integration with GXT via JSNI

    Have a further question pertaining to the negative area chart.
    The backstory - I was able to successfully get the sample project at https://gist.github.com/branflake226...8e82d003f62eb3 to work. So, I've been looking at the JSNI approach as a start for GXT integration. I had then begun read up a little bit more about the Area chart within the ExtJs documentation. The screenshot below shows a simple chart that I had produced by making a very slight change to the code of the sample project mentioned above:




    For example, I find that I can change
    the fill color (positive, negative areas) from the green to a grey color with a red stroke by adding to the javascript code within private native void drawChartJsni():

    style: {
    fill: '#666666',
    stroke: "#ff0000",
    fillOpacity: 0.8
    }


    However my question is, Can one change the positive area fill to be one color, with the negative fill being another color? I've been looking a bit in https://docs.sencha.com/extjs/6.2.0/..._charting.html, and haven't seen anything to accomplish this thus far.

  2. #2
    Sencha Sr Product Manager
    Join Date
    Jan 2012
    Location
    Arlington, WA
    Posts
    1,178

    Default

    Turns out there is no option to change what color shows up in the negative region. There is an option to change the opacity so when the areas are stacked the colors change color. Would changing the opacity be enough to work for you?

    Here what I used to experiment with changing the color conditionally, but it changes the series color.
    Code:
    /**
     * Use $wnd to access js objects outside the gwt sandbox
     */
    private native void drawChartJsni(Element renderToEl) /*-{
      $wnd.Ext.create('Ext.chart.CartesianChart', {
        renderTo : renderToEl,
        width : 600,
        height : 200,
    
    
        store : {
          fields : [ 'name', 'g1', 'g2' ],
          data : [ {
            "name" : "Item-0",
            "g1" : -57,
            "g2" : -59
          }, {
            "name" : "Item-1",
            "g1" : 45,
            "g2" : -50
          }, {
            "name" : "Item-2",
            "g1" : 67,
            "g2" : 43
          }, {
            "name" : "Item-3",
            "g1" : -45,
            "g2" : -18
          }, {
            "name" : "Item-4",
            "g1" : 30,
            "g2" : 90
          } ]
        },
    
    
        legend : {
          docked : 'right'
        },
    
    
        axes : [ {
          type : 'numeric',
          position : 'left',
          grid : true
        }, {
          type : 'category',
          position : 'bottom'
        } ],
    
    
        series : [ {
          type : 'area',
          xField : 'name',
          yField : [ 'g1', 'g2' ],
          title : [ 'G1', 'G2' ],
          renderer: function (sprite, config, rendererData, index) {
           var item = rendererData.store.getData().items[index];
           if (sprite._field === 'g1') {
             var value = item.data.g1;
             if (value < 0) {
               sprite.setAttributes({
                  fillStyle: 'red',
              });
             }
           } else if (sprite._field === 'g2') {
             var value = item.data.g2;
             if (value < 0) {
               
             }
           }
          }
        } ]
      });
    }-*/;
    Screen Shot 2018-01-08 at 3.34.37 PM.png

  3. #3
    Sencha Premium Member
    Join Date
    Feb 2015
    Posts
    19

    Default

    Thanks for your feedback, but unfortunately the changing of the opacity wouldn't work for our purposes. However, I'll explore a bit more with the ExtJs because we're looking to find alternatives to our other stock charts (e.g. candlestick) which we currently have with a 3rd party provider. Although we use GXT, I do note that ExtJs does have example of the candlestick chart when I looked into the "kitchen sink".(GXT doesn't have the candlestick).

  4. #4
    Sencha Sr Product Manager
    Join Date
    Jan 2012
    Location
    Arlington, WA
    Posts
    1,178

    Default

    We do have something that might work. In this example we have a custom series with what looks like a candlestick chart.

    https://edash-dot-sencha-gxt-demos.a...quarterly:AAPL - demo
    https://github.com/sencha/gxt-demo-edash - source

    Would that help you get closer to your goal?

Similar Threads

  1. ExtJS 5.0 - How to call controller function from JSNI
    By SubratPattnaik in forum Sencha Ext JS Q&A
    Replies: 3
    Last Post: 16 Mar 2015, 10:30 PM
  2. ExtJS Integration
    By joevelardi in forum Ext 3.x: Help & Discussion
    Replies: 2
    Last Post: 17 May 2012, 1:41 AM
  3. Liferay integration question
    By TheBigOnion in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 9 Dec 2010, 12:55 PM
  4. ExtJS and Ext GWT integration
    By gjacquet in forum Community Discussion
    Replies: 3
    Last Post: 12 Jun 2008, 12:11 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •