I have 24 hours format values on y axis.I want to display all 24 hours on y-axis.But in heatmap using zingchart display hour in gap of 3 as shown in image.
So,what is the setting required to display all hours on y axes.
You can try setting the following attributes to adjust the max amount of items visible:
scaleX: {
maxItems : 24,
itemsOverlap : true
}
There is full information in our help center about showing hidden labels on the x-axis -> https://help.zingsoft.com/en/articles/3546391-zingchart-how-to-show-all-labels-on-my-axis
Related
I have got an X axis and it has the months displaying. However for the month of august it is displaying twice...I am not to sure why that is. I would like to remove the duplicated Aug-2020 on the x Axis.
Here is a coding sandbox I created to show what I mean.
I don't know what you're trying to achieve but in your app.js file change maxTicksLimit: 5, to maxTicksLimit: 2, and it will change to single value for Aug.
You have to calculate the chart before plotting.
I am trying to shift the x-axis ticks so that they are aligned with each bar rect. The idea is that the bars correspond to an event between the hours of x - y and the ticks are a little mis-leading. I've tried to use tickFormat() but that seems to only effect the labels. I've also looked through the D3 docs as the react-vis docs mention them quite a bit.
current chart
So ideally the bar that is centered on the 10am position would be shifted to the right so its centered between 10am - 11am. Is there another function that I can use to accomplish this?
I was able to accomplish this after looking through all of the open issues on the react-vis repo. Luckily in my case there would always be a set number of points so this fix will work but if your ticks are dynamic you would need to calculate the amount to move the ticks. In my case there are 24 total ticks and the width of the chart is 962px so each tick is about 40 pixels apart. To shift each tick over half way translate the x location by half of the width between each tick (minus 1 to account for the 1px width of the tick line itself). Also had to shift the text down because once I messed with the transform it cleared the existing transform added by the library. Not the best but hopefully this will help someone in the future. 👍
.rv-xy-plot__axis__tick {
line {
transform: translate(-19px, 0);
}
text {
transform: translate(-19px, 14px);
}
}
Using #Justin's answer above, I was able to nudge my XAxis labels using transform like so:
<XAxis
tickLabelAngle={-45}
style={{
text: {
stroke: "none",
fill: "#FF0000",
fontSize: 10,
fontWeight: 100,
transform: "translate(10px, 0)",
},
}}
/>
i'm using anychart stock 8.1.0. I have a dataset with 24 hours of date with per-second resolution. I would like for only a small 30 seconds subset of that data to be shown/zoomed on load.
I could not find out how to do this so i tried adding a range selector option like below but i couldn't get that working either.
rangeSelector.ranges([{
'text': 'Testing',
'startDate': '2006 May 16 13:00:00',
'endDate': '2006 May 16 13:00:30'
}
If i use the range selector slider i can zoom as i require but how do i define this in code ?
So to recap i'd like
have the chart zoomed on load for a specific time range of type
start-stop in format of dd/MM/yyy mm:ss
have range selector button options for various time ranges of same format as above.
thank you.
Yes, you can define your own custom periods for rangeSelector, but if you want to zoom to specific period on load you have to call selectRange() method after chart drawing.
If you want to show only 30 seconds in the beginning of your series you should put the following line into your code:
chart.selectRange("second", 30, "first-date", true);
You can learn more about this method here
And find a similar example of using it here
I have a grid and a bar chart immediately underneath it, all representing the same data (same store). The grid is obviously sortable based on clicking column headers, and the chart auto-refreshes based on the data that is shown in the grid.
Trouble is, bar charts seem to sort the underlying store data in the opposite direction of the grid. So for example when the grid is sorted to show...
Name / Sales
Joe / 100
Sally / 80
Tim / 60
...the bar chart shows:
[bar 1 - top]: Tim / 60
[bar 2 - mid]: Sally / 80
[bar 3 - bot]: Joe / 100
This is counter-intuitive to the user -- they would expect the sort of the grid and chart to be consistent. (Column charts work well - Joe/Sally/Tim from left column to right -- but that is not an option on this page for other reasons.)
Is there a way to change this so that the bar chart sorts the other direction?
Perhaps the store itself could be re-sorted within the chart class definition? If so, how would that be done exactly? And would this affect how the grid displays its data?
1. Load your grid store:
gridStore.load({
callback: function(records, operation, success) {
if(success){
// Load data from first Store (grid) to second Store (chart)
chartStore.loadData(records);
// Sort chart store data:
chartStore.sort('field','ASC');
}
}
});
2. sort the grid store:
gridStore.sort('field','DESC');
Thanks to mfruizs2 for the pointers - helped get me on the right track. For anyone coming by in the future, here is what I did to solve this:
//get the # of records in the current grid page
var gridStoreItems = gridStore.getCount();
//setup a separate store just for the *chart*
var chartStore = Ext.create('Ext.data.ArrayStore', {
model : gridStore.model,
proxy : gridStore.proxy,
storeId : 'chartStore',
});
//loop records of current *grid* store, from bottom to top
//and add the bottom grid store record to the top of the chart store, and so on
for (var i=(gridStoreItems-1); i>=0; i--)
{
chartStore.add(gridStore.getAt(i).data);
}
Then use chartStore as the basis for the bar chart. It will now display chart records in the same sequence as shown in the grid.
Here's hoping that Sencha adds a simple sorting config to charts in the future...
this is what I'm trying to do...
I have a chart with a line series with markers in it. In the X axis I have dates and in the Y axis a number. So lets say I have in x dates from yesterday to next week. And each day has a corresponding Y axis value.
What I want to do is change the color of the marker that belongs to the actual date.
In other words, to make it clearer, I want to change the color of a single marker in a ExtJS line series. I know of markerConfig but that doesn't seem to help since it applies to all markers.
I haven't found anything like this around so I stopped here to see if you guys could help me.
Thanks in advance!
I think the easiest way to do this is to highlight a single datapoint in a series.
First, define your highlight style.
Ext.create('Ext.chart.Chart', {
...
series: [{
type: 'line',
highlight: {
size: 10,
radius: 10,
fill: 'red'
},
...
});
Then, select the appropriate datapoint in your series and call the highlightItem() method. Here's an example showing how to use the method.
var series = myChart.series.get(0);
series.highlightItem(series.items[2]); // highlight the 3rd data point in the series
The result would look something like this.