I am going to use Extjs gauge chart in my application, I want to update some config option on its store update,
for eg. you can see code on bellow link.
Ext JS Chart Kitchen Sink
In this code I am used Temp chart, There I want to update maximum (which is maximum: 250 in code, Look 3rd chart) On its store. I am able to update its store but not maximum config vaiable. is any solution from you.
I found the solution for my problem getting lots of efforts
these bellows line get solved my problem.
by using this we can change axis or series Config.
Ext.getCmp('chartid').axes.get("gauge").maximum = 100;
Ext.getCmp('chartid').redraw();
Related
I am using the Polaris library by Shopify to build an app. I am using RangeSlider with dual thumb for the filter.
However, when I add it as a shortcut inside my Filters, the slider does not work, i.e., I am not able to drag the ends of the slider
Note - If you go to More Filters -> Money Spent, the slider works fine without any issues, and I am able to drag both ends.
I tried manipulating the callback, but it didn't help and also does not throw any errors while debugging.
Reproducible Code Link to CodeSandbox => check Money spend filter
The problem seems to be that you are saving the data the user enters into rangeValue, but the code you have to add the filters (Line 198) is looking at moneySpent instead. Since moneySpent is never set, the filter is never added.
how to change default color of column graph using GemBox version 37.3.30.1160.
If I create a .xlsx template and save the same it will work but I am trying to save the file as PDF and that's where its not working.
EDIT 2019-11-15:
In newer versions of GemBox.Spreadsheet (version 4.5 and above) we added support for chart formatting, see the version history page.
You can find Excel Chart Formatting example here. Also, here is another example in C# that shows how to change color of various chart parts like series, background, text, etc.
ColumnChart chart = ...
chart.SelectData(worksheet.Cells.GetSubrangeAbsolute(0, 0, 12, 1), true);
var red = DrawingColor.FromName(DrawingColorName.Red);
var green = DrawingColor.FromName(DrawingColorName.Green);
var blue = DrawingColor.FromName(DrawingColorName.Blue);
chart.Series[0].Fill.SetSolid(blue);
chart.Series[0].Outline.Fill.SetSolid(red);
chart.Fill.SetSolid(green);
chart.PlotArea.Outline.Fill.SetSolid(red);
chart.Outline.Fill.SetSolid(red);
ORIGINAL ANSWER:
GemBox.Spreadsheet currently does not have an API support for chart components styles. This information is currently supported only through a preservation and that is why it works for XLSX file, but the preserved information is lost when the input and output file format are not the same and that is why it does not work for PDF files.
However note that we do intend to implement this sometime in the future and if interested please feel free to vote for this feature in order to boost its priority.
But at this moment I cannot tell you exactly when it will be implemented.
In sencha (http://www.sencha.com/products/extjs/) I was wondering is it possible if i can have a bar chart, or a pie chart and have the data exported? I would like to go back from a chart to a printed data in my hand.
** if i have a bar chart that has data already plotted on it and now i would like to get the x-axis in one column and have the y-axis in another column but i would like to have that exported so i can printed it out. I do not want the chart to be printed.
My question is: Is there a way to do that? and if so what is the code that is needed or used?
CAN I ALSO DO IT IN ZINGCHARTS.COM
what about zingcharts?? i have done my research and found that they have this code called zingchart.exec("yourChartId", "exportdata"); i just dont know how exactly to put it in my zingcharts.rendering function can i get help on that?
I see that this is an older question, but hopefully this will help you or someone else with a similar issue.
The ZingChart exportdata method doesn't actually go in the zingchart.render method, it's its own API method.
zingchart.exec('myChartDiv', 'exportdata', {
url : 'www.zingchart.com/resources/exportdataurl.php'
});
'myChartDiv' refers to the id given to the div in your page where your chart renders. You can either set the 'url' option in the export data method options, like I did above or you can set the 'exportdataurl'. The data is sent as POST data via HTTP.
Just to get the data? Sure.
Charts are populated by a store object, which is a container with all the data.
To get the data out of the store is pretty forward.
Eg:
store.each(function(store,record,e){console.log(record);});
You can probably use Export store to Excel user extension published on Sencha forum.
Hi I'm trying to accomplish a time stacked bar chart where the input data looks like this:
{"name":"Folienwechsel",
"starttime":"02/29/2012 09:50:07",
"endtime":"02/29/2012 09:50:46",
"duration":38546.0},
{"name":"Pause",
"starttime":"02/29/2012 09:50:46",
"endtime":"02/29/2012 09:51:36",
"duration":49943.0},
{"name":"Wartezeiten",
"starttime":"02/29/2012 09:51:36",
"endtime":"02/29/2012 10:04:43",
"duration":787086.0}
As you see the start time and end time are continued, when a state finish the other one starts, I've been trying with the timeaxis, based on this tutorial http://aboutfrontend.com/extjs/extjs...-and-timeaxis/, and also with the stackbar example in sencha http://docs.sencha.com/ext-js/4-0/#!...tackedBar.html. An image example of what I'm trying to do:
I already done this with HighChart, but my company has bought ExtJs then I need to do this with Extjs, then it would be great if someone can tell me if its possible, and if it is, then if could guide me with an example or how should I start...
Thanks.
I spent some time working with time based charts in ExtJs4 and I have to warn you - that TimeAxis is buggy. I even had to replace my time axes with simple numeric ones. The idea is simple - convert your dates into the timestamps and pass them to your numeric axis.
Stackbar chart is a good choice for you. See this example (modified a bit), from official sencha examples:
http://jsfiddle.net/UDwz7/
How can I draw an stock chart or a line chart with hundreds points?
I disabled animation in regular line chart, but not successful and still too heavy and slow.
I've recently written a blog post on creating stock charts in Ext JS 4 - http://www.scottlogic.co.uk/2011/12/ext-js-4-stock-charts/. It uses a couple of hundred points and performs fine in modern browsers and isn't too bad in IE7-8.
This said however, even after messing with the Ext JS build system, the minimum Ext build required to run the charts is still something like .5MB which is too heavy weight for some applications. The CSS however can be chopped down to just a few rules - if you're willing to spend the time trying to figure out which ones you need out of the huge ext-all.css!
My app is completely Ext-JS based. However, when performance is a problem, I use flot. The API is much better designed (and I'm an Ext-JS fan boy) and it performs much better. This is at the expense of working with raw pixel data (canvas, which is pixel based) if you need to interact with the chart. Since in Ext-JS, everything is an SVG object, you can simply attach event handlers to the lines, or anything else you draw yourself.
For example. For a wave monitor, we use flot. For another chart where we let the user drag and drop some lines on the screen, we use Ext-JS charts.
Here's a simplistic wrapper to use flot as an Ext.Component
Ext.define('cci.view.wavemon.Flot', {
extend: 'Ext.Component',
alias: 'widget.cci-flot',
/**
* #cfg {number[][]} data The data to be drawn when it gets rendered
*/
data: null,
/**
* #cfg {object} flotOptions
* The options to be passed in to $.plot
*/
flotOptions: null,
/**
* #property
* The Flot object used to render the chart and to manipulate it in the future. It will only
* be available after the first resize event
* You may not set this property but you are free to call methods on it
*/
flot: null,
initComponent: function() {
this.callParent(arguments);
// The only time that we're guaranteed to have dimensions is after the first resize event
this.on('resize', function(comp) {
if (!this.flot) {
this.flot = $.plot(this.getTargetEl().dom, this.data, this.flotOptions);
} else {
// Flot knows to look at the containers size and resize itself
this.flot.resize();
}
}, this);
}
});
If you generate extjs code dynamically (php, python, asp.net...) and data source is static - you can easily generate chart to png and load it at ext.panel.
I've found flot (http://code.google.com/p/flot/) to have much better performance with many points / series, whereas the performance of the ExtJS 4 charts was unacceptable. Flot also has a clearer API and reads data in a simple format.
There's a complete example on how to create stock line charts for Sencha Charts here:
http://dev.sencha.com/deploy/touch-charts-1.0.0/examples/Stock/
As you can see, the example handles > 100 data points easily.
The example is for touch charts, but the API is nearly identical to what's in Sencha's ExtJS 4. Copy and pasting the chart instanciation code should do the work.