How to process a list of complex data structures

How to process a list of complex data structures - javascript

In High Charts i have an array as follows,
But if i try to set extremes of the chart by returning the Highest value of the Array, its showing NaN Error.
function aoDashboardData() {
var data = [
{ type: "",
data: [{
x: 0.0,
low: Date.UTC(2016, 2, 15),
high: Date.UTC(2016, 4, 10),
color: "#4B0081"
},
{
x: 0.0,
low: Date.UTC(2016, 4, 15),
high: Date.UTC(2016, 6, 15),
color: "#00BFFE"
},
{
x: 0.0,
low: Date.UTC(2016, 6, 20),
high: Date.UTC(2016, 8, 0),
color: "#0047AB"
},
{
x: 0.0,
low: Date.UTC(2016, 8, 5),
high: Date.UTC(2016, 10, 15),
color: "#4682B4"
},
{
x: 0.0,
low: Date.UTC(2016, 10, 20),
high: Date.UTC(2016, 12, 31),
color: "#008081"
}]
},
{
type: 'line',
data: [
{
x: 0.0,
y: Date.UTC(2016, 2, 15),
marker: {
symbol: 'url(/../Content/Img/monitor.png)',
}
},
{
x: 0.0,
y: Date.UTC(2016, 4, 10),
marker: {
symbol: 'url(/../Content/Img/optimise.png)',
}
},
{
x: 0.0,
y: Date.UTC(2016, 6, 15),
marker: {
symbol: 'url(/../Content/Img/pilot.png)',
}
},
{
x: 0.0,
y: Date.UTC(2016, 8, 5),
marker: {
symbol: 'url(/../Content/Img/model.png)',
}
},
{
x: 0.0,
y: Date.UTC(2016, 10, 15),
marker: {
symbol: 'url(/../Content/Img/deploy.png)',
}
}
]
},
{
type: "",
data: [{
x: 1.0,
low: Date.UTC(2016, 2, 15),
high: Date.UTC(2016, 4, 10),
color: "#4B0081"
},
{
x: 1.0,
low: Date.UTC(2016, 4, 15),
high: Date.UTC(2016, 6, 15),
color: "#00BFFE"
},
{
x: 1.0,
low: Date.UTC(2016, 6, 20),
high: Date.UTC(2016, 8, 0),
color: "#0047AB"
},
{
x: 1.0,
low: Date.UTC(2016, 8, 5),
high: Date.UTC(2016, 10, 15),
color: "#4682B4"
},
{
x: 1.0,
low: Date.UTC(2016, 10, 20),
high: Date.UTC(2016, 12, 31),
color: "#008081"
}]
},
{
type: 'line',
data: [
{
x: 1.0,
y: Date.UTC(2016, 2, 15),
marker: {
symbol: 'url(/../Content/Img/monitor.png)',
}
},
{
x: 1.0,
y: Date.UTC(2016, 4, 10),
marker: {
symbol: 'url(/../Content/Img/optimise.png)',
}
},
{
x: 1.0,
y: Date.UTC(2016, 6, 15),
marker: {
symbol: 'url(/../Content/Img/pilot.png)',
}
},
{
x: 1.0,
y: Date.UTC(2016, 8, 5),
marker: {
symbol: 'url(/../Content/Img/model.png)',
}
},
{
x: 1.0,
y: Date.UTC(2016, 10, 15),
marker: {
symbol: 'url(/../Content/Img/deploy.png)',
}
}
]
},
{
type: "",
data: [{
x: 2.0,
low: Date.UTC(2016, 2, 15),
high: Date.UTC(2016, 4, 10),
color: "#4B0081"
},
{
x: 2.0,
low: Date.UTC(2016, 4, 15),
high: Date.UTC(2016, 6, 15),
color: "#00BFFE"
},
{
x: 2.0,
low: Date.UTC(2016, 6, 20),
high: Date.UTC(2016, 8, 0),
color: "#0047AB"
},
{
x: 2.0,
low: Date.UTC(2016, 8, 5),
high: Date.UTC(2016, 10, 15),
color: "#4682B4"
},
{
x: 2.0,
low: Date.UTC(2016, 10, 20),
high: Date.UTC(2016, 12, 31),
color: "#008081"
}]
},
{
type: 'line',
data: [
{
x: 2.0,
y: Date.UTC(2016, 2, 15),
marker: {
symbol: 'url(/../Content/Img/monitor.png)',
}
},
{
x: 2.0,
y: Date.UTC(2016, 4, 10),
marker: {
symbol: 'url(/../Content/Img/optimise.png)',
}
},
{
x: 2.0,
y: Date.UTC(2016, 6, 15),
marker: {
symbol: 'url(/../Content/Img/pilot.png)',
}
},
{
x: 2.0,
y: Date.UTC(2016, 8, 5),
marker: {
symbol: 'url(/../Content/Img/model.png)',
}
},
{
x: 2.0,
y: Date.UTC(2016, 10, 15),
marker: {
symbol: 'url(/../Content/Img/deploy.png)',
}
}
]
},
{
type: "",
data: [{
x: 3.0,
low: Date.UTC(2016, 2, 15),
high: Date.UTC(2016, 4, 10),
color: "#4B0081"
},
{
x: 3.0,
low: Date.UTC(2016, 4, 15),
high: Date.UTC(2016, 6, 15),
color: "#00BFFE"
},
{
x: 3.0,
low: Date.UTC(2016, 6, 20),
high: Date.UTC(2016, 8, 0),
color: "#0047AB"
},
{
x: 3.0,
low: Date.UTC(2016, 8, 5),
high: Date.UTC(2016, 10, 15),
color: "#4682B4"
},
{
x: 3.0,
low: Date.UTC(2016, 10, 20),
high: Date.UTC(2016, 12, 31),
color: "#008081"
}]
},
{
type: 'line',
data: [
{
x: 3.0,
y: Date.UTC(2016, 2, 15),
marker: {
symbol: 'url(/../Content/Img/monitor.png)',
}
},
{
x: 3.0,
y: Date.UTC(2016, 4, 10),
marker: {
symbol: 'url(/../Content/Img/optimise.png)',
}
},
{
x: 3.0,
y: Date.UTC(2016, 6, 15),
marker: {
symbol: 'url(/../Content/Img/pilot.png)',
}
},
{
x: 3.0,
y: Date.UTC(2016, 8, 5),
marker: {
symbol: 'url(/../Content/Img/model.png)',
}
},
{
x: 3.0,
y: Date.UTC(2016, 10, 15),
marker: {
symbol: 'url(/../Content/Img/deploy.png)',
}
}
]
},
{
type: "",
data: [{
x: 4.0,
low: Date.UTC(2016, 2, 15),
high: Date.UTC(2016, 4, 10),
color: "#4B0081"
},
{
x: 4.0,
low: Date.UTC(2016, 4, 15),
high: Date.UTC(2016, 6, 15),
color: "#00BFFE"
},
{
x: 4.0,
low: Date.UTC(2016, 6, 20),
high: Date.UTC(2016, 8, 0),
color: "#0047AB"
},
{
x: 1.0,
low: Date.UTC(2016, 8, 5),
high: Date.UTC(2016, 10, 15),
color: "#4682B4"
},
{
x: 4.0,
low: Date.UTC(2016, 10, 20),
high: Date.UTC(2016, 12, 31),
color: "#008081"
}]
},
{
type: 'line',
data: [
{
x: 4.0,
y: Date.UTC(2016, 2, 15),
marker: {
symbol: 'url(/../Content/Img/monitor.png)',
}
},
{
x: 4.0,
y: Date.UTC(2016, 4, 10),
marker: {
symbol: 'url(/../Content/Img/optimise.png)',
}
},
{
x: 4.0,
y: Date.UTC(2016, 6, 15),
marker: {
symbol: 'url(/../Content/Img/pilot.png)',
}
},
{
x: 4.0,
y: Date.UTC(2016, 8, 5),
marker: {
symbol: 'url(/../Content/Img/model.png)',
}
},
{
x: 4.0,
y: Date.UTC(2016, 10, 15),
marker: {
symbol: 'url(/../Content/Img/deploy.png)',
}
}
]
}
,
{
type: "",
data: [{
x: 5.0,
low: Date.UTC(2016, 2, 15),
high: Date.UTC(2016, 4, 10),
color: "#4B0081"
},
{
x: 5.0,
low: Date.UTC(2016, 4, 15),
high: Date.UTC(2016, 6, 15),
color: "#00BFFE"
},
{
x: 5.0,
low: Date.UTC(2016, 6, 20),
high: Date.UTC(2016, 8, 0),
color: "#0047AB"
},
{
x: 5.0,
low: Date.UTC(2016, 8, 5),
high: Date.UTC(2016, 10, 15),
color: "#4682B4"
},
{
x: 5.0,
low: Date.UTC(2016, 10, 20),
high: Date.UTC(2016, 12, 31),
color: "#008081"
}]
},
{
type: 'line',
data: [
{
x: 5.0,
y: Date.UTC(2016, 2, 15),
marker: {
symbol: 'url(/../Content/Img/monitor.png)',
}
},
{
x: 5.0,
y: Date.UTC(2016, 4, 10),
marker: {
symbol: 'url(/../Content/Img/optimise.png)',
}
},
{
x: 5.0,
y: Date.UTC(2016, 6, 15),
marker: {
symbol: 'url(/../Content/Img/pilot.png)',
}
},
{
x: 5.0,
y: Date.UTC(2016, 8, 5),
marker: {
symbol: 'url(/../Content/Img/model.png)',
}
},
{
x: 5.0,
y: Date.UTC(2016, 10, 15),
marker: {
symbol: 'url(/../Content/Img/deploy.png)',
}
}
]
}
,
{
type: "",
data: [{
x: 6.0,
low: Date.UTC(2016, 2, 15),
high: Date.UTC(2016, 4, 10),
color: "#4B0081"
},
{
x: 6.0,
low: Date.UTC(2016, 4, 15),
high: Date.UTC(2016, 6, 15),
color: "#00BFFE"
},
{
x: 6.0,
low: Date.UTC(2016, 6, 20),
high: Date.UTC(2016, 8, 0),
color: "#0047AB"
},
{
x: 6.0,
low: Date.UTC(2016, 8, 5),
high: Date.UTC(2016, 10, 15),
color: "#4682B4"
},
{
x: 6.0,
low: Date.UTC(2016, 10, 20),
high: Date.UTC(2016, 12, 31),
color: "#008081"
}]
},
{
type: 'line',
data: [
{
x: 6.0,
y: Date.UTC(2016, 2, 15),
marker: {
symbol: 'url(/../Content/Img/monitor.png)',
}
},
{
x: 6.0,
y: Date.UTC(2016, 4, 10),
marker: {
symbol: 'url(/../Content/Img/optimise.png)',
}
},
{
x: 6.0,
y: Date.UTC(2016, 6, 15),
marker: {
symbol: 'url(/../Content/Img/pilot.png)',
}
},
{
x: 6.0,
y: Date.UTC(2016, 8, 5),
marker: {
symbol: 'url(/../Content/Img/model.png)',
}
},
{
x: 6.0,
y: Date.UTC(2016, 10, 15),
marker: {
symbol: 'url(/../Content/Img/deploy.png)',
}
}
]
}
,
{
type: "",
data: [{
x: 7.0,
low: Date.UTC(2016, 2, 15),
high: Date.UTC(2016, 4, 10),
color: "#4B0081"
},
{
x: 7.0,
low: Date.UTC(2016, 4, 15),
high: Date.UTC(2016, 6, 15),
color: "#00BFFE"
},
{
x: 7.0,
low: Date.UTC(2016, 6, 20),
high: Date.UTC(2016, 8, 0),
color: "#0047AB"
},
{
x: 1.0,
low: Date.UTC(2016, 8, 5),
high: Date.UTC(2016, 10, 15),
color: "#4682B4"
},
{
x: 7.0,
low: Date.UTC(2016, 10, 20),
high: Date.UTC(2016, 12, 31),
color: "#008081"
}]
},
{
type: 'line',
data: [
{
x: 7.0,
y: Date.UTC(2016, 2, 15),
marker: {
symbol: 'url(/../Content/Img/monitor.png)',
}
},
{
x: 7.0,
y: Date.UTC(2016, 4, 10),
marker: {
symbol: 'url(/../Content/Img/optimise.png)',
}
},
{
x: 7.0,
y: Date.UTC(2016, 6, 15),
marker: {
symbol: 'url(/../Content/Img/pilot.png)',
}
},
{
x: 7.0,
y: Date.UTC(2016, 8, 5),
marker: {
symbol: 'url(/../Content/Img/model.png)',
}
},
{
x: 7.0,
y: Date.UTC(2016, 10, 15),
marker: {
symbol: 'url(/../Content/Img/deploy.png)',
}
}
]
}
]
return data;
}
The code i tried to get the maximum value is :
MinAssortmentValue = Math.min.apply(Math, chartlength);
Here is the updated jsFiddle link : http://jsfiddle.net/sarav4gs/jbmk9tb1/3/
Can Anyone help me to fix it? Thanks in advance!!

... referring to this comment of mine - How to process a list of complex data structures - the sketched approach might look like that, even though I still do not really know what are the object properties of a chart item you are going to compare and/or extract ...
var
chart = $('#ao-projectssummry-chart').highcharts(),
minMaxValues = chart.series.reduce(function (collector, item, idx/*, list*/) {
var
dataMin = item.dataMin,
dataMax = item.dataMax,
minValue = Math.min(collector.minValue, dataMin),
maxValue = Math.max(collector.maxValue, dataMax);
if (minValue == dataMin) {
collector.minValue = dataMin;
collector.minValueItemIndex = idx;
}
if (maxValue == dataMax) {
collector.maxValue = dataMax;
collector.maxValueItemIndex = idx;
}
return collector;
}, {
minValue: Number.POSITIVE_INFINITY,
maxValue: Number.NEGATIVE_INFINITY,
minValueItemIndex: -1,
maxValueItemIndex: -1
}),
minAssortmentValue = minMaxValues.minValue,
maxAssortmentValue = minMaxValues.maxValue;
console.log("minMaxValues : ", minMaxValues);
console.log("minAssortmentValue, maxAssortmentValue : ", minAssortmentValue, maxAssortmentValue);
Pasting the just provided code snipped into the console of your provided fiddle does cause the following output:
minMaxValues : Object {
minValue: 1458000000000,
maxValue: 1485820800000,
minValueItemIndex: 9,
maxValueItemIndex: 14
}
minAssortmentValue, maxAssortmentValue : 1458000000000 1485820800000

Related

Pushing an array into an object Javascipt

I am trying to develop a chart with chartJS.But my question is about basic question about javascript.
My html code is
<div class="static-spline-chart-1" data-points='[
{ x: new Date(2017, 0, 3), y: 650 },
{ x: new Date(2017, 0, 4), y: 700 },
{ x: new Date(2017, 0, 5), y: 710 },
{ x: new Date(2017, 0, 6), y: 658 },
{ x: new Date(2017, 0, 7), y: 734 },
{ x: new Date(2017, 0, 8), y: 963 },
{ x: new Date(2017, 0, 9), y: 847 },
{ x: new Date(2017, 0, 10), y: 853 },
{ x: new Date(2017, 0, 11), y: 869 },
{ x: new Date(2017, 0, 12), y: 943 },
{ x: new Date(2017, 0, 13), y: 970 },
{ x: new Date(2017, 0, 14), y: 869 },
{ x: new Date(2017, 0, 15), y: 890 },
{ x: new Date(2017, 0, 16), y: 930 }
] '></div>
<div class="static-spline-chart-1" data-points='[
{ x: new Date(2017, 0, 3), y: 650 },
{ x: new Date(2017, 0, 4), y: 700 },
{ x: new Date(2017, 0, 5), y: 710 },
{ x: new Date(2017, 0, 6), y: 658 },
{ x: new Date(2017, 0, 7), y: 734 },
{ x: new Date(2017, 0, 8), y: 963 },
{ x: new Date(2017, 0, 9), y: 847 },
{ x: new Date(2017, 0, 10), y: 853 },
{ x: new Date(2017, 0, 11), y: 869 },
{ x: new Date(2017, 0, 12), y: 943 },
{ x: new Date(2017, 0, 13), y: 970 },
{ x: new Date(2017, 0, 14), y: 869 },
{ x: new Date(2017, 0, 15), y: 890 },
{ x: new Date(2017, 0, 16), y: 930 }
] '></div>
And Js code is:
var StaticSplineChartOptions = {
backgroundColor: "transparent",
axisY: {
lineThickness: 0,
includeZero: false,
gridThickness: 0,
tickLength: 0,
lineThickness: 0,
labelFontSize:0,
margin:-20,
},
axisX: {
labelFontSize:0,
lineThickness: 0,
includeZero: false,
gridThickness: 0,
tickLength: 0,
lineThickness: 0,
},
tickThickness: 0,
}
function RenderStaticSplineChart(className,options) {
var charts = [];
var chartClassElements = document.getElementsByClassName(className);
for (var i = 0; i < chartClassElements.length; i++) {
var dataPoints = chartClassElements[i].data('points');
options.push({
data: [{
color: '#fff',
type: "spline",
markerSize: 0,
dataPoints: dataPoints,
}]
});
charts.push(new CanvasJS.Chart(chartClassElements[i], options));
charts[i].render();
}
}
RenderStaticSplineChart("static-spline-chart-1", StaticSplineChartOptions);
My objective is to make StaticSplineChartOptions like the following object
var StaticSplineChartOptions = {
backgroundColor: "transparent",
axisY: {
lineThickness: 0,
includeZero: false,
gridThickness: 0,
tickLength: 0,
lineThickness: 0,
labelFontSize:0,
margin:-20,
},
axisX: {
labelFontSize:0,
lineThickness: 0,
includeZero: false,
gridThickness: 0,
tickLength: 0,
lineThickness: 0,
},
tickThickness: 0,
data: [{
color: '#fff',
type: "spline",
markerSize: 0,
dataPoints: [
{ x: new Date(2017, 0, 3), y: 650 },
{ x: new Date(2017, 0, 4), y: 700 },
{ x: new Date(2017, 0, 5), y: 710 },
{ x: new Date(2017, 0, 6), y: 658 },
{ x: new Date(2017, 0, 7), y: 734 },
{ x: new Date(2017, 0, 8), y: 963 },
{ x: new Date(2017, 0, 9), y: 847 },
{ x: new Date(2017, 0, 10), y: 853 },
{ x: new Date(2017, 0, 11), y: 869 },
{ x: new Date(2017, 0, 12), y: 943 },
{ x: new Date(2017, 0, 13), y: 970 },
{ x: new Date(2017, 0, 14), y: 869 },
{ x: new Date(2017, 0, 15), y: 890 },
{ x: new Date(2017, 0, 16), y: 930 }
]
}]
}
But i am getting such an error jquery.js:2 Uncaught TypeError: chartClassElements[i].data is not a function .
How i can get data attribute of that class in for loop? and how i get that above type of objects after getting that data?

change
chartClassElements[i].data('points')
to
chartClassElements[i].dataset.points
in the RenderStaticSplineChart function

instead of chartClassElements[i].data('points')
try
chartClassElements[i].attr('data-points')
but you still have a problem with the rest of the code. the return of the above code is not in the array. its a simple text. you may put those data-points in html with some backendish language. try jsonify or serialize it. so after when you read it with js, by simply de serialize or parsing json, you can have the real array back

Highcharts: Stacked area drilldown to multiple series

I am trying to present a graph that shows the current progress with an ongoing project. So basically once you open the plot, it will show you a plot of Passed, Failed and not run test runs in a stacked area.
I want to drilldown on the main data (Passed, Failed, Not Run). I want to basically show the teams(s) that may have passed, failed, or not run. Let's say that you want to drill down on "Passed", once you click on "Passed", it should bring multiple series, each serie containing the team name and the amount of Passed tests.
JSfiddle: https://jsfiddle.net/9aqbLzar/3/
Demo:
Highcharts.Tick.prototype.drillable = function() {};
Highcharts.setOptions({
lang: {
drillUpText: '◁ Go back'
}
});
Highcharts.chart('container', {
chart: {
type: 'area'
},
xAxis: {
type: 'datetime',
tickmarkPlacement: 'on',
title: {
enabled: false
}
},
yAxis: {
allowDecimals: false,
title: {
text: "Test runs"
}
},
tooltip: {
shared: false
},
plotOptions: {
area: {
stacking: 'normal',
lineColor: null,
lineWidth: 1,
marker: {
enabled: false,
lineWidth: 1,
lineColor: null,
symbol: 'circle',
radius: 3
}
},
cursor: 'pointer',
trackByArea: true
},
series: [{
name: 'Passed',
data: [{
x: Date.UTC(2017, 09, 06),
y: 20,
drilldown: 'Passed'
}, {
x: Date.UTC(2017, 09, 07),
y: 21,
drilldown: 'Passed'
}, {
x: Date.UTC(2017, 09, 08),
y: 22,
drilldown: 'Passed'
}, {
x: Date.UTC(2017, 09, 09),
y: 23,
drilldown: 'Passed'
}]
},
{
name: 'Failed',
data: [{
x: Date.UTC(2017, 09, 06),
y: 6,
drilldown: 'Failed'
}, {
x: Date.UTC(2017, 09, 07),
y: 5,
drilldown: 'Failed'
}, {
x: Date.UTC(2017, 09, 08),
y: 4,
drilldown: 'Failed'
}, {
x: Date.UTC(2017, 09, 09),
y: 3,
drilldown: 'Failed'
}]
},
{
name: 'Not run',
data: [{
x: Date.UTC(2017, 09, 06),
y: 8,
drilldown: 'Not run'
}, {
x: Date.UTC(2017, 09, 07),
y: 7,
drilldown: 'Not run'
}, {
x: Date.UTC(2017, 09, 08),
y: 6,
drilldown: 'Not run'
}, {
x: Date.UTC(2017, 09, 09),
y: 5,
drilldown: 'Not run'
}]
}
],
drilldown: {
series: [{
id: 'Passed',
data: [{
x: Date.UTC(2017, 09, 11),
y: 1
}, {
x: Date.UTC(2017, 09, 12),
y: 2
}, {
x: Date.UTC(2017, 09, 13),
y: 3
}, {
x: Date.UTC(2017, 10, 14),
y: 5
}]
}, {
id: 'Failed',
data: [{
x: Date.UTC(2017, 09, 09),
y: 5
}, {
x: Date.UTC(2017, 09, 10),
y: 6
}, {
x: Date.UTC(2017, 09, 11),
y: 7
}, {
x: Date.UTC(2017, 10, 12),
y: 8
}, {
x: Date.UTC(2017, 10, 13),
y: 9
}]
}, {
id: 'Not run',
data: [{
x: Date.UTC(2017, 09, 09),
y: 5
}, {
x: Date.UTC(2017, 09, 10),
y: 6
}, {
x: Date.UTC(2017, 09, 11),
y: 7
}, {
x: Date.UTC(2017, 10, 12),
y: 8
}, {
x: Date.UTC(2017, 10, 13),
y: 9
}]
}]
}
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

First of all, you need to have multiple drilldown series for each series (e.g. three for the 'Passed', three for the 'Failed', three for the 'Not run'). Secondly, the only way to drilldown to more than one series is to add them on drilldown event with a function called addSingleSeriesAsDrilldown. When desired series are added all you need to do is to apply them with applyDrilldown function. Take a look at the example below and in case of any question, feel free to ask.
API Reference:
https://api.highcharts.com/highcharts/chart.events.drilldown
Example:
https://jsfiddle.net/7a6gh7vz/

How can I add both plotLines and plotBands to a HighStocks graph using HighChart?

I've been trying to add my plotLines to this graph and I've followed the syntax online; however, the plotLine will not appear.
The plotBands appear just fine, so I am just trying to see what I may be missing to get it to work.
Below is a link to my jsFiddle:
https://jsfiddle.net/fbmoju7f/75/
$.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function(data) {
Highcharts.stockChart('container', {
title: {
text: 'Morphine'
},
xAxis: {
type: 'datetime',
floor: Date.UTC(2017, 2, 2),
ceiling: Date.UTC(2017, 2, 9),
plotLine: {
value: Date.UTC(2017, 2, 8),
color: '#3A1231', //Purple
width: 2,
dashStyle: 'solid'
}
},
yAxis: { //Keep yAxis ----------------------------------------
floor: 0,
ceiling: 100,
plotBands: [{
color: '#F9F98E', //Yellow
from: 0,
to: 10
}, {
color: '#9DF98E', //Green
from: 10,
to: 30
}, {
color: '#F9958E', //Red
from: 30,
to: 100
}]
},
rangeSelector: {
buttons: [{
type: 'day',
count: 8,
text: '-7d'
}, {
type: 'day',
count: 4,
text: '-3d'
}, {
type: 'day',
count: 3,
text: '-2d'
}, {
type: 'day',
count: 2,
text: '-1d'
}],
selected: 2 //Initial view upon opening application
},
series: [{
type: 'spline',
color: '#4C91FA',
data: [ //Test data set
[Date.UTC(2017, 2, 1), 5.7],
[Date.UTC(2017, 2, 2), 7.3],
[Date.UTC(2017, 2, 3), 10.3],
[Date.UTC(2017, 2, 3), 15.6],
[Date.UTC(2017, 2, 4), 12.7],
[Date.UTC(2017, 2, 4), 14.0],
[Date.UTC(2017, 2, 4), 17.8],
[Date.UTC(2017, 2, 5), 19.1],
[Date.UTC(2017, 2, 5), 18.4],
[Date.UTC(2017, 2, 6), 19.5],
[Date.UTC(2017, 2, 6), 22.7],
[Date.UTC(2017, 2, 6), 25.1],
[Date.UTC(2017, 2, 7), 28.2],
[Date.UTC(2017, 2, 7), 30.4],
[Date.UTC(2017, 2, 8), 29.6],
[Date.UTC(2017, 2, 9), 29.0],
[Date.UTC(2017, 2, 10), 27.8]
]
}]
});
});
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/modules/stock/exporting.js"></script>
<div id="container" style="height: 400px; min-width: 310px"></div>

You have the wrong property name and you are not enclosing the plotLines in brackets. It should be like:
xAxis: {
type: 'datetime',
floor: Date.UTC(2017, 2, 2),
ceiling: Date.UTC(2017, 2, 9),
plotLines: [{
value: Date.UTC(2017, 2, 8),
color: '#3A1231', //Purple
width: 2,
dashStyle: 'solid'
}]
},

convert axisX date to text in Html5 5 line chart

convert x-axis date to text in Html5 5 line chart, currently on x-axis 'jan,feb....' appearing . want to display text like subject name .Here is the refrence site is http://canvasjs.com/html5-javascript-line-chart/
$(function () {
var chart = new CanvasJS.Chart("chartContainer",
{
theme: "theme2",
title:{
text: "Line Chart"
},
animationEnabled: true,
axisX: {
valueFormatString: "MMM",
interval:1,
intervalType: "month"
},
axisY:{
includeZero: false
},
data: [
{
type: "line",
//lineThickness: 3,
dataPoints: [
{ x: new Date(2012, 00, 1), y: 450 },
{ x: new Date(2012, 01, 1), y: 414},
{ x: new Date(2012, 02, 1), y: 520, indexLabel: "highest",markerColor: "red", markerType: "triangle"},
{ x: new Date(2012, 03, 1), y: 460 },
{ x: new Date(2012, 04, 1), y: 450 },
{ x: new Date(2012, 05, 1), y: 500 },
{ x: new Date(2012, 06, 1), y: 480 },
{ x: new Date(2012, 07, 1), y: 480 },
{ x: new Date(2012, 08, 1), y: 410 , indexLabel: "lowest",markerColor: "DarkSlateGrey", markerType: "cross"},
{ x: new Date(2012, 09, 1), y: 500 },
{ x: new Date(2012, 10, 1), y: 480 },
{ x: new Date(2012, 11, 1), y: 510 }
]
}
]
});
chart.render();
});

You need to put the label key with value to the objects. Here is a jsFiddle.
dataPoints: [{
x: new Date(2012, 00, 1),
y: 450,
label: '2012-00-01'
}, {
x: new Date(2012, 01, 1),
y: 414,
label: '2012-01-01'
}, {
x: new Date(2012, 02, 1),
y: 520,
label: '2012-02-01',
indexLabel: "highest",
markerColor: "red",
markerType: "triangle"
}, {
x: new Date(2012, 08, 1),
y: 410,
label: '2012-08-01',
indexLabel: "lowest",
markerColor: "DarkSlateGrey",
markerType: "cross"
}, {
x: new Date(2012, 09, 1),
y: 500,
label: '2012-09-01'
},

How can I make Highcharts label a datetime X-axis with relative dates?

I have the following chart that displays multiple curves. These curves all occurred at different times, but I'm aligning them so that they can be viewed as if they occurred at the same time. You can view the actual date for each point by hovering over the point.
//set global chart options
$(document).ready(function() {
Highcharts.setOptions({
xAxis: {
type: 'datetime',
},
yAxis: [{
title: {
text: 'FIXME',
style: {
color: '#4bb2c5',
},
},
min: 0,
maxPadding: 0,
}, ],
legend: {
labelFormat: '<span style="font-size: xx-small;">{name}</span>',
},
tooltip: {
formatter: function() {
return Highcharts.dateFormat('%B %e, %Y', this.point.name) + "<br>Cases: " + this.point.y;
}
},
});
drawGraphMultipleCurves();
});
var plotMultipleCurves = null;
function drawGraphMultipleCurves() {
//no need to redraw if we've already drawn the graph
if (plotMultipleCurves != null)
return;
//shifted cumulative time series
var cumulativeTimeSeriesMultipleCurves549 = [
{
x: Date.UTC(2001, 8, 1, 0),
y: 1,
name: Date.UTC(2008, 9, 27, 0),
},
{
x: Date.UTC(2001, 8, 8, 0),
y: 2,
name: Date.UTC(2008, 10, 3, 0),
},
{
x: Date.UTC(2001, 8, 15, 0),
y: 7,
name: Date.UTC(2008, 10, 10, 0),
},
{
x: Date.UTC(2001, 8, 22, 0),
y: 14,
name: Date.UTC(2008, 10, 17, 0),
},
{
x: Date.UTC(2001, 8, 29, 0),
y: 33,
name: Date.UTC(2008, 10, 24, 0),
},
{
x: Date.UTC(2001, 9, 6, 0),
y: 50,
name: Date.UTC(2008, 11, 1, 0),
},
{
x: Date.UTC(2001, 9, 13, 0),
y: 65,
name: Date.UTC(2008, 11, 8, 0),
},
{
x: Date.UTC(2001, 9, 20, 0),
y: 97,
name: Date.UTC(2008, 11, 15, 0),
},
{
x: Date.UTC(2001, 9, 27, 0),
y: 128,
name: Date.UTC(2008, 11, 22, 0),
},
{
x: Date.UTC(2001, 10, 3, 0),
y: 192,
name: Date.UTC(2008, 11, 29, 0),
},
{
x: Date.UTC(2001, 10, 10, 0),
y: 239,
name: Date.UTC(2009, 0, 5, 0),
},
{
x: Date.UTC(2001, 10, 17, 0),
y: 298,
name: Date.UTC(2009, 0, 12, 0),
},
{
x: Date.UTC(2001, 10, 24, 0),
y: 366,
name: Date.UTC(2009, 0, 19, 0),
},
{
x: Date.UTC(2001, 11, 1, 0),
y: 439,
name: Date.UTC(2009, 0, 26, 0),
},
{
x: Date.UTC(2001, 11, 8, 0),
y: 543,
name: Date.UTC(2009, 1, 2, 0),
},
{
x: Date.UTC(2001, 11, 15, 0),
y: 623,
name: Date.UTC(2009, 1, 9, 0),
},
{
x: Date.UTC(2001, 11, 22, 0),
y: 692,
name: Date.UTC(2009, 1, 16, 0),
},
{
x: Date.UTC(2001, 11, 29, 0),
y: 738,
name: Date.UTC(2009, 1, 23, 0),
},
{
x: Date.UTC(2002, 0, 5, 0),
y: 783,
name: Date.UTC(2009, 2, 2, 0),
},
{
x: Date.UTC(2002, 0, 12, 0),
y: 819,
name: Date.UTC(2009, 2, 9, 0),
},
{
x: Date.UTC(2002, 0, 19, 0),
y: 836,
name: Date.UTC(2009, 2, 16, 0),
},
{
x: Date.UTC(2002, 0, 26, 0),
y: 850,
name: Date.UTC(2009, 2, 23, 0),
},
{
x: Date.UTC(2002, 1, 2, 0),
y: 864,
name: Date.UTC(2009, 2, 30, 0),
},
{
x: Date.UTC(2002, 1, 9, 0),
y: 875,
name: Date.UTC(2009, 3, 6, 0),
},
{
x: Date.UTC(2002, 1, 16, 0),
y: 881,
name: Date.UTC(2009, 3, 13, 0),
},
{
x: Date.UTC(2002, 1, 23, 0),
y: 884,
name: Date.UTC(2009, 3, 20, 0),
},
{
x: Date.UTC(2002, 2, 2, 0),
y: 885,
name: Date.UTC(2009, 3, 27, 0),
},
{
x: Date.UTC(2002, 2, 9, 0),
y: 888,
name: Date.UTC(2009, 4, 4, 0),
},
{
x: Date.UTC(2002, 2, 16, 0),
y: 890,
name: Date.UTC(2009, 4, 11, 0),
},
{
x: Date.UTC(2002, 2, 23, 0),
y: 892,
name: Date.UTC(2009, 4, 18, 0),
},
];
//shifted cumulative time series
var cumulativeTimeSeriesMultipleCurves805 = [
{
x: Date.UTC(2001, 8, 1, 0),
y: 2,
name: Date.UTC(2012, 8, 26, 0),
},
{
x: Date.UTC(2001, 8, 2, 0),
y: 4,
name: Date.UTC(2012, 8, 27, 0),
},
{
x: Date.UTC(2001, 8, 3, 0),
y: 5,
name: Date.UTC(2012, 8, 28, 0),
},
{
x: Date.UTC(2001, 8, 4, 0),
y: 7,
name: Date.UTC(2012, 8, 29, 0),
},
{
x: Date.UTC(2001, 8, 5, 0),
y: 9,
name: Date.UTC(2012, 8, 30, 0),
},
{
x: Date.UTC(2001, 8, 6, 0),
y: 19,
name: Date.UTC(2012, 9, 1, 0),
},
{
x: Date.UTC(2001, 8, 7, 0),
y: 34,
name: Date.UTC(2012, 9, 2, 0),
},
{
x: Date.UTC(2001, 8, 8, 0),
y: 53,
name: Date.UTC(2012, 9, 3, 0),
},
{
x: Date.UTC(2001, 8, 9, 0),
y: 88,
name: Date.UTC(2012, 9, 4, 0),
},
{
x: Date.UTC(2001, 8, 10, 0),
y: 114,
name: Date.UTC(2012, 9, 5, 0),
},
{
x: Date.UTC(2001, 8, 11, 0),
y: 129,
name: Date.UTC(2012, 9, 6, 0),
},
{
x: Date.UTC(2001, 8, 12, 0),
y: 154,
name: Date.UTC(2012, 9, 7, 0),
},
{
x: Date.UTC(2001, 8, 13, 0),
y: 186,
name: Date.UTC(2012, 9, 8, 0),
},
{
x: Date.UTC(2001, 8, 14, 0),
y: 212,
name: Date.UTC(2012, 9, 9, 0),
},
{
x: Date.UTC(2001, 8, 15, 0),
y: 231,
name: Date.UTC(2012, 9, 10, 0),
},
{
x: Date.UTC(2001, 8, 16, 0),
y: 269,
name: Date.UTC(2012, 9, 11, 0),
},
{
x: Date.UTC(2001, 8, 17, 0),
y: 300,
name: Date.UTC(2012, 9, 12, 0),
},
{
x: Date.UTC(2001, 8, 18, 0),
y: 317,
name: Date.UTC(2012, 9, 13, 0),
},
{
x: Date.UTC(2001, 8, 19, 0),
y: 327,
name: Date.UTC(2012, 9, 14, 0),
},
{
x: Date.UTC(2001, 8, 20, 0),
y: 352,
name: Date.UTC(2012, 9, 15, 0),
},
{
x: Date.UTC(2001, 8, 21, 0),
y: 381,
name: Date.UTC(2012, 9, 16, 0),
},
{
x: Date.UTC(2001, 8, 22, 0),
y: 412,
name: Date.UTC(2012, 9, 17, 0),
},
{
x: Date.UTC(2001, 8, 23, 0),
y: 441,
name: Date.UTC(2012, 9, 18, 0),
},
{
x: Date.UTC(2001, 8, 24, 0),
y: 489,
name: Date.UTC(2012, 9, 19, 0),
},
{
x: Date.UTC(2001, 8, 25, 0),
y: 507,
name: Date.UTC(2012, 9, 20, 0),
},
{
x: Date.UTC(2001, 8, 26, 0),
y: 546,
name: Date.UTC(2012, 9, 21, 0),
},
{
x: Date.UTC(2001, 8, 27, 0),
y: 605,
name: Date.UTC(2012, 9, 22, 0),
},
{
x: Date.UTC(2001, 8, 28, 0),
y: 656,
name: Date.UTC(2012, 9, 23, 0),
},
{
x: Date.UTC(2001, 8, 29, 0),
y: 701,
name: Date.UTC(2012, 9, 24, 0),
},
{
x: Date.UTC(2001, 8, 30, 0),
y: 762,
name: Date.UTC(2012, 9, 25, 0),
},
{
x: Date.UTC(2001, 9, 1, 0),
y: 832,
name: Date.UTC(2012, 9, 26, 0),
},
{
x: Date.UTC(2001, 9, 2, 0),
y: 894,
name: Date.UTC(2012, 9, 27, 0),
},
{
x: Date.UTC(2001, 9, 3, 0),
y: 941,
name: Date.UTC(2012, 9, 28, 0),
},
{
x: Date.UTC(2001, 9, 4, 0),
y: 959,
name: Date.UTC(2012, 9, 29, 0),
},
{
x: Date.UTC(2001, 9, 5, 0),
y: 980,
name: Date.UTC(2012, 9, 30, 0),
},
{
x: Date.UTC(2001, 9, 6, 0),
y: 1005,
name: Date.UTC(2012, 9, 31, 0),
},
{
x: Date.UTC(2001, 9, 7, 0),
y: 1036,
name: Date.UTC(2012, 10, 1, 0),
},
{
x: Date.UTC(2001, 9, 8, 0),
y: 1062,
name: Date.UTC(2012, 10, 2, 0),
},
{
x: Date.UTC(2001, 9, 9, 0),
y: 1074,
name: Date.UTC(2012, 10, 3, 0),
},
{
x: Date.UTC(2001, 9, 10, 0),
y: 1105,
name: Date.UTC(2012, 10, 4, 0),
},
{
x: Date.UTC(2001, 9, 11, 0),
y: 1154,
name: Date.UTC(2012, 10, 5, 0),
},
{
x: Date.UTC(2001, 9, 12, 0),
y: 1192,
name: Date.UTC(2012, 10, 6, 0),
},
{
x: Date.UTC(2001, 9, 13, 0),
y: 1218,
name: Date.UTC(2012, 10, 7, 0),
},
{
x: Date.UTC(2001, 9, 14, 0),
y: 1268,
name: Date.UTC(2012, 10, 8, 0),
},
{
x: Date.UTC(2001, 9, 15, 0),
y: 1302,
name: Date.UTC(2012, 10, 9, 0),
},
{
x: Date.UTC(2001, 9, 16, 0),
y: 1332,
name: Date.UTC(2012, 10, 10, 0),
},
{
x: Date.UTC(2001, 9, 17, 0),
y: 1357,
name: Date.UTC(2012, 10, 11, 0),
},
];
//shifted cumulative time series
var cumulativeTimeSeriesMultipleCurves534 = [
{
x: Date.UTC(2001, 8, 1, 0),
y: 0,
name: Date.UTC(2006, 0, 1, 0),
},
{
x: Date.UTC(2001, 9, 2, 0),
y: 1,
name: Date.UTC(2006, 1, 1, 0),
},
{
x: Date.UTC(2001, 9, 30, 0),
y: 1,
name: Date.UTC(2006, 2, 1, 0),
},
{
x: Date.UTC(2001, 10, 30, 0),
y: 1,
name: Date.UTC(2006, 3, 1, 0),
},
{
x: Date.UTC(2001, 11, 30, 0),
y: 5,
name: Date.UTC(2006, 4, 1, 0),
},
{
x: Date.UTC(2002, 0, 30, 0),
y: 9,
name: Date.UTC(2006, 5, 1, 0),
},
{
x: Date.UTC(2002, 2, 1, 0),
y: 21,
name: Date.UTC(2006, 6, 1, 0),
},
{
x: Date.UTC(2002, 3, 1, 0),
y: 301,
name: Date.UTC(2006, 7, 1, 0),
},
{
x: Date.UTC(2002, 4, 2, 0),
y: 735,
name: Date.UTC(2006, 8, 1, 0),
},
{
x: Date.UTC(2002, 5, 1, 0),
y: 964,
name: Date.UTC(2006, 9, 1, 0),
},
{
x: Date.UTC(2002, 6, 2, 0),
y: 1041,
name: Date.UTC(2006, 10, 1, 0),
},
{
x: Date.UTC(2002, 7, 1, 0),
y: 1044,
name: Date.UTC(2006, 11, 1, 0),
},
{
x: Date.UTC(2002, 8, 1, 0),
y: 1044,
name: Date.UTC(2007, 0, 1, 0),
},
];
//shifted cumulative time series
var cumulativeTimeSeriesMultipleCurves550 = [
{
x: Date.UTC(2001, 8, 1, 0),
y: 222,
name: Date.UTC(2001, 8, 1, 0),
},
{
x: Date.UTC(2001, 9, 1, 0),
y: 546,
name: Date.UTC(2001, 9, 1, 0),
},
{
x: Date.UTC(2001, 10, 1, 0),
y: 920,
name: Date.UTC(2001, 10, 1, 0),
},
{
x: Date.UTC(2001, 11, 1, 0),
y: 2247,
name: Date.UTC(2001, 11, 1, 0),
},
{
x: Date.UTC(2002, 0, 1, 0),
y: 70613,
name: Date.UTC(2002, 0, 1, 0),
},
{
x: Date.UTC(2002, 1, 1, 0),
y: 108834,
name: Date.UTC(2002, 1, 1, 0),
},
{
x: Date.UTC(2002, 2, 1, 0),
y: 161916,
name: Date.UTC(2002, 2, 1, 0),
},
{
x: Date.UTC(2002, 3, 1, 0),
y: 168862,
name: Date.UTC(2002, 3, 1, 0),
},
{
x: Date.UTC(2002, 4, 1, 0),
y: 170018,
name: Date.UTC(2002, 4, 1, 0),
},
{
x: Date.UTC(2002, 5, 1, 0),
y: 170170,
name: Date.UTC(2002, 5, 1, 0),
},
{
x: Date.UTC(2002, 6, 1, 0),
y: 170252,
name: Date.UTC(2002, 6, 1, 0),
},
{
x: Date.UTC(2002, 7, 1, 0),
y: 170324,
name: Date.UTC(2002, 7, 1, 0),
},
{
x: Date.UTC(2002, 8, 1, 0),
y: 170379,
name: Date.UTC(2002, 8, 1, 0),
},
];
//shifted cumulative time series
var cumulativeTimeSeriesMultipleCurves537 = [
{
x: Date.UTC(2001, 8, 1, 0),
y: 202,
name: Date.UTC(2006, 11, 1, 0),
},
{
x: Date.UTC(2001, 9, 2, 0),
y: 453,
name: Date.UTC(2007, 0, 1, 0),
},
{
x: Date.UTC(2001, 10, 2, 0),
y: 640,
name: Date.UTC(2007, 1, 1, 0),
},
{
x: Date.UTC(2001, 10, 30, 0),
y: 931,
name: Date.UTC(2007, 2, 1, 0),
},
{
x: Date.UTC(2001, 11, 31, 0),
y: 1387,
name: Date.UTC(2007, 3, 1, 0),
},
{
x: Date.UTC(2002, 0, 30, 0),
y: 2256,
name: Date.UTC(2007, 4, 1, 0),
},
{
x: Date.UTC(2002, 2, 2, 0),
y: 3701,
name: Date.UTC(2007, 5, 1, 0),
},
{
x: Date.UTC(2002, 3, 1, 0),
y: 5302,
name: Date.UTC(2007, 6, 1, 0),
},
{
x: Date.UTC(2002, 4, 2, 0),
y: 6353,
name: Date.UTC(2007, 7, 1, 0),
},
{
x: Date.UTC(2002, 5, 2, 0),
y: 7156,
name: Date.UTC(2007, 8, 1, 0),
},
{
x: Date.UTC(2002, 6, 2, 0),
y: 7804,
name: Date.UTC(2007, 9, 1, 0),
},
{
x: Date.UTC(2002, 7, 2, 0),
y: 8351,
name: Date.UTC(2007, 10, 1, 0),
},
{
x: Date.UTC(2002, 8, 1, 0),
y: 8839,
name: Date.UTC(2007, 11, 1, 0),
},
];
//plot the graph
plotMultipleCurves = new Highcharts.Chart({
chart: {
renderTo: 'multipleCurves',
},
title: {
text: 'Outbreak comparison',
},
series: [
{
data: cumulativeTimeSeriesMultipleCurves549,
name: '64% | Australia (2008)',
pointPlacement: 'between',
zIndex: 5,
marker: {
enabled: false,
},
color: '#800026',
},
{
data: cumulativeTimeSeriesMultipleCurves805,
name: '52% | Portugal (2012)',
pointPlacement: 'between',
zIndex: 4,
marker: {
enabled: false,
},
color: '#fd9841',
},
{
data: cumulativeTimeSeriesMultipleCurves534,
name: '46% | China (2006)',
pointPlacement: 'between',
zIndex: 3,
marker: {
enabled: false,
},
color: '#fee288',
},
{
data: cumulativeTimeSeriesMultipleCurves550,
name: '46% | Brazil (2001)',
pointPlacement: 'between',
zIndex: 2,
marker: {
enabled: false,
},
color: '#ffe691',
},
{
data: cumulativeTimeSeriesMultipleCurves537,
name: '45% | Singapore (2006)',
pointPlacement: 'between',
zIndex: 1,
marker: {
enabled: false,
},
color: '#ffeda0',
},
],
xAxis: [{
labels: {
enabled: false,
},
tickLength: 0,
title: {
text: 'Time',
},
}],
yAxis: [{
title: {
text: 'Cumulative cases',
},
min: 0,
maxPadding: 0,
}],
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/2.2.4/highcharts.js"></script>
<script src="https://code.highcharts.com/2.2.4/highcharts-more.js"></script>
<div id="multipleCurves"></div>
The problem right now is that the X-axis ticks/labels are blank. It clearly doesn't make sense to allow Highcharts to place dates for the X-axis labels. Instead of placing absolute dates, I want to place relative dates. Basically, I want a way to determine how long the longest time series is and scale the relative labels appropriately. Here are some examples:
In the graph I show above, it makes sense to have labels such as "Month 1", "Month 2", "Month 3", etc. And, if there are too many labels/ticks, then it would skip the appropriate amount (e.g., "Month 1", "Month 4", "Month 7")
If the longest time series were a lot shorter (say, 30 days), then the labels would be "Day 1", "Day 2", etc. Similarly, it would skip labels/ticks when appropriate (e.g., "Day 1", "Day 8", "Day 15").
How can I make this happen in Highcharts?

You can use xAxis.labels.formatter, for example:
//set global chart options
$(document).ready(function() {
Highcharts.setOptions({
xAxis: {
type: 'datetime',
},
yAxis: [{
title: {
text: 'FIXME',
style: {
color: '#4bb2c5',
},
},
min: 0,
maxPadding: 0,
}, ],
legend: {
labelFormat: '<span style="font-size: xx-small;">{name}</span>',
},
tooltip: {
formatter: function() {
return Highcharts.dateFormat('%B %e, %Y', this.point.name) + "<br>Cases: " + this.point.y;
}
},
});
drawGraphMultipleCurves();
});
var plotMultipleCurves = null;
function drawGraphMultipleCurves() {
//no need to redraw if we've already drawn the graph
if (plotMultipleCurves != null)
return;
//shifted cumulative time series
var cumulativeTimeSeriesMultipleCurves549 = [
{
x: Date.UTC(2001, 8, 1, 0),
y: 1,
name: Date.UTC(2008, 9, 27, 0),
},
{
x: Date.UTC(2001, 8, 8, 0),
y: 2,
name: Date.UTC(2008, 10, 3, 0),
},
{
x: Date.UTC(2001, 8, 15, 0),
y: 7,
name: Date.UTC(2008, 10, 10, 0),
},
{
x: Date.UTC(2001, 8, 22, 0),
y: 14,
name: Date.UTC(2008, 10, 17, 0),
},
{
x: Date.UTC(2001, 8, 29, 0),
y: 33,
name: Date.UTC(2008, 10, 24, 0),
},
{
x: Date.UTC(2001, 9, 6, 0),
y: 50,
name: Date.UTC(2008, 11, 1, 0),
},
{
x: Date.UTC(2001, 9, 13, 0),
y: 65,
name: Date.UTC(2008, 11, 8, 0),
},
{
x: Date.UTC(2001, 9, 20, 0),
y: 97,
name: Date.UTC(2008, 11, 15, 0),
},
{
x: Date.UTC(2001, 9, 27, 0),
y: 128,
name: Date.UTC(2008, 11, 22, 0),
},
{
x: Date.UTC(2001, 10, 3, 0),
y: 192,
name: Date.UTC(2008, 11, 29, 0),
},
{
x: Date.UTC(2001, 10, 10, 0),
y: 239,
name: Date.UTC(2009, 0, 5, 0),
},
{
x: Date.UTC(2001, 10, 17, 0),
y: 298,
name: Date.UTC(2009, 0, 12, 0),
},
{
x: Date.UTC(2001, 10, 24, 0),
y: 366,
name: Date.UTC(2009, 0, 19, 0),
},
{
x: Date.UTC(2001, 11, 1, 0),
y: 439,
name: Date.UTC(2009, 0, 26, 0),
},
{
x: Date.UTC(2001, 11, 8, 0),
y: 543,
name: Date.UTC(2009, 1, 2, 0),
},
{
x: Date.UTC(2001, 11, 15, 0),
y: 623,
name: Date.UTC(2009, 1, 9, 0),
},
{
x: Date.UTC(2001, 11, 22, 0),
y: 692,
name: Date.UTC(2009, 1, 16, 0),
},
{
x: Date.UTC(2001, 11, 29, 0),
y: 738,
name: Date.UTC(2009, 1, 23, 0),
},
{
x: Date.UTC(2002, 0, 5, 0),
y: 783,
name: Date.UTC(2009, 2, 2, 0),
},
{
x: Date.UTC(2002, 0, 12, 0),
y: 819,
name: Date.UTC(2009, 2, 9, 0),
},
{
x: Date.UTC(2002, 0, 19, 0),
y: 836,
name: Date.UTC(2009, 2, 16, 0),
},
{
x: Date.UTC(2002, 0, 26, 0),
y: 850,
name: Date.UTC(2009, 2, 23, 0),
},
{
x: Date.UTC(2002, 1, 2, 0),
y: 864,
name: Date.UTC(2009, 2, 30, 0),
},
{
x: Date.UTC(2002, 1, 9, 0),
y: 875,
name: Date.UTC(2009, 3, 6, 0),
},
{
x: Date.UTC(2002, 1, 16, 0),
y: 881,
name: Date.UTC(2009, 3, 13, 0),
},
{
x: Date.UTC(2002, 1, 23, 0),
y: 884,
name: Date.UTC(2009, 3, 20, 0),
},
{
x: Date.UTC(2002, 2, 2, 0),
y: 885,
name: Date.UTC(2009, 3, 27, 0),
},
{
x: Date.UTC(2002, 2, 9, 0),
y: 888,
name: Date.UTC(2009, 4, 4, 0),
},
{
x: Date.UTC(2002, 2, 16, 0),
y: 890,
name: Date.UTC(2009, 4, 11, 0),
},
{
x: Date.UTC(2002, 2, 23, 0),
y: 892,
name: Date.UTC(2009, 4, 18, 0),
},
];
//shifted cumulative time series
var cumulativeTimeSeriesMultipleCurves805 = [
{
x: Date.UTC(2001, 8, 1, 0),
y: 2,
name: Date.UTC(2012, 8, 26, 0),
},
{
x: Date.UTC(2001, 8, 2, 0),
y: 4,
name: Date.UTC(2012, 8, 27, 0),
},
{
x: Date.UTC(2001, 8, 3, 0),
y: 5,
name: Date.UTC(2012, 8, 28, 0),
},
{
x: Date.UTC(2001, 8, 4, 0),
y: 7,
name: Date.UTC(2012, 8, 29, 0),
},
{
x: Date.UTC(2001, 8, 5, 0),
y: 9,
name: Date.UTC(2012, 8, 30, 0),
},
{
x: Date.UTC(2001, 8, 6, 0),
y: 19,
name: Date.UTC(2012, 9, 1, 0),
},
{
x: Date.UTC(2001, 8, 7, 0),
y: 34,
name: Date.UTC(2012, 9, 2, 0),
},
{
x: Date.UTC(2001, 8, 8, 0),
y: 53,
name: Date.UTC(2012, 9, 3, 0),
},
{
x: Date.UTC(2001, 8, 9, 0),
y: 88,
name: Date.UTC(2012, 9, 4, 0),
},
{
x: Date.UTC(2001, 8, 10, 0),
y: 114,
name: Date.UTC(2012, 9, 5, 0),
},
{
x: Date.UTC(2001, 8, 11, 0),
y: 129,
name: Date.UTC(2012, 9, 6, 0),
},
{
x: Date.UTC(2001, 8, 12, 0),
y: 154,
name: Date.UTC(2012, 9, 7, 0),
},
{
x: Date.UTC(2001, 8, 13, 0),
y: 186,
name: Date.UTC(2012, 9, 8, 0),
},
{
x: Date.UTC(2001, 8, 14, 0),
y: 212,
name: Date.UTC(2012, 9, 9, 0),
},
{
x: Date.UTC(2001, 8, 15, 0),
y: 231,
name: Date.UTC(2012, 9, 10, 0),
},
{
x: Date.UTC(2001, 8, 16, 0),
y: 269,
name: Date.UTC(2012, 9, 11, 0),
},
{
x: Date.UTC(2001, 8, 17, 0),
y: 300,
name: Date.UTC(2012, 9, 12, 0),
},
{
x: Date.UTC(2001, 8, 18, 0),
y: 317,
name: Date.UTC(2012, 9, 13, 0),
},
{
x: Date.UTC(2001, 8, 19, 0),
y: 327,
name: Date.UTC(2012, 9, 14, 0),
},
{
x: Date.UTC(2001, 8, 20, 0),
y: 352,
name: Date.UTC(2012, 9, 15, 0),
},
{
x: Date.UTC(2001, 8, 21, 0),
y: 381,
name: Date.UTC(2012, 9, 16, 0),
},
{
x: Date.UTC(2001, 8, 22, 0),
y: 412,
name: Date.UTC(2012, 9, 17, 0),
},
{
x: Date.UTC(2001, 8, 23, 0),
y: 441,
name: Date.UTC(2012, 9, 18, 0),
},
{
x: Date.UTC(2001, 8, 24, 0),
y: 489,
name: Date.UTC(2012, 9, 19, 0),
},
{
x: Date.UTC(2001, 8, 25, 0),
y: 507,
name: Date.UTC(2012, 9, 20, 0),
},
{
x: Date.UTC(2001, 8, 26, 0),
y: 546,
name: Date.UTC(2012, 9, 21, 0),
},
{
x: Date.UTC(2001, 8, 27, 0),
y: 605,
name: Date.UTC(2012, 9, 22, 0),
},
{
x: Date.UTC(2001, 8, 28, 0),
y: 656,
name: Date.UTC(2012, 9, 23, 0),
},
{
x: Date.UTC(2001, 8, 29, 0),
y: 701,
name: Date.UTC(2012, 9, 24, 0),
},
{
x: Date.UTC(2001, 8, 30, 0),
y: 762,
name: Date.UTC(2012, 9, 25, 0),
},
{
x: Date.UTC(2001, 9, 1, 0),
y: 832,
name: Date.UTC(2012, 9, 26, 0),
},
{
x: Date.UTC(2001, 9, 2, 0),
y: 894,
name: Date.UTC(2012, 9, 27, 0),
},
{
x: Date.UTC(2001, 9, 3, 0),
y: 941,
name: Date.UTC(2012, 9, 28, 0),
},
{
x: Date.UTC(2001, 9, 4, 0),
y: 959,
name: Date.UTC(2012, 9, 29, 0),
},
{
x: Date.UTC(2001, 9, 5, 0),
y: 980,
name: Date.UTC(2012, 9, 30, 0),
},
{
x: Date.UTC(2001, 9, 6, 0),
y: 1005,
name: Date.UTC(2012, 9, 31, 0),
},
{
x: Date.UTC(2001, 9, 7, 0),
y: 1036,
name: Date.UTC(2012, 10, 1, 0),
},
{
x: Date.UTC(2001, 9, 8, 0),
y: 1062,
name: Date.UTC(2012, 10, 2, 0),
},
{
x: Date.UTC(2001, 9, 9, 0),
y: 1074,
name: Date.UTC(2012, 10, 3, 0),
},
{
x: Date.UTC(2001, 9, 10, 0),
y: 1105,
name: Date.UTC(2012, 10, 4, 0),
},
{
x: Date.UTC(2001, 9, 11, 0),
y: 1154,
name: Date.UTC(2012, 10, 5, 0),
},
{
x: Date.UTC(2001, 9, 12, 0),
y: 1192,
name: Date.UTC(2012, 10, 6, 0),
},
{
x: Date.UTC(2001, 9, 13, 0),
y: 1218,
name: Date.UTC(2012, 10, 7, 0),
},
{
x: Date.UTC(2001, 9, 14, 0),
y: 1268,
name: Date.UTC(2012, 10, 8, 0),
},
{
x: Date.UTC(2001, 9, 15, 0),
y: 1302,
name: Date.UTC(2012, 10, 9, 0),
},
{
x: Date.UTC(2001, 9, 16, 0),
y: 1332,
name: Date.UTC(2012, 10, 10, 0),
},
{
x: Date.UTC(2001, 9, 17, 0),
y: 1357,
name: Date.UTC(2012, 10, 11, 0),
},
];
//shifted cumulative time series
var cumulativeTimeSeriesMultipleCurves534 = [
{
x: Date.UTC(2001, 8, 1, 0),
y: 0,
name: Date.UTC(2006, 0, 1, 0),
},
{
x: Date.UTC(2001, 9, 2, 0),
y: 1,
name: Date.UTC(2006, 1, 1, 0),
},
{
x: Date.UTC(2001, 9, 30, 0),
y: 1,
name: Date.UTC(2006, 2, 1, 0),
},
{
x: Date.UTC(2001, 10, 30, 0),
y: 1,
name: Date.UTC(2006, 3, 1, 0),
},
{
x: Date.UTC(2001, 11, 30, 0),
y: 5,
name: Date.UTC(2006, 4, 1, 0),
},
{
x: Date.UTC(2002, 0, 30, 0),
y: 9,
name: Date.UTC(2006, 5, 1, 0),
},
{
x: Date.UTC(2002, 2, 1, 0),
y: 21,
name: Date.UTC(2006, 6, 1, 0),
},
{
x: Date.UTC(2002, 3, 1, 0),
y: 301,
name: Date.UTC(2006, 7, 1, 0),
},
{
x: Date.UTC(2002, 4, 2, 0),
y: 735,
name: Date.UTC(2006, 8, 1, 0),
},
{
x: Date.UTC(2002, 5, 1, 0),
y: 964,
name: Date.UTC(2006, 9, 1, 0),
},
{
x: Date.UTC(2002, 6, 2, 0),
y: 1041,
name: Date.UTC(2006, 10, 1, 0),
},
{
x: Date.UTC(2002, 7, 1, 0),
y: 1044,
name: Date.UTC(2006, 11, 1, 0),
},
{
x: Date.UTC(2002, 8, 1, 0),
y: 1044,
name: Date.UTC(2007, 0, 1, 0),
},
];
//shifted cumulative time series
var cumulativeTimeSeriesMultipleCurves550 = [
{
x: Date.UTC(2001, 8, 1, 0),
y: 222,
name: Date.UTC(2001, 8, 1, 0),
},
{
x: Date.UTC(2001, 9, 1, 0),
y: 546,
name: Date.UTC(2001, 9, 1, 0),
},
{
x: Date.UTC(2001, 10, 1, 0),
y: 920,
name: Date.UTC(2001, 10, 1, 0),
},
{
x: Date.UTC(2001, 11, 1, 0),
y: 2247,
name: Date.UTC(2001, 11, 1, 0),
},
{
x: Date.UTC(2002, 0, 1, 0),
y: 70613,
name: Date.UTC(2002, 0, 1, 0),
},
{
x: Date.UTC(2002, 1, 1, 0),
y: 108834,
name: Date.UTC(2002, 1, 1, 0),
},
{
x: Date.UTC(2002, 2, 1, 0),
y: 161916,
name: Date.UTC(2002, 2, 1, 0),
},
{
x: Date.UTC(2002, 3, 1, 0),
y: 168862,
name: Date.UTC(2002, 3, 1, 0),
},
{
x: Date.UTC(2002, 4, 1, 0),
y: 170018,
name: Date.UTC(2002, 4, 1, 0),
},
{
x: Date.UTC(2002, 5, 1, 0),
y: 170170,
name: Date.UTC(2002, 5, 1, 0),
},
{
x: Date.UTC(2002, 6, 1, 0),
y: 170252,
name: Date.UTC(2002, 6, 1, 0),
},
{
x: Date.UTC(2002, 7, 1, 0),
y: 170324,
name: Date.UTC(2002, 7, 1, 0),
},
{
x: Date.UTC(2002, 8, 1, 0),
y: 170379,
name: Date.UTC(2002, 8, 1, 0),
},
];
//shifted cumulative time series
var cumulativeTimeSeriesMultipleCurves537 = [
{
x: Date.UTC(2001, 8, 1, 0),
y: 202,
name: Date.UTC(2006, 11, 1, 0),
},
{
x: Date.UTC(2001, 9, 2, 0),
y: 453,
name: Date.UTC(2007, 0, 1, 0),
},
{
x: Date.UTC(2001, 10, 2, 0),
y: 640,
name: Date.UTC(2007, 1, 1, 0),
},
{
x: Date.UTC(2001, 10, 30, 0),
y: 931,
name: Date.UTC(2007, 2, 1, 0),
},
{
x: Date.UTC(2001, 11, 31, 0),
y: 1387,
name: Date.UTC(2007, 3, 1, 0),
},
{
x: Date.UTC(2002, 0, 30, 0),
y: 2256,
name: Date.UTC(2007, 4, 1, 0),
},
{
x: Date.UTC(2002, 2, 2, 0),
y: 3701,
name: Date.UTC(2007, 5, 1, 0),
},
{
x: Date.UTC(2002, 3, 1, 0),
y: 5302,
name: Date.UTC(2007, 6, 1, 0),
},
{
x: Date.UTC(2002, 4, 2, 0),
y: 6353,
name: Date.UTC(2007, 7, 1, 0),
},
{
x: Date.UTC(2002, 5, 2, 0),
y: 7156,
name: Date.UTC(2007, 8, 1, 0),
},
{
x: Date.UTC(2002, 6, 2, 0),
y: 7804,
name: Date.UTC(2007, 9, 1, 0),
},
{
x: Date.UTC(2002, 7, 2, 0),
y: 8351,
name: Date.UTC(2007, 10, 1, 0),
},
{
x: Date.UTC(2002, 8, 1, 0),
y: 8839,
name: Date.UTC(2007, 11, 1, 0),
},
];
//plot the graph
plotMultipleCurves = new Highcharts.Chart({
chart: {
renderTo: 'multipleCurves',
},
title: {
text: 'Outbreak comparison',
},
series: [
{
data: cumulativeTimeSeriesMultipleCurves549,
name: '64% | Australia (2008)',
pointPlacement: 'between',
zIndex: 5,
marker: {
enabled: false,
},
color: '#800026',
},
{
data: cumulativeTimeSeriesMultipleCurves805,
name: '52% | Portugal (2012)',
pointPlacement: 'between',
zIndex: 4,
marker: {
enabled: false,
},
color: '#fd9841',
},
{
data: cumulativeTimeSeriesMultipleCurves534,
name: '46% | China (2006)',
pointPlacement: 'between',
zIndex: 3,
marker: {
enabled: false,
},
color: '#fee288',
},
{
data: cumulativeTimeSeriesMultipleCurves550,
name: '46% | Brazil (2001)',
pointPlacement: 'between',
zIndex: 2,
marker: {
enabled: false,
},
color: '#ffe691',
},
{
data: cumulativeTimeSeriesMultipleCurves537,
name: '45% | Singapore (2006)',
pointPlacement: 'between',
zIndex: 1,
marker: {
enabled: false,
},
color: '#ffeda0',
},
],
xAxis: [{
labels: {
formatter: function () {
var relative = this.value - this.axis.dataMin,
relativeDate = new Date(relative);
return "Month " + (12 * (relativeDate.getFullYear() - 1970) + relativeDate.getMonth() + 1);
}
},
tickLength: 0,
title: {
text: 'Time',
},
}],
yAxis: [{
title: {
text: 'Cumulative cases',
},
min: 0,
maxPadding: 0,
}],
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/2.2.4/highcharts.js"></script>
<script src="https://code.highcharts.com/2.2.4/highcharts-more.js"></script>
<div id="multipleCurves"></div>

First of all, Highcharts prefers dates in milliseconds, the javascript internal representation, so whenever you use dates on an axis give them in milliseconds. This is the quickest and easiest way to work with dates in Highcharts, as it can usually pretty quickly find the best way to label axes. To convert a date to milliseconds you can use something like:
var myDate = +new Date("some date")
Once you have the dates in that format, if Highcharts doesn't give you exactly what you want, use the chart options like min, max, dateFormat etc.

We Keep Coding

JavaScript is the programming language of the Web.

How to process a list of complex data structures - javascript

Related

Pushing an array into an object Javascipt

Highcharts: Stacked area drilldown to multiple series

How can I add both plotLines and plotBands to a HighStocks graph using HighChart?

convert axisX date to text in Html5 5 line chart

How can I make Highcharts label a datetime X-axis with relative dates?

Categories

Resources