How do I display the date on my x axis from a json object structured like so;
[
[
634420512000000000,
100000
],
[
634421376000000000,
100086
],
[
634422240000000000,
100171
],
[
634423104000000000,
100257
]
]
Where my date is in milliseconds. I have set my xAxis like so;
xAxis: {
title: {
text: 'Time'
},
type: 'datetime'
}
Highcharts accepts three primary formats for data:
A simple array (e.g. [1, 2, 3])
An array of arrays of x, y pairs (e.g. [[x, y], [x2, y2]])
A list of point objects
Further details on these formats can be found in the highcharts documentation. However, in your case, it should be quite easy. Just do something like the following.
var data = []; //assume data is the array you've listed in your question
var chart = new Highcharts.chart({
xAxis: {
title: {
text: 'Time'
},
type: 'datetime'
},
series: [{
data: data
}]
});
Turns out I was returning ticks instead of milliseconds from 1/1/1970
So...
Dim dt1970 As DateTime = New DateTime("1970", "1", "1")
Dim d As DateTime = row("myDateFromDB")
Dim span As TimeSpan = d - dt1970
Dim milli as long = span.TotalMilliseconds
Related
I have a table in this form
Time FR IT DE
00:00:09 1 2 12
00:00:18 1 0 0
00:00:28 1 3 11
I am trying to plot this data using highcharts. Here is my config
data = {
"title": {
"text": "Concurrency"
},
"yAxis": {
"title": {
"text": "Number of Employees"
}
},
"legend": {
"layout": "vertical",
"align": "right",
"verticalAlign": "middle"
},
"series": [
{
"name": "FR",
"data": data_fr
},
{
"name": "IT",
"data": data_it
},
{
"name": "DE",
"data": data_de
}
],
}
The time field represents time of the day in HH:MM:SS for a single day. And the rest of the columns are the series data that I need to plot on Y axis as line charts. Now, the number of rows in this table is quite large around 5000. I want to plot the time on x axis but I dont want to show every entry. I want to show only the hours on the x axis. For example, 1 am, 2 am, 3 am etc even though the Time column contains so many time entries. How can I accomplish this?
Also, is there any way I can smoothen my line plots? Because with so many values the graph has lots of sharp edges.
I had to change the time from string to a timestamp (milliseconds from epoch) field. Once done that, I was able to provide the config option:
"xAxis": {
"type": "datetime"
}
With this config, Highcharts automatically took care of the clutter from x axis. It showed the labels on x axis at regular intervals, like 2 hours apart.
Then another doubt that I had was how to provide the series data with both x and y axis values. Earlier I was only providing y axis values like this:
"series": [
{
"name": "CC_FR",
"data": [10, 23, 11]
},
I had to change the data array from array of numbers to array of objects with each object having x and y keys and values. Like this:
"series": [
{
"name": "CC_FR",
"data": [
{ "x": 1528210784424 ,"y": 10 },
{ "x": 1528210803102 ,"y": 23 },
{ "x": 1528210810702 ,"y": 11 }
],
"turboThreshold": 0
},
The "turboThreshold": 0 was needed in my case because the length of data array was more than 1000. I also added the config option:
"chart": {
"zoomType": 'x'
},
This made my chart zoomable and whenever I would zoom in, the labels on the x axis were dynamically rendered without any need from my end to bother about the clutter.
I'm doing a combo scatter and line charts (it's a electoral poll tracker) following this example from HC docs:
series: [{
type: 'scatter',
name: 'Party1',
data: [10.1,9.2,9.8]
}, {
type: 'scatter',
name: 'Party2',
data: [6.5,6.5,6.8]
}, {
type: 'spline',
name: 'Party1-tracker',
data: [10.1,9.8,10.0]
}, {
type: 'spline',
name: 'Party2-tracker',
data: [6.5,6.5,6.6]
}]
On another document, I can make a chart from a Google Spreadsheet. I've followed this Jack Dougherty example: https://jackdougherty.github.io/highcharts-with-google-sheets/bubble.html
data: {
// insert the key from your public Google Sheet
googleSpreadsheetKey: '1fYJOd-2agLPg38qhblS8qoZGWGkKcK-3uTsMpf37Hys',
// insert Google Sheet column headers (x, y, z...) to match column numbers (0, 1, 2...)
seriesMapping: [{x: 0, y: 1, z: 2, name: 3, country: 4, category: 5}],
complete: function(data) {
categoriesIntoSeries(data);
changeSeriesColors(data);
}
},
plus
/**
* Here, all data is split into categories depending on the 'category' property
* Needed for correct legend display
*/
function categoriesIntoSeries(data) {
rows = data.series[0].data;
data.series = [];
for (i = 0; i < rows.length; i++) {
cat = rows[i].category;
catExists = false;
for (j = 0; j < data.series.length; j++) {
if (data.series[j].name == cat) {
// Add a data point to existing series
data.series[j].data.push(rows[i]);
catExists = true;
}
}
if (!catExists) {
// When category is encountered for the first time, create a series
data.series.push({name: cat, data: [rows[i]]})
}
}
}
What I've tried unsuccessfully is (maybe it's impossible) to connect each column from my spreadsheet to each 'series' element. Something like this:
{
type: 'scatter',
name: 'Party1',
data: /*get data from spreadsheet column 1 or a json field*/
}
I'll be thankful if you can tell us if it's possible and, if yes, point me to some documentation or example on how to do this
You can use seriesMapping array for this. It should contain a mapping for every column from the sheet.
Refer to this live demo: http://jsfiddle.net/kkulig/b45s1Luh/
seriesMapping: [{
x: 0,
y: 1 // first column series
}, {
x: 0,
y: 2 // second column series
}, {
x: 0,
y: 3 // third column series
}]
}
API reference: https://api.highcharts.com/highcharts/data.seriesMapping
I receive data which I would like to chart. Unfortunately, it consist of records like
{
abcisse: 5,
ordonnee: 9
}
which I would like to feed into data.
The record above corresponds, in highcharts nomenclature, to
{
x: 5,
y: 9
}
Is it possible to inform highcharts that he should be looking for values of x in abcisse and for values of y in ordonnee? Or do I have to postprocess the data and create x and y entries?
You can use an array map function to convert your records to the format need my highcharts. For example, if your data is in an array called myData then you could feed your data to the series.data option using...
$('#container').highcharts({
....
series: [{
data: myData.map(function (item) {return { x: item.abcisse, y: item.ordonnee}; })
}]
...
});
I have an array of objects that I want to display in highcharts. Every object has a name and a value.
I have tried to get this to work by doing
var objects = objectArray[]; // objectArray being an array of the objects I want data on
var objectNames = nameArray[]; // This being an array of all the names of the objects
var objectValues = valueArray[]; // An array of all the values of the objects
series: [{
data: objects.value,
name: objects.name
}]
This blew up on me. So I tried building the series like this:
series: [{
data: objectValues,
name: objectNames
}]
This gave me data for the values, but the name was all of the names in the objectNames array... for every single piece of data. so I tried using
series: [{
data: objectValues
},
{
data: objectNames
}]
This resulted in seeing the chart for the objectValues, and in the legend, another option for the names - which is completely unacceptable because there's no point in having a series of labels, right?
So I decided I would programmatically build out a series, using a foreach loop and then pass that into the constructor. However, http://www.highcharts.com/docs/getting-started/how-to-set-options/ says this is "bad code".
What I'm wanting is to be able to pass an array of objects to highcharts, tell it that every piece of data's 'name' is going to be the name value on that particular object, and the data is going to be tied to that particular object's value field. Is there a way to do this? Or is the only option what highcharts considers 'bad'?
So I found a solution.
After getting the data, I did
$.each(item, function (index, value) {
objects.push([value.name, value.value]);
});
And then bound my series with
series: [{
data: objects,
name: 'Value Type Description'
}]
So I have "Value Type Description" in the legend, but when I hover over a specific point I have the name as the label, and valid data displaying in graph form.
I found at http://api.highcharts.com/highcharts#series that if you have an array of two dimensional arrays, you can just pass a string as the first parameter and it would parse it as the label for that point.
EDIT: Example per request.
So you have two pieces to the series field, data and name. Name does NOT apply to the data, that will be the name of the axis.
So data is an array of key/value pairs.
data: [
{[key1, value1]},
{[key2, value2]},
{[key3, value3]}
]
And name is what the "main" label will be - "My Data Stuff" for example.
Then, when you load the chart, in the legend it should say "My Data Stuff", but when you hover over a specific point, say the first one, it will display the Key1 Value1 information.
data: [{
name: 'Point 1',
y: 1,
test1:9,
test2:'ddaf'
}, { -------> right
name: 'Point 2',
y: 5,
test1:12,
test2:'ddddaf'
}]
data: [{
my_name: 'Point 1',
y: 1,
test1:9,
test2:'ddaf'
}, { -------> we change 'name' to 'my_name',
my_name: 'Point 2', then the name you want to show become
y: 5, 'Slice', instead of 'Point 1','Point 2'
test1:12,
test2:'ddddaf'
}]
data: [{
my_name: 'Point 1',
my_y: 1,
test1:9,
test2:'ddaf'
}, { -------> Now,we get nothing.
my_name: 'Point 2',
my_y: 5,
test1:12,
test2:'ddddaf'
}]
So,the 'name' and 'y' is the key.
I'm trying to specify column charts with objects for points. The reason for this is that I don't have to then split up the array of objects into separate arrays of categories and values.
I have tried the following, but neither works. (I'm interested in both specifying the category for columns, and specifying datetimes for x values.)
var data_1 = [
{x:new Date('2013-01-03'),y:2},
{x:new Date("2013-01-02"),y:6},
{x:new Date("2013-01-01"),y:4},
];
var data_2 = [
{category: "a", y: 3},
{category: "b", y: 3},
{category: "c", y: 4}
];
var create_chart = function(el, data){
var init_obj = {
chart: {
type: 'column'
},
series: [{
name: 'a',
data: data
}]
};
el.highcharts(init_obj);
};
create_chart($('#chart1'), data_1);
create_chart($('#chart2'), data_2);
In highcharts configuration you can set onyl one type of one xAxis. If xAxis has datetime type, you cannot use categoires. Only wayt o common both types is use two xAxis with different types.