Page 1 of 2 12 LastLast
Results 1 to 10 of 12

Thread: GXT Charts with negative area?

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

    Default GXT Charts with negative area?

    I've seen many profit and loss charts depicted as area charts with areas that are above the axis shaded green(positive), and those below the axis (negative values) shaded red. I can produce
    a P/L chart easily using the BarSeries(column) chart, those with positive values being green bars and negative values being red. However, I was wondering how to produce
    the line/area chart as I have originally mentioned with GXT. I've not found any examples thus far of a GXT charts that resembles that of a line chart/area chart which oscillates across an x axis like a P/L chart. I have however , seen something similar here with ExtJS: http://examples.sencha.com/extjs/6.5...#area-negative -the only difference being that the shading color is the same for the positive and negative area. Currently using GXT 4.0.2

    Thanks!
    Kathy

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

    Default

    I'm not sure our Area chart can do the negative side of the shade. I'll check into that tomorrow. By the way, some time next year, we're going to be offering using the Ext JS charts in GXT using JsInterop so they can easily be constructed with Java. It can be done now and I have examples if you want to use Ext JS charts as well in your GXT app. I'll get back with more tomorrow. Sorry for the delay.

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

    Default

    Thanks for the reply.. I'd like to see some of the examples. Currently we do not subscribe to Ext JS

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

    Default

    This example uses both JSNI and JsInterop to show how to construct an extjs chart.
    https://gist.github.com/branflake226...1cf0c956953026

    Here's another example using Ext JS using JsInterop and JSNI.
    https://gist.github.com/branflake226...f9fa6c420f69a1

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

    Default

    It doesn't look like the GXT area chart will work for what you want it too. Would you be interested in finding out more about how you could use the Ext JS charts with JsInterop or JSNI?

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

    Default

    I'll probably sign up and toy with a 30 day free trial of ExtJS in order that I may get your JsInterop/JSNI project to work and to explore the feasibility of integrating other charts (e.g. candlestick) in our GXT application.

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

    Default

    I did sign up for the 30 day free trial and have downloaded the ExtJS files. Now I need a bit of assistance to get your project working- namely the one with the extjs barseries chart that you mentioned at (https://gist.github.com/branflake226...1cf0c956953026). I created a gxt project in eclipse called "BarSeriesChartExample3". I then created the client package whereupon I then copied the files for BarSeriesChartExample3.java and Ext.java. (BTW I noticed that within BarSeriesChartExample3.java, that there's a reference to an import called "import com.sencha.gwt.jsinterop.examples.client.ext.Ext;"(???) as well as a reference to a 'com.example.NameValueModel' in method drawChart1(). what does that contain? method drawChart2(), which was commented out, does not reference that. Presumably drawChart1 is the one that takes advantage of the JsInterop while drawChart2() is for the jsni, correct?


    Anyhow, I copied the index.html file to the war folder. From glancing at your link at https://docs.sencha.com/gxt/4.x/guid...rop/ExtJs.html, it appears as though the loader (?? sencha cmd ????) isn't used for the Extjs/JsInterop/GXT setup. So following the example in index.html, I modified it to the following and added the
    specifed files/folders to my war folder:




    <!doctype html>
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>BarSeriesChartExample3</title>
    <script type="text/javascript" language="javascript" src="barserieschartexample3/barserieschartexample3.nocache.js"></script>
    <!-- extjs -->
    <link rel="stylesheet" type="text/css" href="extjs/theme-triton/resources/theme-triton-all.css">
    <link rel="stylesheet" type="text/css" href="extjs/charts/classic/triton/resources/charts-all-debug.css">
    <script type="text/javascript" src="extjs/packages/charts/classic/charts-debug.js"></script>
    <script type="text/javascript" src="extjs/ext-all-debug.js"></script>
    <script type="text/javascript" src="extjs/theme-triton/theme-triton/theme-triton.js"></script>
    </head>

    <body>

    </body>
    </html>


    The gxt project compiled, but threw a number of exceptions upon run (I had commented out drawChart1() and uncommented drawChart2() ).


    One of the exceptions was "Ext is not defined at charts-debug.js" This brings up the question - what are the minimal folders/files from the ExtJs package needed in order get your project to run?
    ExtJs is quite large!!

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

    Default

    Which versions of GXT and GWT are you using?

    Could you use GXT 4.0.2 and GWT 2.8.2?

    I can write up an example showing how the charts and models could be created for you. I might need to update it. Is the Ext JS version 6.5.2?

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

    Default

    Currently we're using GXT 4.0.2 and GWT 2.8.2

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

    Default

    Forgot to add, using version 6.5.2 of ExtJS (trial)

Page 1 of 2 12 LastLast

Similar Threads

  1. Negative Axis Charts - ExtJs 4
    By dillu5c5 in forum Ext: Q&A
    Replies: 1
    Last Post: 30 Apr 2014, 6:07 PM
  2. Area Chart With Negative Values
    By uksencha in forum Sencha Touch 2.x: Discussion
    Replies: 1
    Last Post: 25 Jul 2013, 12:51 AM
  3. [INFOREQ] Charts with SVG - Negative values
    By Evolic in forum Ext:Bugs
    Replies: 1
    Last Post: 13 Jun 2012, 2:00 AM
  4. Stack charts with negative values
    By elloa in forum Ext: Q&A
    Replies: 1
    Last Post: 22 Dec 2011, 11:36 AM
  5. Stacks charts with negative values
    By elloa in forum Sencha GXT Q&A
    Replies: 1
    Last Post: 21 Dec 2011, 2:19 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
  •