I want to add in series dynamically into my chart. For instance, I have a grid of unknown number of products. When clicked on the particular row, the sales statistics of that product is added to the chart. Therefore, there may be multiple lines on chart.
The question is, how do I define the fields of the jsonstore for the yfield of the series which I do not know beforehand?
I stumbled across the same problem.
I searched the official forum for a bit, and this seems to be the official way:
You define an new store with all the fields, and then you use the bindstore method:
http://docs.sencha.com/ext-js/4-0/#!/api/Ext.chart.Chart-method-bindStore
Don't forget to define the appropriate series (setSeries-method) and then reload to store to redraw the chart.
if you still looking for the answer, you can go to this link
Dynamically generate axis and series in Extjs 4 I answered about it
Related
Ext.js has the Ext.sparkline.Bar class. Is it possible to make that bar chart stacked? I have implemented a cartesian as the widget for the widget column to achieve this effect, But it has led to very long load times (particularly when calling grid.reconfigure()). I'm wondering if a more lightweight version can be achieved via a sparkline.
The reason I'm thinking it may be possible is because of the stackedBarColor config in the Ext.sparkline.Bar class. Aside from that, I haven't been able to find anything in regards to implementing it.
Anyone have any idea?
If you look at the source for Ext.sparkline.Bar, do a CTRL+F, type: 'stacked'. You can follow the logic there. at the most basic level you can achieve a stacked bar chart by passing in an array of arrays into the values config: values: [[0,1,2,3,4,5],[0,1,2,3,4,5]]. Each array will be its own stack.
In EXTJS PIE Chart i want to sort top 10 values and display in Descending order.
Currently it gets all records from store and displays. I need only top 10.
Can anyone guide me to solve this issue?
Thanks
I do not think it's' pie charts' job to show top 10 values. you should provide a process that will transofrm the original store in what you really need. A plugin that replaces the original store might be an ideea.
You can try sorting and filtering the store. I manipulated example code in ExtJS docs and figured, that data is displayed by given order. Maybe if you apply sorter to store you might get desired effect. As for filtering: find min value of top ten values and apply filter that leaves only values above it. Might work, but I haven't tried it.
I'm working on getting familiar with Sencha charts. I'd like to know if there is any way that I can extend a column outside of the view port. For example I have data for which I have the min, first quartile, third quartile, and max for and I make a stacked chart out of these. However the max contains several outliers that probably won't be relevant to the user. What I want to do is end the view after the third quartile somewhere. Is there a simple and easy way to accomplish this?
You would have to work out the algorithm to get the percentage of records that go beyond your third quartile. That shouldn't be too hard.
Then create a function that set's the chart's width to a size which is equal to:
[viewport width] * (1 + [the percentage])
You can use the chart's setWidth method for this.
You can call this function in the chart's beforerefresh event (it should fire after the chart store data is loaded but before it is rendered on the chart) and also in the viewport's resize event.
I am trying to load dataset during initialization of the JFreeChart. But every time I tried to create a dataset with higher "number of item per series", the more data (all data) displayed visible in the chart (the bigger the dataset, the smaller the graph). But actually what I wanted is to have the fixed range of dataset values displayed on the chart while the rest is still hidden. Just the same way the data would normally be displayed in the actual trading platform, let's say Metatrader (MT4). First time when I open the chart I can see the screen filled with the only visible dataset of the chart and if I left-scroll the chart I will be able to see the old/history dataset as well. Does anyone have idea how to achieve this using JFreechart?
Really appreciate for any help or any thing/articles I can refer. Thanks so much!
You can use setRange() on either the domain or range axis, as shown in this fragment. If you've already tried this, it may help to edit your question to include an sscce and/or image that exhibits any problems you encountered.
I have a chart that will show energy generation over a day, month, or year, depending on the user's selection. To do this on a single chart, I need to be able to change the axes, series, and store when a button is clicked. I have managed to get this working, except I have the issue of the old data, series, and axes are still showing, and the new ones are just being laid on top. Is there a way to clear or refresh/redraw a chart? Or should I just split this into 3 charts, and hide/show the charts on button click?
Here is my current code for setting axes, series and store on the fly.
chart.axes.clear();
chart.axes.addAll(dailyAxes);
chart.series.clear();
chart.series.addAll(dailySeries);
chart.bindStore(Ext.data.StoreManager.lookup('dailyEnergy'));
A little late, but what's missing is this:
chart.surface.removeAll()
This isn't ideal, as you may get a flash of empty space as it destroys the previous elements, but it does avoid the hangover of old data.
i dont know what type of chart or what is dailyAxes
but i assume u want to change axes properties..hee is an example on how to do it:
Ext.getCmp('chartid').axes.get("gauge").maximum = 100;
then u need to redraw the chart after ur done:
Ext.getCmp('chartid').redraw();