Kendo team released their pannable/zoomable chart recently.
I would like to use it but I have the following problem: I need to display only the last X records of the available ones, and display the rest on zoom/ mouse move.
The example they presented on their site: http://demos.telerik.com/kendo-ui/bar-charts/pan-and-zoom displays the data starting from c0 to c10.
I would like to see the last 10 records from c89 to c99 instead of the first 10.
How to achieve that - can you please advice.
In their example, set the min and max of the category axis:
categoryAxis: {
min: 90,
max: 99,
labels: {
rotation: "auto"
}
},
Updated DEMO
Related
For better understanding of this question, let me show a working example in TradingView webpage, on which the following chart shows the combination of Momentum (area chart) + ADX (line chart):
As you can see, there are 2 vertical values, at left side is the ADX which the scale goes usually from 0 to 60(+-), but the right side, it can grow much more.
On my attempt to achieve the same here, the momentum (area chart) has a huge range, and the adx (lineal chart) goes from 0 to 60, so when it tries to fit both values under the same scale, my blue line looks like it's almost zero, in comparison with the area chart values. (Mouse-over the blue line showing that is currently 43)
So I think you get the point, would it be possible to have 2 scales/vAxis for each series of values?
I checked documentation already but nothing here seems to refer to what I mention:
https://developers.google.com/chart/interactive/docs/gallery/combochart
And just in case you need the options provided to the chart, nothing advanced, just the basic examples:
options:{
seriesType: 'area',
series: {
0: { type: 'line', color: 'blue' }
}
};
use option --> targetAxisIndex -- in the series option...
zero is the default v-axis
targetAxisIndex: 0
to create a second v-axis, assign one of the series to index 1
series: {
1: {
targetAxisIndex: 1
}
}
Found the solution over this post in the documentation, it is conceptually known as DUAL-Y Charts
https://developers.google.com/chart/interactive/docs/gallery/columnchart#dual-y-charts
I use Google Chart Calendar and I would like to get to know how to manipulate with the selected date. I can get selected 'row' and 'date' by using the listener for select:
google.visualization.events.addListener(chart, 'select', function() {
console.log(chart.getSelection()[0].date)
console.log(chart.getSelection()[0].row)
});
Here is official documentation.
How can I find the div with selected date by using the 'row'?
My goal is to manipulate it and add additional colors for following 5 days like this:
I also wanted to display tooltip after click which I did by cloning the current tooltip on hover but my intention is to get the selected div rather than row
each date on the calendar is represented by an svg <rect> element,
that has height and width attributes of 16
$('#chart_div rect[width="16"][height="16"]')
to find the selected element, calculate the day number of the year (1-366),
you can use the functions found in the following answer to calculate the day number...
calculate the day of the year (1 - 366)
then use jquery to get the element...
var selection = chart.getSelection();
if (selection.length > 0) {
var dayNumber = new Date(selection[0].date).getDOY();
var selectedRect = $('#chart_div rect[width="16"][height="16"]').get(dayNumber);
}
be sure to check the length of the selection,
the event is also fired when a selection is removed,
which will cause this to fail --> selection[0]
note: the chart probably won't let you change the style of the selected element,
because it will override any styles according to option --> calendar.focusedCellColor
but you can definitely change the 5 elements that follow the selected element,
using --> dayNumber + 1 -- etc...
I have 2 Highchart charts: column chart and point chart.
They share same xAxis config:
{
type: 'datetime',
min: Date.UTC(2010, 01, 02),
max: Date.UTC(2010, 01, 14),
startOnTick: true,
}
I want to align their x axises so values on corresponding dates are located on same vertical line.
How can I modify charts so that their x axises are properly aligned?
jsFiddle:
http://jsfiddle.net/vmdLommk/1/
The difference is caused by automatically applied padding to the axis for a column series, to account for the width of the column itself.
There are probably multiple things that can be done, but I find it easiest to manage this way:
Add a dummy column series to your line chart. This will force the same kind of padding that is applied to the column chart.
Example:
{
name: 'dummy',
showInLegend: false,
type: 'column'
}
Fiddle:
http://jsfiddle.net/jlbriggs/vmdLommk/2/
I have a strange behavior with my drill down to a waterfall chart. My middle column which is a negative value is not positioned on the top, instead it is going from zero down.
I have taken the exact same configuration and applied it to a first level waterfall chart and there it works fine.
Expected result: Column 'Discount' should go from 50 to 40
Actual result: Column 'Discount' goes from 0 to -10
JSfiddle for drilldown chart where waterfall is not as I want it:
[Drilldown][1]
JSfiddle for chart where waterfall is correct:
[Waterfall][2]
I can not figure out what is missing.
[1]: https://jsfiddle.net/a5x2g0q8/
[2]: https://jsfiddle.net/jfgycycp/
Based on the Highcharts example of Drilldown from column to pie, you need to set the chart type to be the drilled down type, i.e. to 'waterfall', and set the type of the top level series explicitly, i.e. to 'column'.
Updated chart options with type:
chart: {
type: 'waterfall',
height: 350,
zoomType: 'xy'
},
Updated top level series options with type:
series: [{
type: 'column',
data: [
{
name: 'Sweden',
y: 55,
drilldown: 'Sweden'
}]
}],
Updated Fiddle
I am trying to use highcharts for large heatmap generation.I have tried to modify demo code given on highcharts website.
As by default it sets date on x axis , I need to some other values then default data format on x-axis.I have followed few question on Stack overflow which gives me the required output but it's not correct as heatmaps does't seems right and when I hover on the result ,tooltip shows those date formats on hovering and generated heatmaps is also not correct.
My fiddle demo is: http://jsfiddle.net/ktamk1tp/1/
Note: I am getting error in posting js fiddle link according to SO guidelines.It would be appreciated if anyone can edit this.
Disabling colsize in series helps - http://jsfiddle.net/ktamk1tp/9/
(JS line 255)
//colsize: 24 * 36e5, // one day
Simple fix for your yAxis title is that you are setting it twice:
yAxis: {
title: {
enabled: true,
// THIS Axis title is not working, but the same method works for the xAxis
text: 'my axis'
},
categories: ['0', '1', '2', '3', '4'],
title: null
},
Remove title: null.
The reason your tooltip looks odd is that you are setting your axis to categories using string integers and then converting to a date stamp. The conversion of xAxis = '0' to javascript time is correct. The 0 js time is Jan 1 1970. You need to either send in the javascript timestamp and set the axis accordingly or you need to use categories that are dates ['Monday','Tuesday','Wednesday'....].