We Keep Coding

Insert python object in the Graphs javascript dataobject

I am working on the Python Django project and have added my HTML in the template folder. Now one of my page needs to render a graph. The data set of the graph is generated from the database and passed to the html.
For a simple graph I have obtained the following code from HERE
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainerSet1",
{
theme: "theme1",
title:{
text: "Restart Count PerDay"
},
animationEnabled: true,
axisX: {
valueFormatString: "MMM",
interval:1,
intervalType: "Date"
},
axisY:{
includeZero: true
},
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();
}
</script>
<script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
But now I am not able to feed custom data from the python view.
I tried doing the following:
axisY:{
includeZero: true
},
data: [
{
type: "line",
//lineThickness: 3,
dataPoints: {{myobjectforData}}
}
Also,
axisY:{
includeZero: true
},
data: [
{
type: "line",
//lineThickness: 3,
dataPoints: "{{myobjectforData}}""
}
I am okay to share more code from my python django template html file.

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 to process a list of complex data structures

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

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.

How to assign a piece of javascript code to a variable and display it in textarea?

So far I have tried a code, which is a assigning a piece of javascript code and displaying it into with id="myCodeArea". But its not displaying in proper format as I am using JSON.stringify for converting the code in JSON I want code in original form. Can anyone help how to achieve it?
var chart = {
title:{
text: "Books Issued from Central Library"
},
axisY :{
includeZero: false
},
axisX: {
valueFormatString: "MMM",
interval: 1,
intervalType: "month"
},
data: [
{
type: "spline",
indexLabelFontColor: "orangered",
dataPoints: [
{ x: new Date(2012, 00, 1), y: 1352 },
{ x: new Date(2012, 01, 1), y: 1514, indexLabel: "Exams" },
{ x: new Date(2012, 02, 1), y: 1321 },
{ x: new Date(2012, 03, 1), y: 1163 },
{ x: new Date(2012, 04, 1), y: 950 , indexLabel: "Holiday Season"},
{ x: new Date(2012, 05, 1), y: 1201 },
{ x: new Date(2012, 06, 1), y: 1186 },
{ x: new Date(2012, 07, 1), y: 1281, indexLabel: "New Session" },
{ x: new Date(2012, 08, 1), y: 1438 },
{ x: new Date(2012, 09, 1), y: 1305 },
{ x: new Date(2012, 10, 1), y: 1480, indexLabel: "Terms" },
{ x: new Date(2012, 11, 1), y: 1391 }
]
}
]
};
var xyz = document.getElementById("myCodeArea");
xyz.textContent = JSON.stringify(chart);
<div id="myTextArea">
<textarea id ="myCodeArea" cols="100"></textarea>
</div>

Maybe this is a way for you to do the editing (stripped your data items a little) ...
var chart = {
title:{
text: "Books Issued from Central Library"
},
axisY :{
includeZero: false
},
axisX: {
valueFormatString: "MMM",
interval: 1,
intervalType: "month"
},
data: [
{
type: "spline",
indexLabelFontColor: "orangered",
dataPoints: [
{ x: "2012-00-01", y: 1352 },
{ x: "2012-01-01", y: 1514, indexLabel: "Exams" },
{ x: "2012-02-01", y: 1321 }
]
}
]
};
var xyz = document.getElementById("myCodeArea");
xyz.textContent = JSON.stringify(chart);
<div id="myTextArea">
<textarea id ="myCodeArea" cols="100"></textarea>
</div>
... and then when you execute the chart object through your method you do the date parsing something like this:
var some_var = new Date(chart.data[i].dataPoints.x);
If you still need to embed the function itself, here is one way how to embed functions in a string
// function name and parameters to pass
var fnstring = "runMe";
var fnparams = [1, 2, 3];
// find object
var fn = window[fnstring];
// is object a function?
if (typeof fn === "function") fn.apply(null, fnparams);
Src: http://www.sitepoint.com/call-javascript-function-string-without-using-eval/

I changed code xyz.textContent = JSON.stringify(chart, null, 4);
Here 4 is number of spaces you want.
Hope you are expecting this.
var chart = {
title:{
text: "Books Issued from Central Library"
},
axisY :{
includeZero: false
},
axisX: {
valueFormatString: "MMM",
interval: 1,
intervalType: "month"
},
data: [
{
type: "spline",
indexLabelFontColor: "orangered",
dataPoints: [
{ x: new Date(2012, 00, 1), y: 1352 },
{ x: new Date(2012, 01, 1), y: 1514, indexLabel: "Exams" },
{ x: new Date(2012, 02, 1), y: 1321 },
{ x: new Date(2012, 03, 1), y: 1163 },
{ x: new Date(2012, 04, 1), y: 950 , indexLabel: "Holiday Season"},
{ x: new Date(2012, 05, 1), y: 1201 },
{ x: new Date(2012, 06, 1), y: 1186 },
{ x: new Date(2012, 07, 1), y: 1281, indexLabel: "New Session" },
{ x: new Date(2012, 08, 1), y: 1438 },
{ x: new Date(2012, 09, 1), y: 1305 },
{ x: new Date(2012, 10, 1), y: 1480, indexLabel: "Terms" },
{ x: new Date(2012, 11, 1), y: 1391 }
]
}
]
};
var xyz = document.getElementById("myCodeArea");
xyz.textContent = JSON.stringify(chart, null, 4);
<div id="myTextArea">
<textarea id ="myCodeArea" cols="100"></textarea>
</div>