NVD3 have multi bar chart and line plus bar chart. But it seem like, there isn't something like multibar plus line chart.
I sort of played around line plus bar chart to make it multi bar line chart.
Here is the format in which line plus bar graph accepts data:
[
{
"key" : "Quantity",
"bar": true,
"values" : [[1136005200000, 127], [1138683600000, 271]]
},
{
"key" : "Price",
"values" : [[1136005200000, 71.89], [1138683600000, 75.51]]
}
]
So to add multiple bars in this, i tried changing the data to:
[
{
"key" : "Quantity",
"bar": true,
"values" : [[1136005200000, 127], [1138683600000, 271]]
},
{
"key" : "Quantity1",
"bar": true,
"values" : [[1136005200000, 127], [1138683600000, 271]]
},
{
"key" : "Price",
"values" : [[1136005200000, 71.89], [1138683600000, 75.51]]
}
]
This shows both labels, Quantity and Quantity1 at the top but to total no of bars is still two(one for each instead of two for each).
Since I am getting the labels at the top, I somehow feel that this is doable :)
Here is the fiddle.
Explaining the problem statement: Lets say there is a book store with various books. I want to show the max and min no of book sold in a day over a period of one month as bars and total sale in that month as line graph. So for every month on x axis, there should be two bars and one point(for line graph).
The real answer to this question for anyone else wondering is to either set stacked to true in nv.models.multiChart or create another model based on nv.models.multiChart.
bars1 = nv.models.multiBar().stacked(true).yScale(yScale1),
bars2 = nv.models.multiBar().stacked(true).yScale(yScale2)
Line number in source code:
https://github.com/novus/nvd3/blob/master/src/models/multiChart.js#L34
And I'm passing data in like so:
data.push({
type: "bar",
key: series.name,
values: seriesData,
yAxis: 1
}
)
Check multiChart.html example from nvd3 package examples. This example uses multiChart type and displays 2 line points, 2 area points and 3 bars per each x point, so it can also display just 2 bars and 1 line point.
Related
I am using Highchart to show the data on spline chart. Here I have two date range from 2021-09-12T18:30:00.000Z to 2021-09-18T18:29:59.999Z which will change according to date range selection.
Issue: The spline chart x-axis range tick starts with the date 11 and my graph starts from second tick that is 12. I want the x-axis tick should start from 12 and end with 18 like the above date range and the data given below. I am adding JS fiddle link for the reference.Spline Chart Thank you.
[
{
name: 'Allowed Request',
data: [
[Date.UTC(2021,8,12), 2202],
[Date.UTC(2021,8,13), 1234],
[Date.UTC(2021,8,14), 1245],
[Date.UTC(2021,8,15), 3000],
[Date.UTC(2021,8,16), 2345],
[Date.UTC(2021,8,17), 2505],
[Date.UTC(2021,8,18), 4933],
]
},
{
name: 'Denied Request',
data: [
[Date.UTC(2021,8,12), 1234],
[Date.UTC(2021,8,13), 2202],
[Date.UTC(2021,8,14), 3000],
[Date.UTC(2021,8,15), 3000],
[Date.UTC(2021,8,16), 2345],
[Date.UTC(2021,8,17), 3000],
[Date.UTC(2021,8,18), 2505],
]
}
]
In your config, there is a startOnTick option which is set as true. Change it to false solve the issue.
However, if you want to keep this space which is added by startOnTick option, you can leave it as a true, but you need to add showFirstLabel property set a false.
Demo: https://jsfiddle.net/BlackLabel/qnfe7w05/
I know you can pass arbitrary data into your time series points, such as:
new Highcharts.Chart( {
...,
series: [{
name: 'Foo',
data: [ { y : 10.0, customData : 'value 1' },
{ y : 20.0, customData : 'value 2' },
{ y : 30.0, customData : 'value 3' } ]
}]
} );
However, I noticed that this doesn't quite work in HighStock when your time series is comprised of a large data set (1000+ points).
For example, here is a working fiddle http://jsfiddle.net/gparajon/c5fej775/ (less than 1000 points, which also happens to be the default turboThreshold). And here's the same fiddle, with more data, which breaks the tooltip formatter: http://jsfiddle.net/gparajon/5om258az/
Any workaround?
Thanks!
The error in the console is a bug and it is not really connect why you cannot access extra info in the formatter.
The difference between a chart and a stockchart is that a stockchart does data grouping, what means that in the formatter callback you receive grouped points which does not include extra data (how should they be grouped?).
example: https://jsfiddle.net/g04La2qh/1/
If you disable data grouping, you will receive non-grouped points with extra data.
dataGrouping: {
enabled: false
},
example: https://jsfiddle.net/g04La2qh/2/
Below is my data and the series which I am sending to angular google wrapper :
https://github.com/angular-google-chart/angular-google-chart
Data : [["Total",48,48,30,30,14,14]]
Series : ["Event","Registered",{"role":"annotation"},"Participated",{"role":"annotation"},"Offered",{"role":"annotation"}]
you will need to adjust the data accordingly
based on the Series definition...
Series: [
"Event",
"Registered",
{"role":"annotation"},
"Participated",
{"role":"annotation"},
"Offered",
{"role":"annotation"}
]
a typical row may look like this...
Row: [
"Test", // Event
40, // Registered
"40", // Registered annotation
30, // Participated
"30", // Participated annotation
0, // Offered
null // Offered annotation
]
use null for the annotation when the column value is zero
I have a webservice from which I parse data and plot bar charts. I'm using morris.js library.
Problem:
I have a webservice like this:
http://localhost:9999/hellowebservice/search?select=*
At select query parameter, I pass the values which I want to search like:
http://localhost:9999/hellowebservice/search?select=x,y
the json response is something like below:
"hits" : {
"total" : 2,
"max_score" : 1.0,
"hits" : [ {
"_id" : "abcd",
"_score" : 1.0,
"fields" : {
"x" : [ "10" ],
"y : [ "20" ]
}
}]
}
}
When I enter x, y, z in the select field next time, I want the bar charts to be automatically updated based on the entered fields
NOTE: I'm using _id value to be on x-axis and whatever select values entered to be on y axis.
Found solution:
Initialized morris chart with dummy values.
And then used morrisChart.setData() method to dynamically update the chart.
I am trying to plot stacked area ( filled line ) with stacking using flot charts
my data is is like
series 1: [0,5],[1,3],[2,2],[3,2],[4,2]
series 2: [0,5],[1,2],[2,null],[3,1],[4,2]
series 3: [0,5],[1,3],[2,2],[3,5],[4,2]
as in above case at point 2, flot is not plotting series 3 : [2,2]
I see chart plotting 3 series in stack, but at point 2 its only one value ( series 1 with value 2 )
here is jsfiddle example
http://jsfiddle.net/judaq/7/
Trying using a 0 instead of null.
Edit
var series = [{
data: [
[0,5],[1,3],[2,2],[3,2],[4,9]
],
label: "Series 1"
},
{
data: [[0,5],[1,3],[2,2],[3,0],[4,9]
],
label: "Series 2"
}, {
data: [
[0,5],[1,3],[2,2],[3,5],[4,9]
],
label: "Series 3"
}];
http://jsfiddle.net/KieranDotCo/judaq/
This is a known issue with the stack plugin in flot.
See the github issue #740.