We Keep Coding

Highcharts Line Chart doesn't have connecting lines

I have a Highcharts chart in my application and it supports drill down capabilities. Char is a line chart. Sample code can be seen below:
Highcharts.chart('container-main-bar', {
chart: {
type: 'line',
events: {
drilldown: function(e) {
},
drillup: function (e) {
}
},
},
exporting: { enabled: true },
title: {
text: 'Car Sales'
},
xAxis: {
type: 'category',
labels: {
formatter () {
return `<span style="color: #626262">${this.value}</span>`
}
}
},
yAxis: {
title: {
text: 'Sales'
},
allowDecimals: false,
labels: {
formatter () {
return `<span style="color: #626262">${this.value}</span>`
}
}
},
legend: {
enabled: true
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '{point.y}'
},
},
},
tooltip: {
headerFormat: '<span style="font-size:11px">Sales as at</span><br>',
pointFormat: '<span style="color:{point.color}">{point.date}</span>: <b>{point.y}</b> <br/>'
},
"series": [
{
"name": "Australia",
"colorByPoint": true,
"data": [
{
"name": 2018,
"y": 20,
"color": '#ff910c',
"drilldown": 'Year5',
"date": 2018-09-10
},
{
"name": 2017,
"y": 40,
"color": '#ff910c',
"drilldown": 'Year4',
"date": 2018-09-10
},
{
"name": 2016,
"y": 50,
"color": '#ff910c',
"drilldown": 'Year3',
"date": 2018-09-10
},
{
"name": 2015,
"y": 30,
"color": '#ff910c',
"drilldown": 'Year2',
"date": 2018-09-10
},
{
"name": 2014,
"y": 20,
"color": '#ff910c',
"drilldown": 'Year1',
"date": 2018-09-10
},
{
"name": 2013,
"y": 20,
"color": '#ff910c',
"drilldown": 'Year0',
"date": 2018-09-10
}
]
},
{
"name": "Sri Lanka",
"colorByPoint": true,
"data": [
{
"name": 2018,
"y": 30,
"color": '#ff910c',
"drilldown": 'Year5',
"date": 2018-09-10
},
{
"name": 2017,
"y": 40,
"color": '#ff910c',
"drilldown": 'Year4',
"date": 2018-09-10
},
{
"name": 2016,
"y": 20,
"color": '#ff910c',
"drilldown": 'Year3',
"date": 2018-09-10
},
{
"name": 2015,
"y": 20,
"color": '#ff910c',
"drilldown": 'Year2',
"date": 2018-09-10
},
{
"name": 2014,
"y":50,
"color": '#ff910c',
"drilldown": 'Year1',
"date": 2018-09-10
},
{
"name": 2013,
"y": 60,
"color": '#ff910c',
"drilldown": 'Year0',
"date": 2018-09-10
}
]
},
{
"name": "America",
"colorByPoint": true,
"data": [
{
"name": 2018,
"y": 20,
"color": '#ff910c',
"drilldown": 'Year5',
"date": 2018-09-10
},
{
"name": 2017,
"y": 40,
"color": '#ff910c',
"drilldown": 'Year4',
"date": 2018-09-10
},
{
"name": 2016,
"y": 60,
"color": '#ff910c',
"drilldown": 'Year3',
"date": 2018-09-10
},
{
"name": 2015,
"y": 30,
"color": '#ff910c',
"drilldown": 'Year2',
"date": 2018-09-10
},
{
"name": 2014,
"y":50,
"color": '#ff910c',
"drilldown": 'Year1',
"date": 2018-09-10
},
{
"name": 2013,
"y": 60,
"color": '#ff910c',
"drilldown": 'Year0',
"date": 2018-09-10
}
]
},
{
"name": "UK",
"colorByPoint": true,
"data": [
{
"name": 2018,
"y": 10,
"color": '#ff910c',
"drilldown": 'Year5',
"date": 2018-09-10
},
{
"name": 2017,
"y": 50,
"color": '#ff910c',
"drilldown": 'Year4',
"date": 2018-09-10
},
{
"name": 2016,
"y": 60,
"color": '#ff910c',
"drilldown": 'Year3',
"date": 2018-09-10
},
{
"name": 2015,
"y": 20,
"color": '#ff910c',
"drilldown": 'Year2',
"date": 2018-09-10
},
{
"name": 2014,
"y":80,
"color": '#ff910c',
"drilldown": 'Year1',
"date": 2018-09-10
},
{
"name": 2013,
"y": 60,
"color": '#ff910c',
"drilldown": 'Year0',
"date": 2018-09-10
}
]
}
],
"drilldown": {
activeAxisLabelStyle: {
textDecoration: 'none',
},
activeDataLabelStyle: {
textDecoration: 'none',
},
drillUpButton: {
relativeTo: 'spacingBox',
position: {
x: -30,
y: 0
},
theme: {
fill: 'white',
'stroke-width': 1,
stroke: 'silver',
r: 0,
states: {
hover: {
fill: '#a4edba'
},
select: {
stroke: '#039',
fill: '#a4edba'
}
}
}
},
"series": [
{
"name": 'Sales by Location',
"id": 'Year0',
"data": [
{
"name": "Adelaide",
"y": 3,
"date": 2018-09-10,
"drilldown": true,
"year": 2018
},
{
"name": "Canberra",
"y": 5,
"date": 2018-08-31,
"drilldown": true,
"year": 2018
},
{
"name": "Hobart",
"y": 2,
"date": 2018-07-10,
"drilldown": true,
"year": 2018
},
{
"name": "Sydney",
"y": 5,
"date": 2018-06-30,
"drilldown": true,
"year": 2018
},
]
}
]
}
});
#container {
min-width: 310px;
max-width: 800px;
height: 400px;
margin: 0 auto
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div id="container-main-bar"></div>
As it is a line graph there should be lines connecting each series. But in my graph I don't see those lines connecting the dots. Is there any other thing that we need to do to get the lines in the graph.

Your problem is caused by colorByPoint property, you should not use this option in line series.
Highcharts.chart('container', {
chart: {
type: 'line',
events: {
drilldown: function(e) {
},
drillup: function(e) {
}
},
},
exporting: {
enabled: true
},
title: {
text: 'Car Sales'
},
xAxis: {
type: 'category'
},
yAxis: {
title: {
text: 'Sales'
},
allowDecimals: false
},
legend: {
enabled: true
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '{point.y}'
},
},
},
tooltip: {
headerFormat: '<span style="font-size:11px">Sales as at</span><br>',
pointFormat: '<span style="color:{point.color}">{point.date}</span>: <b>{point.y}</b> <br/>'
},
"series": [{
"name": "Australia",
//"colorByPoint": true,
"data": [{
"name": 2018,
"y": 20,
"color": '#ff910c',
"drilldown": 'Year5',
"date": 2018 - 09 - 10
},
{
"name": 2017,
"y": 40,
"color": '#ff910c',
"drilldown": 'Year4',
"date": 2018 - 09 - 10
},
{
"name": 2016,
"y": 50,
"color": '#ff910c',
"drilldown": 'Year3',
"date": 2018 - 09 - 10
},
{
"name": 2015,
"y": 30,
"color": '#ff910c',
"drilldown": 'Year2',
"date": 2018 - 09 - 10
},
{
"name": 2014,
"y": 20,
"color": '#ff910c',
"drilldown": 'Year1',
"date": 2018 - 09 - 10
},
{
"name": 2013,
"y": 20,
"color": '#ff910c',
"drilldown": 'Year0',
"date": 2018 - 09 - 10
}
]
},
{
"name": "Sri Lanka",
//"colorByPoint": true,
"data": [{
"name": 2018,
"y": 30,
"color": '#ff910c',
"drilldown": 'Year5',
"date": 2018 - 09 - 10
},
{
"name": 2017,
"y": 40,
"color": '#ff910c',
"drilldown": 'Year4',
"date": 2018 - 09 - 10
},
{
"name": 2016,
"y": 20,
"color": '#ff910c',
"drilldown": 'Year3',
"date": 2018 - 09 - 10
},
{
"name": 2015,
"y": 20,
"color": '#ff910c',
"drilldown": 'Year2',
"date": 2018 - 09 - 10
},
{
"name": 2014,
"y": 50,
"color": '#ff910c',
"drilldown": 'Year1',
"date": 2018 - 09 - 10
},
{
"name": 2013,
"y": 60,
"color": '#ff910c',
"drilldown": 'Year0',
"date": 2018 - 09 - 10
}
]
},
{
"name": "America",
//"colorByPoint": true,
"data": [{
"name": 2018,
"y": 20,
"color": '#ff910c',
"drilldown": 'Year5',
"date": 2018 - 09 - 10
},
{
"name": 2017,
"y": 40,
"color": '#ff910c',
"drilldown": 'Year4',
"date": 2018 - 09 - 10
},
{
"name": 2016,
"y": 60,
"color": '#ff910c',
"drilldown": 'Year3',
"date": 2018 - 09 - 10
},
{
"name": 2015,
"y": 30,
"color": '#ff910c',
"drilldown": 'Year2',
"date": 2018 - 09 - 10
},
{
"name": 2014,
"y": 50,
"color": '#ff910c',
"drilldown": 'Year1',
"date": 2018 - 09 - 10
},
{
"name": 2013,
"y": 60,
"color": '#ff910c',
"drilldown": 'Year0',
"date": 2018 - 09 - 10
}
]
},
{
"name": "UK",
//"colorByPoint": true,
"data": [{
"name": 2018,
"y": 10,
"color": '#ff910c',
"drilldown": 'Year5',
"date": 2018 - 09 - 10
},
{
"name": 2017,
"y": 50,
"color": '#ff910c',
"drilldown": 'Year4',
"date": 2018 - 09 - 10
},
{
"name": 2016,
"y": 60,
"color": '#ff910c',
"drilldown": 'Year3',
"date": 2018 - 09 - 10
},
{
"name": 2015,
"y": 20,
"color": '#ff910c',
"drilldown": 'Year2',
"date": 2018 - 09 - 10
},
{
"name": 2014,
"y": 80,
"color": '#ff910c',
"drilldown": 'Year1',
"date": 2018 - 09 - 10
},
{
"name": 2013,
"y": 60,
"color": '#ff910c',
"drilldown": 'Year0',
"date": 2018 - 09 - 10
}
]
}
],
"drilldown": {
activeAxisLabelStyle: {
textDecoration: 'none',
},
activeDataLabelStyle: {
textDecoration: 'none',
},
drillUpButton: {
relativeTo: 'spacingBox',
position: {
x: -30,
y: 0
},
theme: {
fill: 'white',
'stroke-width': 1,
stroke: 'silver',
r: 0,
states: {
hover: {
fill: '#a4edba'
},
select: {
stroke: '#039',
fill: '#a4edba'
}
}
}
},
"series": [{
"name": 'Sales by Location',
"id": 'Year0',
"data": [{
"name": "Adelaide",
"y": 3,
"date": 2018 - 09 - 10,
"drilldown": true,
"year": 2018
},
{
"name": "Canberra",
"y": 5,
"date": 2018 - 08 - 31,
"drilldown": true,
"year": 2018
},
{
"name": "Hobart",
"y": 2,
"date": 2018 - 07 - 10,
"drilldown": true,
"year": 2018
},
{
"name": "Sydney",
"y": 5,
"date": 2018 - 06 - 30,
"drilldown": true,
"year": 2018
},
]
}]
}
});
Live demo: http://jsfiddle.net/BlackLabel/gtcod176/

Set bulletBorderColor to lineColor by default in amCharts

According to the amCharts documentation, if bulletBorderColor isn't set, it will default to lineColor. This doesn't seem to be working. I am building a theme for my team to use so they don't have to worry about setting colors every time they generate a chart. Does anyone have a workaround, or solution for this?
CodePen:
http://codepen.io/anon/pen/MwByvL
Code:
AmCharts.makeChart("line-chart-fw", {
"type": "serial",
"theme": "sailthru",
"marginTop": 0,
"marginRight": 0,
"marginLeft": 0,
"marginBottom": 0,
"responsive": {
"enabled": true
},
"pathToImages": "js/amcharts/images/",
"graphs": [{
"title": "Yesterday",
"id": "g2",
"balloonText": "",
"type": "smoothedLine",
"valueField": "value2"
}, {
"title": "Today",
"id": "g1",
"balloonText": "<b>[[category]]</b><br><span style='font-size:11px;'>Today: [[value]]</span><br><span style='font-size:11px;'>Yesterday: [[value2]]</span>",
"type": "smoothedLine",
"valueField": "value"
}],
"chartCursor": {
"valueLineEnabled": false,
"valueLineBalloonEnabled": false,
"valueLineAlpha": 0.5,
"fullWidth": true,
"categoryBalloonEnabled": false
},
"legend": {
"marginLeft": 0,
"marginRight": 0,
"marginTop": 0,
"marginBottom": 0,
"width": 140,
"labelText": "[[title]]",
"valueText": "",
},
"categoryField": "year",
"categoryAxis": {
"parseDates": false,
"minorGridAlpha": 0.1,
"labelsEnabled": true,
"inside": false,
},
"dataProvider": [{
"year": "12 AM",
"value": 5,
"value2": 10
}, {
"year": "1 AM",
"value": 10,
"value2": 5
}, {
"year": "2 AM",
"value": 15,
"value2": 20
}, {
"year": "3 AM",
"value": 5,
"value2": 10
}, {
"year": "4 AM",
"value": 12,
"value2": 18
}, {
"year": "5 AM",
"value": 16,
"value2": 12
}, {
"year": "6 AM",
"value": 7,
"value2": 5
}, {
"year": "7 AM",
"value": 20,
"value2": 15
}, {
"year": "8 AM",
"value": 25,
"value2": 20
}, {
"year": "9 AM",
"value": 20,
"value2": 15
}, {
"year": "10 AM",
"value": 20,
"value2": 8
}, {
"year": "11 AM",
"value": 60,
"value2": 45
}, {
"year": "12 PM",
"value": 80,
"value2": 70
}, {
"year": "1 PM",
"value": 95,
"value2": 80
}, {
"year": "2 PM",
"value": 80,
"value2": 90
}, {
"year": "3 PM",
"value": 40,
"value2": 50
}, {
"year": "4 PM",
"value": 60,
"value2": 20
}, {
"year": "5 PM",
"value2": 35
}, {
"year": "6 PM",
"value2": 20
}, {
"year": "7 PM",
"value2": 10
}, {
"year": "8 PM",
"value2": 20
}, {
"year": "9 PM",
"value2": 5
}, {
"year": "10 PM",
"value2": 5
}, {
"year": "11 PM",
"value2": 10
}],
"valueAxes": [{
"axisAlpha": 0,
"position": "left",
"labelsEnabled": true,
"inside": true,
"ignoreAxisWidth": true,
"axisTitleOffset": 0,
"maximum": 100,
}]
});

The documentation might not be very straightforward. Technically bullet border will use line's color, but only if you do not override the bullet color with bulletColor, which you seem to be doing.
To work around that use useLineColorForBulletBorder. (set it to true)
So the relevant part of your theme file should look like this:
AmGraph: {
lineAlpha: 1,
bulletBorderAlpha: 1,
bulletColor: "#ffffff",
lineThickness: 1.5,
fillAlphas: 0.05,
bulletSize: 6,
bulletBorderThickness: 1.5,
bulletColor: "#ffffff",
bulletBorderAlpha: 1,
bullet: "round",
minorGridEnabled: false,
useLineColorForBulletBorder: true
}
P.S. I noticed you have a lot of trailing commas in your theme file (a comma after the last property in the object). While modern browsers can handle it, some older ones will fail with a syntax error. You might want to get that fixed.

Need help understanding why I'm required to use JSON.parse()

I have an assignment for my current web development course, my issue is that I cannot see why I need to use JSON.parse() (it's a requirement though). I can guess where it would be used but with experimentation have not managed to render any results.
The general idea is we are drawing information from a JSON array in a separate file (on the same server obviously). This is done through a function contained in an ajax.js file written by the lecturer which is relatively straight forward as follows:
function getJSON(url, callbackFunction) {
//var request = new XMLHttpRequest();
var request = new XMLHttpRequest();
// Work around for browser caching problem that affects some browsers. It prevents
// the browser from using a cached copy that was stored by the browser from another visit.
if (url.indexOf('?') < 0) {
today = new Date();// Add a unique query string to the end of the url
// representing the current time to force the browser to fetch the data
// rather than using a locally cached copy that the browser fetched some earlier time.
url += '?' + today.getTime();
}
request.onreadystatechange = function (){
if (request.readyState === 4 && request.status===200) {
alert("Response Status = " + request.status); // You can safely comment out this line
alert("response = " + request.response); // You can safely comment out this line
alert("response headers = " + request.getAllResponseHeaders()); // You can safely comment out this line
callbackFunction(request.response);
}
};
try {
request.open("POST", url);
request.responseType ="json";
request.send();
}
catch ( exception ) {
alert(exception);
}
}
It uses an XMLHTTPRequest function.
The callback function in this case is as follows at present:
function displayAllGames(results) {
alert('ready to start work');
var gamesArray = results.games;
var myHTML = '<table id="table1" border="1">';
for (var counter = 0; counter < gamesArray.length; counter++) {
var game = gamesArray[counter];
var venue = game.venue;
var round = game.round;
var date = new Date(game.date);
var homeTeam = game.homeTeam.name;
var awayTeam = game.awayTeam.name;
myHTML += '<tr>';
myHTML += '<td>' + round + '</td>';
myHTML += '<td>' + venue + '</td>';
myHTML += '<td>' + date.toLocaleDateString() + '</td>';
myHTML += '<td>' + homeTeam + '</td>';
myHTML += '<td>' + awayTeam + '</td>';
myHTML += '</tr>';
}
myHTML += '</table>';
var targetElement = document.getElementById('happyPlace');
targetElement.innerHTML = myHTML;
}
When adding code for a JSON.parse() even as an extra at the end of the document nothing happens. The code as follows:
var parsedData = JSON.parse(gamesArray);
alert(parsedData[1]);
However no alert comes up and even when trying to write the single item to the end of the document with document.write nothing occurs. Can someone please explain what I'm doing wrong? It's driving me nuts.
JSON Content:
{
"games": [
{
"round": 1,
"date": "Fri, 3 Apr 2015 14:20:00",
"venue": "Maryborough",
"homeTeam":
{
"name": "Maryborough",
"goals": 11,
"points": 9
},
"awayTeam":
{
"name": "Castlemaine",
"goals": 24,
"points": 10
}
},
{
"round": 1,
"date": "Fri, 3 Apr 2015 14:20:00",
"venue": "Eaglehawk",
"homeTeam":
{
"name": "Eaglehawk",
"goals": 18,
"points": 19
},
"awayTeam":
{
"name": "South Bendigo",
"goals": 3,
"points": 7
}
},
{
"round": 1,
"date": "Fri, 3 Apr 2015 14:20:00",
"venue": "Gisborne",
"homeTeam":
{
"name": "Gisborne",
"goals": 10,
"points": 5
},
"awayTeam":
{
"name": "Kyneton",
"goals": 19,
"points": 11
}
},
{
"round": 1,
"date": "Fri, 3 Apr 2015 14:20:00",
"venue": "Golden Square",
"homeTeam":
{
"name": "Golden Square",
"goals": 16,
"points": 10
},
"awayTeam":
{
"name": "Kangaroo Flat",
"goals": 9,
"points": 10
}
},
{
"round": 1,
"date": "Fri, 3 Apr 2015 17:30:00",
"venue": "Queen Elizabeth Oval",
"homeTeam":
{
"name": "Sandhurst",
"goals": 10,
"points": 9
},
"awayTeam":
{
"name": "Strathfieldsaye",
"goals": 11,
"points": 16
}
},
{
"round": 2,
"date": "Sat, 11 Apr 2015 14:20:00",
"venue": "Gisborne",
"homeTeam":
{
"name": "Gisborne",
"goals": 25,
"points": 22
},
"awayTeam":
{
"name": "Maryborough",
"goals": 7,
"points": 3
}
},
{
"round": 2,
"date": "Sat, 11 Apr 2015 14:20:00",
"venue": "Kennington",
"homeTeam":
{
"name": "South Bendigo",
"goals": 10,
"points": 6
},
"awayTeam":
{
"name": "Golden Square",
"goals": 15,
"points": 18
}
},
{
"round": 2,
"date": "Sat, 11 Apr 2015 14:20:00",
"venue": "Kyneton",
"homeTeam":
{
"name": "Kyneton",
"goals": 15,
"points": 11
},
"awayTeam":
{
"name": "Sandhurst",
"goals": 22,
"points": 30
}
},
{
"round": 2,
"date": "Sat, 11 Apr 2015 17:30:00",
"venue": "Kangaroo Flat",
"homeTeam":
{
"name": "Kangaroo Flat",
"goals": 12,
"points": 12
},
"awayTeam":
{
"name": "Castlemaine",
"goals": 11,
"points": 10
}
},
{
"round": 2,
"date": "Sun, 12 Apr 2015 14:20:00",
"venue": "Strathfieldsaye",
"homeTeam":
{
"name": "Strathfieldsaye",
"goals": 16,
"points": 16
},
"awayTeam":
{
"name": "Eaglehawk",
"goals": 11,
"points": 7
}
},
{
"round": 3,
"date": "Sat, 18 Apr 2015 14:20:00",
"venue": "Maryborough",
"homeTeam":
{
"name": "Maryborough",
"goals": 12,
"points": 14
},
"awayTeam":
{
"name": "Kangaroo Flat",
"goals": 14,
"points": 13
}
},
{
"round": 3,
"date": "Sat, 18 Apr 2015 14:20:00",
"venue": "Castlemaine",
"homeTeam":
{
"name": "Castlemaine",
"goals": 12,
"points": 13
},
"awayTeam":
{
"name": "Gisborne",
"goals": 10,
"points": 10
}
},
{
"round": 3,
"date": "Sat, 18 Apr 2015 14:20:00",
"venue": "Eaglehawk",
"homeTeam":
{
"name": "Eaglehawk",
"goals": 20,
"points": 21
},
"awayTeam":
{
"name": "Kyneton",
"goals": 10,
"points": 8
}
},
{
"round": 3,
"date": "Sat, 18 Apr 2015 14:20:00",
"venue": "Golden Square",
"homeTeam":
{
"name": "Golden Square",
"goals": 6,
"points": 8
},
"awayTeam":
{
"name": "Strathfieldsaye",
"goals": 13,
"points": 13
}
},
{
"round": 3,
"date": "Sat, 18 Apr 2015 14:20:00",
"venue": "Queen Elizabeth Oval",
"homeTeam":
{
"name": "Sandhurst",
"goals": 20,
"points": 17
},
"awayTeam":
{
"name": "South Bendigo",
"goals": 8,
"points": 3
}
},
{
"round": 4,
"date": "Sat, 25 Apr 2015 14:20:00",
"venue": "Maryborough",
"homeTeam":
{
"name": "Maryborough",
"goals": 9,
"points": 4
},
"awayTeam":
{
"name": "Sandhurst",
"goals": 25,
"points": 26
}
},
{
"round": 4,
"date": "Sat, 25 Apr 2015 14:20:00",
"venue": "Eaglehawk",
"homeTeam":
{
"name": "Eaglehawk",
"goals": 26,
"points": 14
},
"awayTeam":
{
"name": "Kangaroo Flat",
"goals": 7,
"points": 3
}
},
{
"round": 4,
"date": "Sat, 25 Apr 2015 14:20:00",
"venue": "Strathfieldsaye",
"homeTeam":
{
"name": "Strathfieldsaye",
"goals": 10,
"points": 15
},
"awayTeam":
{
"name": "Castlemaine",
"goals": 3,
"points": 6
}
},
{
"round": 4,
"date": "Sat, 25 Apr 2015 14:20:00",
"venue": "Gisborne",
"homeTeam":
{
"name": "Gisborne",
"goals": 9,
"points": 13
},
"awayTeam":
{
"name": "Golden Square",
"goals": 11,
"points": 10
}
},
{
"round": 4,
"date": "Sat, 25 Apr 2015 17:30:00",
"venue": "Queen Elizabeth Oval",
"homeTeam":
{
"name": "South Bendigo",
"goals": 6,
"points": 11
},
"awayTeam":
{
"name": "Kyneton",
"goals": 10,
"points": 11
}
},
{
"round": 5,
"date": "Sat, 2 May 2015 14:20:00",
"venue": "Castlemaine",
"homeTeam":
{
"name": "Castlemaine",
"goals": 10,
"points": 8
},
"awayTeam":
{
"name": "Eaglehawk",
"goals": 9,
"points": 15
}
},
{
"round": 5,
"date": "Sat, 2 May 2015 14:20:00",
"venue": "Strathfieldsaye",
"homeTeam":
{
"name": "Strathfieldsaye",
"goals": 24,
"points": 24
},
"awayTeam":
{
"name": "Maryborough",
"goals": 5,
"points": 2
}
},
{
"round": 5,
"date": "Sat, 2 May 2015 14:20:00",
"venue": "Golden Square",
"homeTeam":
{
"name": "Golden Square",
"goals": 17,
"points": 10
},
"awayTeam":
{
"name": "Kyneton",
"goals": 7,
"points": 6
}
},
{
"round": 5,
"date": "Sat, 2 May 2015 14:20:00",
"venue": "Queen Elizabeth Oval",
"homeTeam":
{
"name": "South Bendigo",
"goals": 12,
"points": 19
},
"awayTeam":
{
"name": "Gisborne",
"goals": 4,
"points": 6
}
},
{
"round": 5,
"date": "Sat, 2 May 2015 17:30:00",
"venue": "Kangaroo Flat",
"homeTeam":
{
"name": "Kangaroo Flat",
"goals": 7,
"points": 8
},
"awayTeam":
{
"name": "Sandhurst",
"goals": 17,
"points": 24
}
},
{
"round": 6,
"date": "Sat, 9 May 2015 14:20:00",
"venue": "Maryborough",
"homeTeam":
{
"name": "Maryborough",
"goals": 6,
"points": 6
},
"awayTeam":
{
"name": "Golden Square",
"goals": 27,
"points": 26
}
},
{
"round": 6,
"date": "Sat, 9 May 2015 14:20:00",
"venue": "Kangaroo Flat",
"homeTeam":
{
"name": "Kangaroo Flat",
"goals": 11,
"points": 9
},
"awayTeam":
{
"name": "South Bendigo",
"goals": 8,
"points": 11
}
},
{
"round": 6,
"date": "Sat, 9 May 2015 14:20:00",
"venue": "Gisborne",
"homeTeam":
{
"name": "Gisborne",
"goals": 9,
"points": 4
},
"awayTeam":
{
"name": "Eaglehawk",
"goals": 19,
"points": 17
}
},
{
"round": 6,
"date": "Sat, 9 May 2015 14:20:00",
"venue": "Kyneton",
"homeTeam":
{
"name": "Kyneton",
"goals": 5,
"points": 8
},
"awayTeam":
{
"name": "Strathfieldsaye",
"goals": 20,
"points": 18
}
},
{
"round": 6,
"date": "Sun, 10 May 2015 14:20:00",
"venue": "Queen Elizabeth Oval",
"homeTeam":
{
"name": "Sandhurst",
"goals": 16,
"points": 17
},
"awayTeam":
{
"name": "Castlemaine",
"goals": 3,
"points": 7
}
},
{
"round": 7,
"date": "Sat, 16 May 2015 14:20:00",
"venue": "Kangaroo Flat",
"homeTeam":
{
"name": "Kangaroo Flat",
"goals": 9,
"points": 12
},
"awayTeam":
{
"name": "Strathfieldsaye",
"goals": 13,
"points": 11
}
},
{
"round": 7,
"date": "Sat, 16 May 2015 14:20:00",
"venue": "Castlemaine",
"homeTeam":
{
"name": "Castlemaine",
"goals": 18,
"points": 9
},
"awayTeam":
{
"name": "Kyneton",
"goals": 21,
"points": 13
}
},
{
"round": 7,
"date": "Sat, 16 May 2015 14:20:00",
"venue": "Eaglehawk",
"homeTeam":
{
"name": "Eaglehawk",
"goals": 8,
"points": 11
},
"awayTeam":
{
"name": "Golden Square",
"goals": 10,
"points": 14
}
},
{
"round": 7,
"date": "Sat, 16 May 2015 14:20:00",
"venue": "Gisborne",
"homeTeam":
{
"name": "Gisborne",
"goals": 1,
"points": 4
},
"awayTeam":
{
"name": "Sandhurst",
"goals": 17,
"points": 25
}
},
{
"round": 7,
"date": "Sat, 16 May 2015 14:20:00",
"venue": "Queen Elizabeth Oval",
"homeTeam":
{
"name": "South Bendigo",
"goals": 25,
"points": 18
},
"awayTeam":
{
"name": "Maryborough",
"goals": 5,
"points": 6
}
}
}

From what I can understand you should use JSON.parse if the results is not an object, but a string variable holding a valid JSON. This way you could use the Javacript object and do whatever you like.

flot x axis tick labels not aligned to stack bar chart on Change Data

I am working on stacked bar chart that is redrawn on click of a button.
I use the categories plugin to display textual values on the x axis
However when the bar chart is redrawn the labels are not sorted in order.
http://jsfiddle.net/mxvhp9uo/5/
var App = angular.module('App', []);
App.controller('Ctrl', function ($scope) {
var data2 = [{
"label": "Passed",
"color": "#27c24c",
"data": [
["Apr 01 2015", 21],
["Apr 02 2015", 20],
["Apr 06 2015", 23],
["Apr 07 2015", 55]
]
}, {
"label": "Failed",
"color": "#FFA500",
"data": [
["Apr 01 2015", 21],
["Apr 02 2015", 2],
["Apr 06 2015", 10],
["Apr 07 2015", 27]
]
}]
var data1 = [{
"label": "Passed",
"color": "#27c24c",
"data": [
["Apr 06 2015", 23],
["Apr 07 2015", 55],
]
}, {
"label": "Failed",
"color": "#FFA500",
"data": [
["Apr 06 2015", 10],
["Apr 07 2015", 27],
]
}];
var arr1 = {
"passdetails": [{
"test_id": 6,
"product": "Magento",
"suite_id": "3",
"suite_name": "Feature Tests",
"start_date": "Apr 06 2015",
"test_name": "Check Calculate and Compare Deal Percentage",
"totalpasses": 3,
"time_taken": 32767,
"browser_used": "chrome"
}, {
"test_id": 6,
"product": "Magento",
"suite_id": "3",
"suite_name": "Feature Tests",
"start_date": "Apr 07 2015",
"test_name": "Check Calculate and Compare Deal Percentage",
"totalpasses": 8,
"time_taken": 32767,
"browser_used": "chrome"
}],
"faildetails": [{
"test_id": 3,
"product": "Magento",
"suite_id": "3",
"suite_name": "Feature Tests",
"start_date": "Apr 06 2015",
"test_name": "Click Deal Buy Now Button and validate Cart",
"totalfails": 2,
"time_taken": 32767,
"browser_used": "chrome"
}, {
"test_id": 3,
"product": "Magento",
"suite_id": "3",
"suite_name": "Feature Tests",
"start_date": "Apr 07 2015",
"test_name": "Click Deal Buy Now Button and validate Cart",
"totalfails": 9,
"time_taken": 32767,
"browser_used": "chrome"
}]
}
var arr2 = {
"passdetails": [{
"test_id": 3,
"product": "Magento",
"suite_id": "3",
"suite_name": "Feature Tests",
"start_date": "Apr 01 2015",
"test_name": "Check Calculate and Compare Deal Percentage",
"totalpasses": 3,
"time_taken": 32767,
"browser_used": "chrome"
}, {
"test_id": 1,
"product": "Magento",
"suite_id": "3",
"suite_name": "Feature Tests",
"start_date": "Apr 02 2015",
"test_name": "Check Calculate and Compare Deal Percentage",
"totalpasses": 8,
"time_taken": 32767,
"browser_used": "chrome"
}],
"faildetails": [{
"test_id": 4,
"product": "Magento",
"suite_id": "3",
"suite_name": "Feature Tests",
"start_date": "Apr 01 2015",
"test_name": "Click Deal Buy Now Button and validate Cart",
"totalfails": 2,
"time_taken": 32767,
"browser_used": "chrome"
}, {
"test_id": 10,
"product": "Magento",
"suite_id": "3",
"suite_name": "Feature Tests",
"start_date": "Apr 02 2015",
"test_name": "Click Deal Buy Now Button and validate Cart",
"totalfails": 9,
"time_taken": 32767,
"browser_used": "chrome"
}]
}
$scope.data = data1
$scope.details = []
$scope.plotdate = null
$scope.arr = arr1;
$scope.redraw = function () {
$scope.data = data2
$scope.arr = arr2;
}
});
App.directive('chart', function () {
return {
restrict: 'EA',
link: function (scope, elem, attrs) {
var chart = null,
options = {
series: {
stack: true,
bars: {
show: true,
clickable: true,
barWidth: 0.1
}
},
axisLabels: {
show: true
},
xaxis: {
mode: "categories",
tickLength: 0
},
yaxis: {
axisLabel: 'Pass/Fail Count',
axisLabelUseCanvas: false,
axisLabelFontSizePixels: 12,
axisLabelPadding: 5
},
grid: {
hoverable: true,
clickable: true
}
}
var data = scope[attrs.ngModel];
var getKeyByValue = function (obj, value) {
for (var i in obj) {
if (obj.hasOwnProperty(i)) {
if (obj[i] === value) return i;
}
}
}
scope.$watch(attrs.ngModel, function (v) {
if (!chart) {
chart = $.plot(elem, v, options);
elem.show();
} else {
chart.setData(v);
chart.setupGrid();
chart.draw();
}
});
elem.bind("plotclick", function (event, pos, item) {
if (item) {
scope.show = false
console.log('ticks= ', item.series.xaxis.ticks)
console.log('Categories= ', item.series.xaxis.categories)
scope.plotdate = item.series.xaxis.ticks[item.dataIndex].label
scope.stats = item.series.label
switch (scope.stats) {
case 'Passed':
scope.details = scope.arr.passdetails;
break;
case 'Failed':
scope.details = scope.arr.faildetails;
break;
}
}
scope.$apply();
console.log('details= ', scope.details)
console.log('Plotdate= ', scope.plotdate)
console.log('Show= ', scope.show)
});
}
}
});
App.filter('getdata', function () {
return function (items, date) {
var arrayToReturn = [];
for (var i = 0; i < items.length; i++) {
if (items[i].start_date == date) {
arrayToReturn.push(items[i]);
}
}
return arrayToReturn;
};
});

There is a line in the categories plugin that does not allow the categories array to be recreated. Line 124 in https://github.com/EseMentie/flot/blob/master/jquery.flot.categories.js
if (!series[axis].categories) {-----}
I commented out the if condition and now the categories labels recompute everytime the chart data changes :)
See fiddle
http://jsfiddle.net/mxvhp9uo/8/

Apparently the chart.setupGrid() method does not recompute the category labels. There are 2 ways to fix this:
1) Define the categories in your plot options (see this fiddle):
xaxis: {
mode: "categories",
categories: ["Apr 01 2015","Apr 02 2015","Apr 06 2015","Apr 07 2015"],
tickLength: 0
},
2) Create a new plot everytime you change the data (see this fiddle):
scope.$watch(attrs.ngModel, function (v) {
chart = $.plot(elem, v, options);
elem.show();
});

JSON iterating through objects and accessing data result to cannot read property of undefined

I'm parsing a json from a website and trying to get some data from it. However, it is giving me undefined values when iterating through a collection of objects. If it's a badly formatted json, unfortunately, I can't change it.
[
{
"startYear": 2014,
"startMonth": 6,
"startDay": 31,
"endYear": 2014,
"endMonth": 7,
"endDay": 29,
"selectedDate": "2014_7_8",
"departureStation": "Manila",
"arrivalStation": "Boracay (Caticlan)",
"departureStationCode": "(MNL)",
"arrivalStationCode": "(MPH)",
"departureLabel": "DEPARTURE",
"arrivalLabel": "RETURN",
"dateMarketHash": {
"date_0_2014_6_31": {
"containerId": "date_0_2014_6_31",
"fromLabel": "From",
"currency": "PHP",
"price": null,
"formattedDate": "Thu, Jul 31, 2014",
"year": "2014",
"month": "6",
"day": "31",
"points": null,
"pointsSuffix": "",
"pointsLabelAppend": ""
},
"date_0_2014_7_1": {
"containerId": "date_0_2014_7_1",
"fromLabel": "From",
"currency": "PHP",
"price": 1929,
"formattedDate": "Fri, Aug 01, 2014",
"year": "2014",
"month": "7",
"day": "1",
"points": 0,
"pointsSuffix": "",
"pointsLabelAppend": ""
}
}
},
{
"startYear": 2014,
"startMonth": 7,
"startDay": 24,
"endYear": 2014,
"endMonth": 8,
"endDay": 23,
"selectedDate": "2014_8_8",
"departureStation": "Boracay (Caticlan)",
"arrivalStation": "Manila",
"departureStationCode": "(MPH)",
"arrivalStationCode": "(MNL)",
"departureLabel": "DEPARTURE",
"arrivalLabel": "RETURN",
"dateMarketHash": {
"date_1_2014_7_24": {
"containerId": "date_1_2014_7_24",
"fromLabel": "From",
"currency": "PHP",
"price": 3079,
"formattedDate": "Sun, Aug 24, 2014",
"year": "2014",
"month": "7",
"day": "24",
"points": 0,
"pointsSuffix": "",
"pointsLabelAppend": ""
},
"date_1_2014_7_25": {
"containerId": "date_1_2014_7_25",
"fromLabel": "From",
"currency": "PHP",
"price": 3079,
"formattedDate": "Mon, Aug 25, 2014",
"year": "2014",
"month": "7",
"day": "25",
"points": 0,
"pointsSuffix": "",
"pointsLabelAppend": ""
}
}
}
]
my code:
// Printing the value of 'day' from each 'dateMarketHash'
for (i = 0; i<json.length; i++)
{
var current = json[i].dateMarketHash;
for(var key in current){
if (current.hasOwnProperty(key)) {
document.write(current.key.day); // Cannot read property 'day' of undefined
}
}
}

No, it is the fact that you are reading "key" and not the variable. You need to use bracket notation, not dot notation.
document.write(current[key].day);
And you should not be using document.write.