I'm trying out react-nvd3.js, and I have no problem rendering a line chart with a single series. However, I am not sure on how to render with multiple series on the same chart (same axis).
I know that my data is in the correct format since the chart will render one series (the first series). The option to show/hide the two series does appear correctly. I am guessing adjusting the y="value_1" should do the trick, but have so far not been successful.
my data:
datum = [
{
values: series_1,
key: 'value_1',
},{
values: series_2,
key: 'value_2',
}
];
and my rendering:
<NVD3Chart id="lineWithFocusChart" type="lineWithFocusChart" datum={datum} x="label" y="value_1"/>,
It seems you have a problem with how you are referencing the dataset to the x and y axis.
Try changing your attributes to
x='key' and y='values'
<NVD3Chart id="lineWithFocusChart" type="lineWithFocusChart" datum={datum} x="key" y="values"/>
Related
My data needs to have an x and a y value, because I want to show the x value when the user hovers over the chart.
I only want to show a limited amount of labels on the x-axis though, which is why I am using categories. I keep getting Highcharts error #19 though, because the chart apparently tries to use the x-values provided in the data array.
I've played around with using type: 'datetime', since I am working with timestamps but I can't position the labels properly in this case and want to use categories instead.
I've created a jsfiddle to explain my problem: http://jsfiddle.net/kf6wrj37/
Instead of just the first and last x-value being display, I want my categories array
categories: [
'1453417200000',
'1456873200000',
'1460325600000',
'1463781600000',
'1467237600000',
'1470693600000',
'1474149600000',
'1477605600000',
'1481065200000',
'1484521200000',
'1487977200000'
],
to be displayed as labels on the x-axis.
How should I go about this? Is it even possible to use categories when my chart's data has x and y values?
I am using sparkline charts in jquery. This may be a bug or a property but when we pass only one single value to charts
the line does not form. Only after receiving more than 1 values it is formed.
Here is the jsfiddle.
This is my code
var values = [5,7];
// Draw a sparkline for the sparkline line chart element element
$('#line').sparkline(values, {
type: "line",
// Make the tooltip say "NA" for values of -1
tooltipFormat: "{{y:val}}",
tooltipValueLookups: {"val": {"-1": "N/A"}}
});
How can I change the code so that on receiving only one value also it should draw a line chart?
I'm facing an issue with my Highcharts-powered component.
Considering the basic column chart JSFiddle example: http://www.highcharts.com/demo/column-basic
My goal is to get the series name (Tokyo, New York, etc...) instead of Jan, Feb, Mar... on the x Axis.
Of course, I also need the columns to be grouped according to the series name. So, in this case, it would be 4 group of columns.
How can I do this ? Should I modify the categories block ?
Thanks a lot
EDIT
I've found the solution and updated the fiddle: http://jsfiddle.net/j658R/1/
But now, I need another bahvior. How can I specify more than one value for each serie ? For example, for "s1", how can I put 4 values for this series and so get 4 bars above the "s1" label on the X axis ?
Thanks
By separating each data point into a separate series, Highcharts will automatically group the data.
So the first data point of each series will be set to the first category. The second data point of series to the second category, etc.
All you need to do is set this up as a single series:
http://jsfiddle.net/j658R/6/
I am uisng tickPositioner to plot certain dates on X Axis.
xAxis: {
......
tickPositioner: function(min, max) {
// custom function which returns dates array.
return getDatesBetweenRange(min, max);
},
.....
}
using Highstock v1.2.5.
I also have Show/Hide series option in the Legend. It works fine no issues till here.
Now, When I hide any series from the chart.
I do not want to show those dates on x Axis who have no data as the series is hidden.
I was looking into source code at "getOffset:" method where Label is being created for each
Tick.
Is there any relation in API which returns all series points for this Tick ?
Or
Is there any relation in API that says that this tick pos (e.g. date) has no data visible ?
As I know, you can use a little different solution:
In tickPositioner you have access to all series for specific axis via this.series. Now, each of these series have xData which contains all x-values. All you need to do now is check if series is visible, and then compare your tick values (generated by getDatesBetweenrange()) with values in xData arrays - and return only these values which could be find there.
I have a datastructure like
[{ name: "a", value: 5000},
{ name: "b", value: 6000},
{ name: "c", value: 7000},
{ name: "d", value: 4000}]
I try to draw a yaxis using the name and the value column using two different yaxis components. However, it appears that the value yaxis is missing one of the the last value (I get 4 ticks for the "name" yaxis labels and 3 ticks for the "value" yaxis labels). See the following fiddle:
http://jsfiddle.net/namit101/AmHhg/73/
It does not draw 3 ticks, as you say. Axis component uses interpolation. The component works as expected, you are just not using it right. You should have individual labels on top of bars. Try changing the values like in this fiddle: http://jsfiddle.net/AmHhg/81/
Since the axis component interpolates between values, if you have the same value twice (bars 2 and 3) it makes sense it's displayed only once...
In the first case (first bar) the bar is changing it's value so we don't actually see it when we have the same value...
Read more about axis here: https://github.com/mbostock/d3/wiki/SVG-Axes.
Also try to look at Bob Monteverde's NVD3 axis components.
To fix this: if you do not actually want to use axis but rather labels, just add labels on top of each bar instead of having them displayed automatically like in the bar tutorials from Mike Bostock and Scott Murray (alignedleft).