We Keep Coding

javascript - highchart xaxis datetime and yaxis data

I have below a series:
[{"name":"date","data":455661712000,1455661791000,1455661869000,1455661947000,1455662568000,1455662646000]},
{"name":"numues","data":[14,13,14,12,12,12]},
{"name":"rpcnt","data":[4,4,4,4,4,4]}]
In Highchart options, values are set as using below code.
options9.xAxis.categories = json[0]['data'];
options9.series[0] = json[1];
options9.series[1] = json[2];
options9.series[2] = json[3];`
But my graph does not plot x axis as time. It consider each as string (just point) instead of value. (the gap between 2 values random.)
How plot x-axis as datetime?

If you have timestamps ,you can't use datetime and categories simultaneously in xAxis . If you want to use categories , user laebl formatter as I used in This Fidlle
Also categories should have string array.
If you want to use type:datetime in your xAxis , either you should get processed data from backend as
[timestamp,value],[timestamp,value]
for each series. Or if you can't get that from server do processing in javascript and make two datasets as following
//code

DimpleJS - Limit the number of category axis values to be displayed in chart

For preparing graphs from data that exists in MySQL tables, I am using DimpleJS framework. I am able to plot graphs, everything works. One question though -
In a simple bar chart, with category values on X axis and measure values on Y axis, is there a way to limit the number of X axis categories being displayed? Example, let's say this is my data set: [(A,1), (B,2), (C,1), (D,5), (E,4)]
So in my dataset, there are 5 categories (X axis - A, B,C,D,E) and corresponding measures that I will be displaying in Y axis. Question is, I just want to display only 3 of the measures - let's say only first three, in this case (A,1), (B,2) and (C,1), although my dataset has two more (D,5) and (E,4).
Is there any way to restrict it in JS/ DimpleJS? I have limited control on the dataset that is coming in.
Thanks.

Use dimple.filterData after you receive the dataset but before you provide the data to dimple. This does not mutate the data so won't affect any other operations. I'm not sure what your actual category field is but it should look similar to this :
var chartData = dimple.filterData(originalDataset, 'category', ["A", "B", "C"]);
var chart = new dimple.chart(svg, chartData);
Otherwise there is not a provided way to restrict a category axis from showing values present in the data.

Plotting extra linear data on D3 js graph

Check out this fiddle, using D3 and plotting a line graph against dates.
http://jsfiddle.net/T546B/172/
I want to plot some further data on my graph and want to know if its possible, I would ideally like the graph to look like below:-
The extra data is linear and doesn't have a price value and I want it to be included somewhere near the middle of the graph. The data array would be in a format along the lines of:-
var eventArray = [[startdate, enddate, name]];
I was basically wondering if this is possible, plotting two types of data, using different SVG elements on one graph. - not sure how to approach this problem. Any help appreciated!

you just need to set up a second line generator with the coordinates that you want for x and y

Stacked bar chart with negative JSON data

I am trying to implement stacked bar chart.
My data source is JSON array.
Data might be negative or positive.
I am referencing this link
http://bl.ocks.org/ZJONSSON/2975320
But the problem is the data used here like matrix type.
like :
var data = [[{y:3},{y:6},{y:-3}],
[{y:4},{y:-2},{y:-9}],
[{y:10},{y:-3},{y:4}]
]
I have same data but in JSON array like :
var data = [{x:"abc", y1:"3", y2:"4", y3:"10"},
{x:"abc2", y1:"6", y2:"-2", y3:"-3" },
{x:"abc3", y1:"-3", y2:"-9", y3:"4"}
]
Now my question is how I can implement this graph with JSON formatted data.

In the example you linked, the original data is grouped by band type. Your data is grouped by set - that is, in the original each color band is grouped in the data array. In your data, each stack of bands is a group of objects in the data array.
If you want to reuse the original code, we need to translate the data (90 degrees) like so:
var initialData = [{x:"abc", y1:"3", y2:"4", y3:"10"},
{x:"abc2", y1:"6", y2:"-2", y3:"-3" },
{x:"abc3", y1:"-3", y2:"-9", y3:"4"}]
var data = ["y1","y2","y3"].map(
function(v){
return initialData.map(function(d){
return {y: +d[v]};
});
});
Then, most of the original code can be used as-is.
Another part which you can adapt is the domain for the x-scale
x = d3.scale.ordinal()
.domain(['abc','abc2','abc3'])
.rangeRoundBands([margin,w-margin], .1)
The group names are hard coded, but you have them in your objects as "x".
Instead, we can automatically use the x value of each object as the label for each set:
x = d3.scale.ordinal()
.domain(initialData.map(function(d){return d.x}))
.rangeRoundBands([margin,w-margin], .1)
Putting it all together, with some extra values: http://jsfiddle.net/fLMAZ/1/
The other option is to rewrite the code to bind the data as-is, but you will need to understand how the stacked bar chart is built and then adapt it to your original JSON.

You have a couple of options:
Is to provide the data from the server side to make it look like the JSON structure that graph likes.
You can parse through your JSON on the client side and make a new JSON
You can modify the graph chart such that it will work with your JSON

Why does Google chart not show the Axis data values?

If you visit the URL below you will see that the graph is being generated properly, but that there are not labels along the x and y axis to indicate the data values:
http://chart.apis.google.com/chart?chs=600x300&chtt=Release+Burndown&cht=lc&chdl=estimated|actual&chco=FF0000,00FF00&chxr=0,0,30,2|1,0,40,2&chds=0,45&chd=t:45,34,23,12,0|45,20,15,32,31,25,0
Can anyone figure out how to get the x and y axis data values to show up?

According to the API, you can do this through the chxX parameters:
http://code.google.com/apis/chart/image/docs/gallery/line_charts.html#gcharts_axis_styles_labels
chx1: make custom values as labels
chxs and chxtc: to specify color, size, alignment, and other properties of both custom and numeric axis labels
Let me know if you can't figure it out.