I tried to plot JSON data using JSON data.JSFiddle
Below is my JSON data in JavaScript.
var JSON = [
{ name:"Maintenance",
data:[[2017-06-26,1.5],
[2017-07-03,5.2],
[2017-07-10,1.65],
[2017-07-17,2.5],
[2017-07-24,1.5]
]
},
{ name:"Others",
data:[[2017-06-26,1.5],
[2017-07-03,1.5],
[2017-07-10,1.5],
[2017-07-17,1.25],
[2017-07-24,1.5]
]
},
{ name:"Project",
data:[[2017-06-26,6.5],
[2017-07-03,6.1],
[2017-07-10,6.7],
[2017-07-17,7],
[2017-07-24,6.5]
]
},
{ name:"Training",
data:[[2017-06-26,0],
[2017-07-03,0.75],
[2017-07-10,1.9],
[2017-07-17,0.5],
[2017-07-24,1]
]
},
{ name:"Day-Off",
data:[[2017-06-26,0],
[2017-07-03,0],
[2017-07-10,0],
[2017-07-17,0],
[2017-07-24,1]
]
}]
However, the chart looks strange. For every series, there is an additional line connecting the start point and the end point. In addition, the x-axis value is not the date that I want.
//Draw chart
Highcharts.chart('trend_bl', {
title: {
text: 'Trend by Business Lines'
},
yAxis: {
title: {
text: ' Resource Allocation'
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
series : JSON,
});
Can anyone tell me why this would happen? In addition, I would also like to know the proper JSON data structure for line chart and pie chart in Highchart.
Your date in JSON should be string. This date should be converted to millisecond.
var JSON = [{
name: "Maintenance",
data: [
['2017-06-26', 1.5],
['2017-07-03', 5.2],
['2017-07-10', 1.65],
['2017-07-17', 2.5],
['2017-07-24', 1.5]
]
}, {
name: "Others",
data: [
['2017-06-26', 1.5],
['2017-07-03', 1.5],
['2017-07-10', 1.5],
['2017-07-17', 1.25],
['2017-07-24', 1.5]
]
}, {
name: "Project",
data: [
['2017-06-26', 6.5],
['2017-07-03', 6.1],
['2017-07-10', 6.7],
['2017-07-17', 7],
['2017-07-24', 6.5]
]
}, {
name: "Training",
data: [
['2017-06-26', 0],
['2017-07-03', 0.75],
['2017-07-10', 1.9],
['2017-07-17', 0.5],
['2017-07-24', 1]
]
}, {
name: "Day-Off",
data: [
['2017-06-26', 0],
['2017-07-03', 0],
['2017-07-10', 0],
['2017-07-17', 0],
['2017-07-24', 1]
]
}];
//updating jsons date to millisecond
Object.keys(JSON).map(function(key, index) {
JSON[key].data.map(function(value, keys, index) {
JSON[key].data[keys][0]=new Date(value[0]).getTime()
})
});
//console.log(JSON)
Fiddle Demo
First of all, you have made a mistake in your demo. Instead of data: JSON it should be series: JSON. Secondly, put your dates inside of strings, otherwise they will be treated as numbers (e.g. 2017 - 06 - 26 = 1985).
Example:
http://jsfiddle.net/3yumsp8m/
Related
I'm using Morris.js to display data in charts, Id like to show a bar for every option, even if its zero, currently I get this:
As you can see the values for 'HIV Instant' for age group 21-25 and 26-30 are 0, how would I show a line (just a thin one) for each result? is this possible with Morris? I've searched the docs for bar charts & searched google & SO but cant find anything? Any help is appreciated. Cheers
Here is the code for generating said chart:
// break up the object
var age_barParts = [];
$.each( results_by_age_chart, function(key , val){
age_barParts.push({
'test': key,
'u16': val['u16'],
'16-20': val['16-20'],
'21-25': val['21-25'],
'26-30': val['26-30'],
'31-49': val['31-49'],
'50+': val['50+']
});
});
//build the graph
var age_bar = Morris.Bar({
element: 'age_bar',
data: age_barParts,
xkey: ['test'],
ykeys: ['u16', '16-20', '21-25', '26-30', '31-49', '50+'],
labels: ["Under 16s", "16 to 20", "21 to 25", "26 to 30", "31 to 49", "Over 50s"],
barColors: color_array,
hideHover: 'auto',
resize: 'true',
gridTextSize: 16,
gridTextColor: '#5cb85c',
xLabelAngle: '70',
resize: true,
padding: 40
});
In Morris.js there is no option to force drawing of a line for zero values, but you can set them to a very low non-zero value, for example 0.05.
Below an example with Morris:
var age_barParts = [];
age_barParts.push({
'test': 'HIV',
'u16': 3,
'16-20': 5,
'21-25': 1,
'26-30': 2,
'31-49': 8,
'50+': 2
});
age_barParts.push({
'test': 'HIV Instant',
'u16': 1,
'16-20': 4,
'21-25': 0.05,
'26-30': 0.05,
'31-49': 7,
'50+': 3
});
var age_bar = Morris.Bar({
element: 'age_bar',
data: age_barParts,
xkey: ['test'],
ykeys: ['u16', '16-20', '21-25', '26-30', '31-49', '50+'],
labels: ["Under 16s", "16 to 20", "21 to 25", "26 to 30", "31 to 49", "Over 50s"],
hideHover: 'auto',
resize: 'true',
gridTextSize: 16,
gridTextColor: '#5cb85c',
xLabelAngle: '70',
resize: true,
padding: 40
});
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
<div id="age_bar" style="height: 450px;"></div>
As alternative you can adopt Highcharts which has a specific plotOption.
Below an example with Highcharts:
$(function () {
$('#age_bar').highcharts({
chart: {
type: 'column'
},
title: {
text: 'HIV stats'
},
xAxis: {
categories: ['HIV', 'HIV Instant']
},
yAxis: {
title: {
text: '#'
}
},
plotOptions: {
column: {
minPointLength: 3
}
},
colors: ["#0b62a4","#7a92a3","#4da74d","#afd8f8","#edc240","#cb4b4b","#9440ed"],
series: [{
name: 'u16',
data: [1, 0]
}, {
name: '16-20',
data: [5, 4]
}, {
name: '21-25',
data: [1, 0]
}, {
name: '26-30',
data: [2, 0]
}, {
name: '31-49',
data: [8, 7]
}, {
name: '50+',
data: [2, 3]
}],
});
});
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="//code.highcharts.com/highcharts.js"></script>
<div id="age_bar" style="height: 450px;"></div>
Update:
Here is a jsfiddle (for Morris) which modifies the hover legend replacing 0.05 with 0. You can improve this approach editing the hoverCallback function:
https://jsfiddle.net/beaver71/zm8wt4pj/
If you compile from coffee script files, just add after lastTop += size in morris.bar.coffee
if size == 0 then size = 1
Otherwise, if you just want to modify the javascript file, just add after lastTop += size; in morris.js
if (size === 0) { size = 1; }
in my nvd3 config json :
x: function(d){ return d.date; },
y: function(d){ return d.failed; },
and my JSON is,
vm.data7 = [{
values: [
{
'date' : '2016-04-01',
'fail': 2,
'success':5
},
{
'date' : '2016-04-02',
'fail': 2,
'success':5
}
]
}]
this code will show failed value by date, but i want to show 2 values in single graph (failed and success).
I move from nvd3-charts to n3-charts, and my problem is solve because my JSON structure supported nativelly in n3-charts documentation without pain to re-mapping my JSON. May, i can't solve in nvd3-charts but it can solve in n3-charts as i need, thanks :)
n3-charts data variable like :
{
dataset: "dataset",
key: 'fail',
type: ['line', 'dot', 'area'],
label: 'Two',
color: "rgb(200, 96, 69)",
interpolation: {mode: 'cardinal', tension: 0.7}
},
{
dataset: "dataset",
key: 'success',
type: ['line', 'dot', 'area'],
label: 'Three',
color: "rgb(119, 48, 131)",
interpolation: {mode: 'cardinal', tension: 0.7}
}
Please tell me what the problem is, constantly displays 01.01.xxxx, although in the tooltip correct date.
jsfiddle
$('#container').highcharts({
xAxis: {
type: 'datetime',
labels: {
formatter: function () {
return Highcharts.dateFormat('%d %m %Y', this.value);
}
},
},
series: [{
name: 'reg',
data: [[1392760800000, 60], [1420149600000, 3]] // 1392760800000 - 18.02.2014, 1420149600000 - 02.01.2015
}, {
name: 'app',
data: [[1392760800000, 0], [1420149600000, 0]]
}, {
name: 'dec',
data: [[1392760800000, 0], [1420149600000, 0]]
}, {
name: 'deac',
data: [[1392760800000, 60], [1420149600000, 3]]
}]
});
Axis labels are displayed not for columns but for beginning of years because of size of chart and scale of x axis.
You could fix that i.e. by setting positions for x axis ticks.
Example: http://jsfiddle.net/awhr7y74/2/
For this you can use tickPositions (used in example) or alternatively - tickPositioner.
See API for more information - http://api.highcharts.com/highcharts#xAxis.tickPositioner
Server is sending back data like this:
{"barData":
[
{"Accepted":[0,0,0]},
{"Rejected":[0,0,0]},
{"In_Process":[0,1,0]}]
}
In the browser, it shows up as such:
My perhaps (and very likely) incorrect belief was that this was the correct structure to populate a Highcharts stacked bar chart as seen here:
Example Stacked Bar in jsFiddle
The example in the documentation shows a fixed data set that appears like this:
series: [{
name: 'John',
data: [5, 3, 4, 7, 2]
}, {
name: 'Jane',
data: [2, 2, 3, 2, 1]
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5]
}]
This is what I was attempting to emulate. So, at the end of all that, I get a zero plot. My Javascript looks like this:
$.ajax({
url : 'http://localhost:8080/afta/report/transfersbynetwork',
success : function(point) {
data = [];
$.each(point.barData, function(itemNo, item) {
data.push([ item[0], parseInt(item[1][0]), parseInt(item[1][1]), parseInt(item[1][2])]);
});
barchart = new Highcharts.Chart(baroptions);
baroptions.series[0].data = data;
},
cache : false
});
So where did I bone this up? I'm getting no plot and am quite convinced the problem is either in my presentation of the data from the server (possible) or in the javascript that's parsing the data structure and loading the series (highly likely).
Any insight would be appreciated.
Based on your structure, you need to change your function to process the data:
$(function () {
var point = {
"barData": [{
"Accepted": [1, 2, 3]
}, {
"Rejected": [3, 4, 5]
}, {
"In_Process": [0, 1, 0]
}]
},
data = [];
$.each(point.barData, function (itemNo, item) {
for (var prop in item) {
data.push({
name: prop,
data: [parseInt(item[prop][0]), parseInt(item[prop][1]), parseInt(item[prop][2])]
});
}
});
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Stacked bar chart'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears']
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
}
},
legend: {
backgroundColor: '#FFFFFF',
reversed: true
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: data
});
});
http://jsfiddle.net/9jVJb/
I am attempting to use a different symbol for one of my data series on my flot graph as it is at a much larger scale then the rest of the data. I am using this example as reference: http://www.flotcharts.org/flot/examples/symbols/index.html
Here is what I have so far:
My includes:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.flot.js"></script>
<script type="text/javascript" src="jquery.flot.symbol.js"></script>
I then configure my flot options like so:
var options = {
grid: {hoverable : true},
xaxis: { mode: "time", timeformat: "%H:%M", tickLength: 1},
series: { points : { show: true } }
};
I then actually plot the data:
$.plot('#placeholder', [{
data: my_data,
lines: { show : true},
points: { symbol: "square"},
color: '#CB4B4B',
label: 'My Data'
}], options);
}
However, flot is still graphing the points as the default circle. I get no error messages in firebug and I have even tried adding a logging message in the jquery.flot.symbol.js library itself to see if the "square" handler is even being called like so:
var handlers = {
square: function (ctx, x, y, radius, shadow) {
console.log("Square handler was called");
// pi * r^2 = (2s)^2 => s = r * sqrt(pi)/2
var size = radius * Math.sqrt(Math.PI) / 2;
ctx.rect(x - size, y - size, size + size, size + size);
},
I am getting no console messages so I am assuming the handler is not getting called correctly. Am I missing something here?
EDIT:
Example of data I am trying to plot:
var d1 = [
[1364342400000, 208],
[1364346000000, 107],
[1364353200000, 42],
[1364371200000, 1680],
[1364360400000, 52],
[1364349600000, 67],
[1364385600000, 1118],
[1364367600000, 163],
[1364382000000, 1359],
[1364378400000, 1468],
[1364389200000, 1023],
[1364356800000, 63],
[1364374800000, 1601],
[1364392800000, 556],
[1364364000000, 84],
],
d2 = [
[1364342400000, 86],
[1364346000000, 42],
[1364353200000, 13],
[1364371200000, 458],
[1364360400000, 10],
[1364349600000, 22],
[1364385600000, 453],
[1364367600000, 45],
[1364382000000, 369],
[1364378400000, 379],
[1364389200000, 358],
[1364356800000, 17],
[1364374800000, 471],
[1364392800000, 147],
[1364364000000, 16],
],
d3 = [
[1364342400000, 7],
[1364346000000, 5],
[1364382000000, 11709],
[1364371200000, 58336],
[1364360400000, 1],
[1364349600000, 1],
[1364367600000, 2],
[1364389200000, 1191],
[1364378400000, 9085],
[1364385600000, 4688],
[1364374800000, 9386],
[1364392800000, 1140],
[1364364000000, 1],
];
I have also edited my options parameter and how the plot function is called:
var options = {
grid: {hoverable : true},
xaxis: { mode: "time", timeformat: "%H:%M", tickLength: 1}
};
$.plot("#placeholder", [{
data: d1,
lines: { show : true },
points: { show: true},
color: '#EDC240',
label: "d1"
}, {
data: d2,
lines: { show : true },
points: { show : true},
color: '#AFD8F8',
label: "d2"
}, {
data: d3,
yaxis: 2,
lines: { show : true},
points: { show: true, symbol: "square"},
color: '#CB4B4B',
label: "d3"
}], options);
I am also sure that the symbol library is being included because I have added some logging itself to the library and that is showing up fine.
I see no issue with what you've done. I made a quick working example here: http://jsfiddle.net/ryleyb/shLtU/1/
I would guess that you haven't included the symbol library (even though you say you have).
Or show your data, might somehow be an issue there (doubtful?).
This is the full flot code I ran to make a working example (plus including flot and the symbol library):
$.plot('#placeholder', [{
data: [
[1, 1],
[2, 3],
[4, 4],
[5, 9]
],
lines: {
show: true
},
points: {
show: true,
symbol: "square"
},
color: '#CB4B4B',
label: 'My Data'
}]);