We Keep Coding

How to show data between two date range in spline chart of Highcharts?

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/

Setting additional point attributes in HighStock time series with large data sets

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/

Dynamic bar charts from json response using morris

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.

Line Graph on top of MultiBar Graph NVD3, d3.js

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.

In kendo dataviz chart local data binding , JSON data value was spilted?

I create a Column chart using Kendo ui dataviz.
In my program, i am going to bind the local Javascript Array variable data to chart datasource.
The JSON data was spilted like "3""9""6" for "396".
I dont know why it happened. My Source code is given blow. Please check it and Please give the solution.
Source:
/**************Variable Declaration**********************************/
var eligibilityData = new Array();
eligibilityData = {
mem_status: {
a: 396, b: "56", c: "1125", d: "8423"
}
};
/**************Create Chart**********************************/
function createBarChart(eligibilityData) {
/****** Issue: A value is 396 but it spilted into "3","9","6"************/
$("#Chart1").kendoChart({
theme : $(document).data("kendoSkin") || "default",
dataSource : {
data: JSON.stringify(eligibilityData.mem_status.a),
},
seriesDefaults: { type: "column", },
series : [
{ field: "a", name : "A" }
],
tooltip : { visible: true, },
});
}

Local data should be passed as an array. No need to call JSON.stringify
data: [eligibilityData.mem_status]
See: http://docs.kendoui.com/api/framework/datasource#configuration-data-Array

JSON.stringify does not do what you expect. What you sentence really does is:
It gets the number 396 and converts it to a string.
Converts a string into an array of one character per element.
Not sure about the way you define the DataSource (why you want a DataSource with only one element) but if that is really what you want, you might try:
dataSource : {
data: [eligibilityData.mem_status.a]
},
or
dataSource : {
data: [eligibilityData.mem_status]
},