Related
I know I should have sorted data, but I'm getting it from different API calls and there are 10 other reasons why I cannot have sorted data.
I have some unsorted data, that I need to plot in a timeseries graph.
{
xAxis: {
type: 'datetime'
},
series: [{
data: [
[Date.UTC(2020, 0, 1), 29.9],
[Date.UTC(2020, 0, 2), 71.5],
[Date.UTC(2020, 0, 6), 106.4],
[Date.UTC(2020, 0, 3), 129.2],
[Date.UTC(2020, 0, 5), 144.0],
[Date.UTC(2020, 0, 8), 176.0]
]
}]
}
When I use the above options for highcharts, the line travels backwards
Is there a way I can make highcharts do the required sorting, and plot the chart correctly?
I have tried dataSorting option as well, but it didn't work.
Highcharts has a dataSorting flag to sort the data, so its not completely crazy of me to expect it.
Are you missing the dataSorting property?
{
xAxis: {
type: 'datetime'
},
series: [{
dataSorting: {
enabled: true,
sortKey: 'value'
},
data: [
[Date.UTC(2020, 0, 1), 29.9],
[Date.UTC(2020, 0, 2), 71.5],
[Date.UTC(2020, 0, 6), 106.4],
[Date.UTC(2020, 0, 3), 129.2],
[Date.UTC(2020, 0, 5), 144.0],
[Date.UTC(2020, 0, 8), 176.0]
]
}]
}
Highcharts requires sorted data in ascending X order. You need to pre-sorts the data, for example:
var data = [
[Date.UTC(2020, 0, 1), 29.9],
[Date.UTC(2020, 0, 2), 71.5],
[Date.UTC(2020, 0, 6), 106.4],
[Date.UTC(2020, 0, 3), 129.2],
[Date.UTC(2020, 0, 5), 144.0],
[Date.UTC(2020, 0, 8), 176.0]
];
data.sort((a, b) => a[0] - b[0]);
Highcharts.chart('container', {
...,
series: [{
data
}]
});
Live demo: http://jsfiddle.net/BlackLabel/cf8tq6a2/
How i can arrange bubble randomly without overlap
var Highcharts2 = $('#attBubbleGraph').highcharts({
chart: {
type: 'bubble',
plotBorderWidth: 1,
margin: [1, 1, 1, 1]
},
title: {
text: 'Testing'
},
series: [
{
showInLegend: false,
name: 'Present',
data: [
[0, 0, 50],
[2, 0, 50],
[4, 0, 50],
],
}]
});
in the above code used x,y and radius (value) like below
data: [
[0, 0, 50],
[2, 0, 50],
[4, 0, 50],
],
But I'am Looking for a bubble graph of radius (value) with random x, y without overlapping
Hello i am plotting a Column Chart using Javascript and Google Chart. which shows per week the tickets wich met the critea of the SLA. So what i expect on the x-as are whole week numbers but instead i get divided numbers (see figure below). What can i do to change that ?
To create the column chart i use the following dataset:
[[1, 7, 4, 5, 0, 0, 1]
,[2, 12, 2, 9, 1, 1, 0]
,[3, 10, 0, 1, 1, 1, 0]
,[4, 4, 3, 0, 1, 0, 0]
,[5, 7, 5, 0, 0, 0, 0]
,[6, 6, 1, 0, 0, 0, 0]
,[7, 11, 4, 0, 0, 0, 0]
,[8, 11, 2, 0, 0, 0, 1]]
To plot this data to a chart i use the following code:
console.info('Start ticketsSolvedPerWeek SLA')
console.info(ds.Data)
// (A)Define column headers
var dataNew = new google.visualization.DataTable()
dataNew.addColumn('number', 'Weeknumber');
dataNew.addColumn('number', '00');
dataNew.addColumn('number', '01');
dataNew.addColumn('number', '02');
dataNew.addColumn('number', '03');
dataNew.addColumn('number', '04');
dataNew.addColumn('number', '05');
dataNew.addRows(ds.Data)
//(3) Set graph options
var options = {
title: ds.title,
hAxis: {
title: 'Weeknumber'
},
vAxis: {
title: 'Tickets'
},
trendlines: {
0: {
type: 'polynomial',
degree: 3,
visibleInLegend: true,
pointSize: 20, // Set the size of the trendline dots.
opacity: 0.1
}
},
width: 750,
height: 500,
};
//(4) Draw Graph
var slaChart = new google.visualization.ColumnChart(
document.getElementById('ticketsSLA'));
slaChart.draw(dataNew, options);
you can use option hAxis.ticks to provide custom axis labels
the option takes an array of values the same type as the data table axis column
in the following working snippet,
data table method getDistinctValues(columnIndex) is used to create the array for ticks
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var dataNew = new google.visualization.DataTable()
dataNew.addColumn('number', 'Weeknumber');
dataNew.addColumn('number', '00');
dataNew.addColumn('number', '01');
dataNew.addColumn('number', '02');
dataNew.addColumn('number', '03');
dataNew.addColumn('number', '04');
dataNew.addColumn('number', '05');
dataNew.addRows([
[1, 7, 4, 5, 0, 0, 1]
,[2, 12, 2, 9, 1, 1, 0]
,[3, 10, 0, 1, 1, 1, 0]
,[4, 4, 3, 0, 1, 0, 0]
,[5, 7, 5, 0, 0, 0, 0]
,[6, 6, 1, 0, 0, 0, 0]
,[7, 11, 4, 0, 0, 0, 0]
,[8, 11, 2, 0, 0, 0, 1]
]);
var options = {
title: 'title',
hAxis: {
ticks: dataNew.getDistinctValues(0),
title: 'Weeknumber'
},
vAxis: {
title: 'Tickets'
},
trendlines: {
0: {
type: 'polynomial',
degree: 3,
visibleInLegend: true,
pointSize: 20,
opacity: 0.1
}
},
width: 750,
height: 500,
};
var slaChart = new google.visualization.ColumnChart(
document.getElementById('ticketsSLA'));
slaChart.draw(dataNew, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="ticketsSLA"></div>
I'm using Jquery Flot to plot my charts, and now I want to pass a specific one to Highchart.
This is my Chart using Jquery Flot
var data1 = [
[gd(2014, 1, 1), 4], [gd(2014, 2, 1), 8], [gd(2014, 3, 1), 4], [gd(2014, 4, 1), 10],
[gd(2014, 5, 1), 4], [gd(2014, 6, 1), 16], [gd(2014, 7, 1), 15]];
var data2 = [
[gd(2013, 1, 1), 3], [gd(2013, 2, 1), 5], [gd(2013, 3, 1), 3], [gd(2013, 4, 1), 11],
[gd(2013, 5, 5), 4], [gd(2013, 6, 1), 13], [gd(2013, 7, 1), 9], [gd(2013, 8, 1), 5],
[gd(2013, 9, 1), 2], [gd(2013, 10, 1), 3], [gd(2013, 11, 1), 2], [gd(2013, 12, 1), 1]];
var data2014 = {
label: "Receitas 2014",
data: data1,
xaxis: 1
};
var data2013 = {
label: "Receitas 2013",
data: data2,
xaxis: 2
};
$("#flot-dashboard-chart").length && $.plot($("#flot-dashboard-chart"), [
data2014, data2013
],
{
series: {
lines: {
show: false,
fill: true
},
splines: {
show: true,
tension: 0.4,
lineWidth: 1,
fill: 0.4
},
points: {
radius: 2,
show: true
},
shadowSize: 2
},
grid: {
hoverable: true,
clickable: true,
tickColor: "#d5d5d5",
borderWidth: 1,
color: '#d5d5d5'
},
colors: ["#1ab394", "#464f88"],
xaxes: [{
mode: "time",
tickSize: [1, "month"],
tickLength: null,
colors: ["#838383", "#838383"],
timeformat: "%b",
max: (new Date("2014/12/1")).getTime()
}, {
ticks: false
}],
yaxis: {
ticks: 4
},
legend: {
backgroundOpacity: 0.5,
noColumns: 1,
position: "nw",
color: "#000000 !important",
}
}
);
function gd(year, month, day) {
return new Date(year, month - 1, day).getTime();
}
I'm trying convert this chart, to a highchart but I'm a little bit confusing because in highchart a spline is a type while in Jquery Flot its an option.
How far I did
var data1 = [
[gd(2014, 1, 1), 4], [gd(2014, 2, 1), 8], [gd(2014, 3, 1), 4], [gd(2014, 4, 1), 10],
[gd(2014, 5, 1), 4], [gd(2014, 6, 1), 16], [gd(2014, 7, 1), 15]];
var data2 = [
[gd(2013, 1, 1), 3], [gd(2013, 2, 1), 5], [gd(2013, 3, 1), 3], [gd(2013, 4, 1), 11],
[gd(2013, 5, 5), 4], [gd(2013, 6, 1), 13], [gd(2013, 7, 1), 9], [gd(2013, 8, 1), 5],
[gd(2013, 9, 1), 2], [gd(2013, 10, 1), 3], [gd(2013, 11, 1), 2], [gd(2013, 12, 1), 1]];
$('#flot-dashboard-chart').highcharts('StockChart', {
rangeSelector: {
inputEnabled: $('#flot-dashboard-chart').width() > 480,
selected: 1
},
title: {
text: 'AAPL Stock Price'
},
colors: ['#1ab394'],
plotOptions: {
area: {
color: '#1ab394',
fillColor: '#1ab394'
}
},
series: [{
name: 'AAPL Stock Price',
data: data1,
type: 'areaspline',
threshold: null,
tooltip: {
valueDecimals: 2
},
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
}
}]
});
function gd(year, month, day) {
return new Date(year, month - 1, day).getTime();
}
But is very different the result. I'm reading the API for more information, but some options are in different places.
Can someone help me plot a graph using highchart ?
UPDATE
I'm getting close
CODE
$(function () {
var data1 = [
[gd(2014, 1, 1), 4], [gd(2014, 2, 1), 8], [gd(2014, 3, 1), 4], [gd(2014, 4, 1), 10],
[gd(2014, 5, 1), 4], [gd(2014, 6, 1), 16], [gd(2014, 7, 1), 15]];
var data2 = [
[gd(2013, 1, 1), 3], [gd(2013, 2, 1), 5], [gd(2013, 3, 1), 3], [gd(2013, 4, 1), 11],
[gd(2013, 5, 5), 4], [gd(2013, 6, 1), 13], [gd(2013, 7, 1), 9], [gd(2013, 8, 1), 5],
[gd(2013, 9, 1), 2], [gd(2013, 10, 1), 3], [gd(2013, 11, 1), 2], [gd(2013, 12, 1), 1]];
$('#container').highcharts({
chart: {
type: 'areaspline'
},
title: {
text: 'Average fruit consumption during one week'
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
x: 150,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
},
xAxis: {
categories: [
'Monday',
'Tuesday',
'Wednesday',
'Thursday',
'Friday',
'Saturday',
'Sunday'
],
plotBands: [{ // visualize the weekend
from: 4.5,
to: 6.5,
color: 'rgba(68, 170, 213, .2)'
}]
},
yAxis: {
title: {
text: 'Fruit units'
}
},
tooltip: {
shared: true,
valueSuffix: ' units'
},
credits: {
enabled: false
},
colors: ['#1ab394', '#464f88'],
plotOptions: {
areaspline: {
fillOpacity: 0.4
}
},
series: [{
name: 'Receitas 2014',
data: [[1, 4], [2, 8], [3, 4], [4, 10], [5, 4], [6, 16], [7, 15]]
}, {
name: 'Receitas 2013',
data: [[1, 3], [2, 5], [3, 3], [4, 11], [5, 4], [6, 13], [7, 9], [8, 5], [9, 2], [10, 3], [11, 2], [12, 1]]
}]
});
});
function gd(year, month, day) {
return new Date(year, month - 1, day).getTime();
}
Why don't you just set the categories of the xAxis to an array containing the months as follows :
xAxis: {
categories: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']
}
And then set your data using simple arrays :
var data1 = [4,8,4,10,4,16,15];
var data2 = [3,5,3,11,4,13,9,5,2,3,2,1];
Maybe that's not what you need, but take a look at the result and tell me what you think: http://jsfiddle.net/yohanrobert/T3Dpf/1/
EDIT
If you still want to use dates within your data arrays, what you could do is to create a xAxis with type set to 'datetime' for the first series like this:
{
type: 'datetime',
dateTimeLabelFormats: {
month: '%b' // Display months as labels ( 'Jan', 'Feb', ...)
},
showLastLabel: false, // If not set to false, displays 'Jan' at the end of the xAxis
tickInterval: 24 * 3600 * 1000 * 30.4 // Displays tick for each month
}
and then add one hidden xAxis for each new series:
{
type: 'datetime',
labels: {
enabled: false // Remove the label
},
tickWidth: 0, // Remove the ticks
lineWidth: 0 // Remove the axis line
}
Finally, you will need to set the extremes for the these series to go from January to December.
Here is an example with three series: http://jsfiddle.net/yohanrobert/T3Dpf/3/
This might not be the easiest way though.
I don't really know how to do this.
I need to change background color of this highcharts chart:
http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/polar-spider/
But I don't seem to be able to do so - there doesn't seem to be any clear place to put the background color setting?
I've tried to write many different values in this section:
chart: {
polar: true,
type: 'line'
},
But it didn't do anything ( it occasionally broke this script ).
Do I need to change it somewhere in the included .js files? Or can it be done from the level of this loaded script?
JS is really confusing. Can anyone help me?
Take a look at the Highcharts API here: https://api.highcharts.com/highcharts/chart.backgroundColor and you will see it's a property of the chart object that can take a solid color:
{
chart: {
backgroundColor: '#FCFFC5',
polar: true,
type: 'line'
}
}
Or Gradiant:
{
chart: {
backgroundColor: {
linearGradient: [0, 0, 500, 500],
stops: [
[0, 'rgb(255, 255, 255)'],
[1, 'rgb(200, 200, 255)']
]
},
polar: true,
type: 'line'
}
}
There is a backgroundColor tag you can use: (http://jsfiddle.net/aeP4E/)
chart: {
polar: true,
type: 'line',
backgroundColor:'blue'
},
That's you want
`
chart: {
polar: true,
type: 'line',
backgroundColor:'rgba(255, 255, 255, 0.1)'
}
`
Demo
You can data: [[0, 0, true], you can hide value by 'false' and you can set your gradient
by
colorAxis: {
min: 0,
stops: [
[0, '#5DBA76'],
[0.4, '#ffff00'],
[0.8, '#F30000']
],
minColor: '#ff0000',
maxColor: '#ffff00'
},
Thanks :)
you can hide value by 'false'
data: [[0, 0, false], [0, 1, 2], [0, 2, 3], [0, 3, 4], [0, 4, 5], [1, 0, 2], [1, 1, 4], [1, 2, 6], [1, 3, 8], [1, 4, 10], [2, 0, 3], [2, 1, 6], [2, 2, 9], [2, 3, 12], [2, 4, 15], [3, 0, 4], [3, 1, 8], [3, 2,12], [3, 3, 16], [3, 4, 20], [4, 0, 5], [4, 1, 10], [4, 2, 15], [4, 3, 20], [4, 4, 25]
http://jsfiddle.net/3527r4ty/1/