I'm trying to populate a bar chart from an external JSON in a PHP file. I've trying to use AJAX and getJSON function to do this but still failed to generate a chart.
Here is how my JSON format look like:
[
{
"NAME": "a chart",
"VALUES": "[[439, 233, 233, 495],[292, 360, 262, 173],[222, 95, 27, 27]]"
}
]
Here is the javascript:
$(document).ready(function() {
urlDataJSON = 'data.php';
$.getJSON(urlDataJSON, function (data) {
console.log(data.output);
var dataLabels = ['base', 'key', 'pacing', 'emerging'];
var dataLines = json[0].VALUES;
var chartTitle = json[0].NAME;
$.jqplot('chart2', dataLines, {
legend: {
show: true
},
title: chartTitle,
seriesDefaults: {
renderer: $.jqplot.BarRenderer,
pointLabels: {
show: true,
location: 'e',
edgeTolerance: -15
},
shadowAngle: 135,
renderOptions: {
barDirection: 'horizontal'
}
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: dataLabels
}
}
});
});
Do you guys know what's wrong with my code above? If anything please let me know.
EDIT: Updated code
var urlDataJSON = 'data.php';
/* var json = [{
"Name": "Poll Results",
"Serie": [[2, 5, 4], [4, 1, 7], [6, 3, 1], [3, 4, 2]]}];*/
$.getJSON(urlDataJSON, function (data) {
console.log(data);
var tick = ['asd','fsdf','asda','fdsf',];
var dataLines = [];
var title = [];
$.each(data, function (entryindex, entry) {
dataLines.push(entry['VALUES']);
title.push(entry['NAME']);
});
var options = {
legend: {
show: true
},
title: 'Poll Results',
seriesDefaults: {
renderer: $.jqplot.BarRenderer,
pointLabels: {
show: true,
location: 'e',
edgeTolerance: -15
},
shadowAngle: 135,
renderOptions: {
barDirection: 'horizontal'
}
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: tick
}
}
};
var plot = $.jqplot('chart2', [dataLines], options);
});
I've put .each() function to push data into an array. Now, the graph is empty. Only the background is showing.
$(document).ready(function() {
$.getJSON('data.php', function (data) {
var tick = ['asd','fsdf','asda','fdsf'];
var options = {
legend: {
show: true
},
title: 'Poll Results',
seriesDefaults: {
renderer: $.jqplot.BarRenderer,
pointLabels: {
show: true,
location: 'e',
edgeTolerance: -15
},
shadowAngle: 135,
renderOptions: {
barDirection: 'horizontal'
}
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: tick
}
}
};
var plot = $.jqplot('chart2', data[0].VALUES, options);
});
});
Make sure to include these plugins
<script type="text/javascript" src="../src/plugins/jqplot.barRenderer.min.js"></script>
<script type="text/javascript" src="../src/plugins/jqplot.categoryAxisRenderer.min.js"></script>
<script type="text/javascript" src="../src/plugins/jqplot.pointLabels.min.js"></script>
This is my data.php
$arr = [
"NAME" => "a chart",
"VALUES" => [[439, 233, 233, 495],[292, 360, 262, 173],[222, 95, 27, 27]]
];
header('Content-Type: application/json');
print json_encode([$arr]);
Related
Using value, value_classification, and timestamp values in json data
I am trying to print as a solid gauge of Highcharts.
The values in series data are inserted as blank values.
What's the problem?
{
"name": "Fear and Greed Index",
"data": [
{
"value": "27",
"value_classification": "Fear",
"timestamp": "21-12-2021",
"time_until_update": "-1639979045"
}
],
"metadata": {
"error": null
}
}
Using that value,
I am trying to complete the solid gauge of Highcharts.
Highcharts Demos › Solid gauge
https://www.highcharts.com/demo/gauge-solid
The code I've tried so far is below.
HTML
<div id="container-speed" class="chart-container"></div>
JAVASCRIPT
$(function () {
var processedData = [];
$.getJSON("https://api.alternative.me/fng/?date_format=en", function (json) {
for (i = 1; i > json.length; i++){
processedData.push(json[i].value);
}
var gaugeOptions = {
chart: {
type: 'solidgauge'
},
title: null,
pane: {
center: ['50%', '85%'],
size: '140%',
startAngle: -90,
endAngle: 90,
background: {
backgroundColor:
Highcharts.defaultOptions.legend.backgroundColor || '#EEE',
innerRadius: '60%',
outerRadius: '100%',
shape: 'arc'
}
},
exporting: {
enabled: false
},
tooltip: {
enabled: false
},
// the value axis
yAxis: {
stops: [
[0.1, '#55BF3B'], // green
[0.5, '#DDDF0D'], // yellow
[0.9, '#DF5353'] // red
],
lineWidth: 0,
tickWidth: 0,
minorTickInterval: null,
tickAmount: 2,
title: {
y: -70
},
labels: {
y: 16
}
},
plotOptions: {
solidgauge: {
dataLabels: {
y: 5,
borderWidth: 0,
useHTML: true
}
}
}
};
// The speed gauge
var chartSpeed = Highcharts.chart('container-speed', Highcharts.merge(gaugeOptions, {
yAxis: {
min: 0,
max: 200,
title: {
text: 'test'
}
},
credits: {
enabled: false
},
series: [{
name: 'test',
data: processedData,
dataLabels: {
format:
'<div style="text-align:center">' +
'<span style="font-size:25px">{y}</span><br/>' +
'<span style="font-size:12px;opacity:0.4">km/h</span>' +
'</div>'
}
}]
}));
});
});
Hint: Check if processedData outputs something.
Mistake: Looping over json data is incorrect as the response is an object and not an array.
Create an IIFE and verify the first part then move ahead with chart creation.
eg.
$(function () {
var processedData = [];
$.getJSON("https://api.alternative.me/fng/?date_format=en", function (json) {
// wrong
for (i = 1; i > json.length; i++){
processedData.push(json[i].value);
}
});
console.log(processedData);
});
I reproduce your code and receive the data using this approach:
fetch("https://api.alternative.me/fng/?date_format=en")
.then(response => response.json())
.then(output => {
const chartData = output.data.map(d => parseFloat(d.value))
Demo: https://jsfiddle.net/BlackLabel/s1fczwj0/
I currently use a Flot chart which is supposed to render dynamically.
The code basically reiterates over all divs with the name "characterChart", and creates multiple Flot charts depending on the index.
This is the code basically:
<div id="salesSelectorItems" class="chart-data-selector-items mt-3">
#foreach($characters as $key=>$character)
<div class="chart chart-sm" data-sales-rel="{{ $character->id }}" id="flotDashSales_{{ $key }}" name="characterChart" class="chart-active" style="height: 203px;"></div>
#endforeach
<script>
var flotDashSalesData = [];
$(document).ready(function() {
$('div[name=characterChart]').each(function (index, value) {
flotDashSalesData[index] = [{
data: [
["Jan", 140],
["Feb", 240],
["Mar", 190],
["Apr", 140],
["May", 180],
["Jun", 320],
["Jul", 270],
["Aug", 180]
],
color: "#0088cc"
}];
});
});
</script>
</div>
Now, there is the code (in a separate included file) which includes all the data for the chart:
var flotDashSales = [];
$('div[name=characterChart]').each(function (index, value) {
console.log(index);
flotDashSales[index] = $.plot('#flotDashSales_' + index, flotDashSalesData[index], {
series: {
lines: {
show: true,
lineWidth: 2
},
points: {
show: true
},
shadowSize: 0
},
grid: {
hoverable: true,
clickable: true,
borderColor: 'rgba(0,0,0,0.1)',
borderWidth: 1,
labelMargin: 15,
backgroundColor: 'transparent'
},
yaxis: {
min: 0,
color: 'rgba(0,0,0,0.1)'
},
xaxis: {
mode: 'categories',
color: 'rgba(0,0,0,0)'
},
legend: {
show: false
},
tooltip: true,
tooltipOpts: {
content: '%x: %y',
shifts: {
x: -30,
y: 25
},
defaultTheme: false
}
});
});
As you can see, what I did to try and achieve this is created an array, reiterated over all the divs with the name characterChart and created multiple charts by the index.
However, it is still not working.
What am I doing wrong?
I have managed to resolve it by removing:
$(document).ready(function() {
I assume that it tried to initialize the components twice, resulting in the Flot not showing.
All,
I'm trying to allow for a user to click on a highchart between two data points and draw a line. The resulting line will calculate LARGESTVALUE-SMALLESTVALUE above the rendered line.
I'm attempting to use this example (http://jsfiddle.net/2MdEN/1/).
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'scatter',
margin: [70, 50, 60, 80],
events: {
click: function(e) {
// find the clicked values and the series
var x = e.xAxis[0].value,
y = e.yAxis[0].value,
series = this.series[0];
// Add it
series.addPoint([x, y]);
}
}
},
title: {
text: 'User supplied data'
},
subtitle: {
text: 'Click the plot area to add a point. Click a point to remove it.'
},
xAxis: {
minPadding: 0.2,
maxPadding: 0.2,
maxZoom: 60
},
yAxis: {
title: {
text: 'Value'
},
minPadding: 0.2,
maxPadding: 0.2,
maxZoom: 60,
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
plotOptions: {
series: {
lineWidth: 1,
point: {
events: {
'click': function() {
if (this.series.data.length > 1) this.remove();
}
}
}
}
},
series: [{
data: [[20, 20], [80, 80], null, [60, 40], [85, 60]]
}]
});
});
});
The problem is that is connects the last data point in the series to the newly added point. I'd like the points to be detached from the series to allow for lines being drawn above the generated chart.
Is there any way to accomplish this?
Thank you
You can include a second empty series in your chart config, and change which series you are adding a point to:
events: {
click: function(e) {
// find the clicked values and the series
var x = e.xAxis[0].value,
y = e.yAxis[0].value,
series = this.series[1]; <------------
// Add it
series.addPoint([x, y]);
}
}
You can also then move your point click event into the second series, if you don't want users to be able to remove points from the original data:
series: [{
data: [
[20, 20],
[80, 80], null, [60, 40],
[85, 60]
]
}, {
id: 'dummy',
color: 'rgba(204,0,0,0.9)',
point: {
events: {
'click': function() {
this.remove();
}
}
}
}]
Updated example:
http://jsfiddle.net/2MdEN/107/
I used the following
$(function () {
$('#container').highcharts({
chart: {
type: 'scatter',
margin: [70, 50, 60, 80],
events: {
click: function (e) {
var c = this.series[0].chart;
var s = this.series.length;
var x = e.xAxis[0].value;
var y = e.yAxis[0].value;
if(s == 1) {
c.addSeries('newSeries' + new Date());
c.series[1].addPoint([x, y]);
}else{
if(this.series[this.series.length-1].data.length%2 == 1) {
c.series[this.series.length-1].addPoint([x, y]);
}else{
c.addSeries('newSeries' + new Date());
c.series[this.series.length-1].addPoint([x, y]);
}
}
}
}
},
title: {
text: 'User supplied data!!!!'
},
subtitle: {
text: 'Click the plot area to add a point. Click a point to remove it.'
},
xAxis: {
gridLineWidth: 1,
minPadding: 0.2,
maxPadding: 0.2,
maxZoom: 60
},
yAxis: {
title: {
text: 'Value'
},
minPadding: 0.2,
maxPadding: 0.2,
maxZoom: 60,
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
plotOptions: {
series: {
lineWidth: 1,
point: {
events: {
'click': function () {
if (this.series.data.length > 1) {
this.remove();
}
}
}
}
}
},
series: [{
data: [[20, 20], [80, 80]]
}]
});
});
I am creating multi serial line chart using highchart.
My Json (cleanData) look like this...
[{
"key": "port_A",
"value": [
[1447596900000, 0],
[1447596960000, 0],
[1447597020000, 1]
]
}, {
"key": "port_B",
"value": [
[1447596900000, 0],
[1447596960000, 4]
]
} {
"key": "port_C",
"value": [
[1447596900000, 0],
[1447596960000, 0],
[1447597020000, 1]
}]
How can I map "key" as serial and "value" as data points on highchart
$(document).ready(function () {
Highcharts.setOptions({
colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4']
});
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'pie',
zoomType: 'y',
resetZoomButton: {
position: {
// align: 'right', // by default
// verticalAlign: 'top', // by default
x: 0,
y: -30
}
},
options3d: {
enabled: true,
alpha: 15,
beta: 15,
depth: 50
}
},
title: {
text: 'Users by region',
x: -20 //center
},
subtitle: {
text: '',
x: -20
},
xAxis: {
type: 'category',
//categories: ['APAC', 'test2', 'test3', 'test4'],
labels: {
rotation: -45,
style: {
'fontSize': '10px',
'fontFamily': 'Verdana, sans-serif',
'color': '#333',
'text-transform': 'uppercase',
'font-weight': '600'
}
}
},
yAxis: {
min: 0,
title: {
text: 'Number of users '
}
},
legend: {
enabled: false
},
tooltip: {
pointFormat: '#users: <b>{point.y:.1f}</b>'
},
credits: {
enabled: false
},
exporting: {
enabled: false
},
plotOptions: {
column: {
depth: 25
}
},
series: []
});
var cleanData1 = JSON.stringify(myArray);
var cleanData = $.parseJSON(cleanData1);
console.log(JSON.stringify(cleanData));
chart.series = cleanData;
});
You need to iterate over your json and put the name and data in an object as like below
var seriesData = [];
$.each(clearData, function(i,item){
seriesData.push({name:clearData[i].key,data:clearData[i].value});
console.log("seriesData"+JSON.stringify(seriesData));
});
See working fiddle here
Currently working with stack bar chart in jqplot. How to remove bar label, when bar size is smaller than label text?
Fiddle Link
$(document).ready(function(){
var yAxisLabels = ["Label1", "Label2", "Label3", "Label4"];
var legendValues = ["series1", "series2", "series3", "series4"];
var pLabels1 = ['70%','38%','71%','28%'];
var pLabels2 = ['27%','49%','27%','44%'];
var pLabels3 = ['2%','10%','2%','17%'];
var pLabels4 = ['1%','4%','1%','12%'];
var group4 = [52,528,129,264];
var group3 = [94,1388,394,401];
var group2 = [1446,7130,5591,1004];
var group1 = [3772,5512,14957,633];
var series = [
{ pointLabels: { labels: pLabels4 }},
{ pointLabels: { labels: pLabels3 }},
{ pointLabels: { labels: pLabels2 }},
{ pointLabels: { labels: pLabels1 } }];
var plot = $.jqplot('chart', [[[52,1],[528,2],[129,3],[264,4]], [[94,1],[1388,2],[394,3],[401,4]], [[1446,1],[7130,2],[5591,3],[1004,4]], [[3772,1],[5512,2],[14957,3],[633,4]]], {
stackSeries: true,
seriesDefaults: {
shadow: false,
renderer: $.jqplot.BarRenderer,
rendererOptions: { fillToZero: true, barDirection: 'horizontal', highlightMouseOver: true},
pointLabels: {
show: true, stackedValue: true, location: 'w', hideZeros: true
}
},
axes: {
xaxis: {
tickOptions: {
show: true,
mark: 'cross',
formatString: "%'d",
showGridline: true
},
min: null,
max: null,
showTickMarks: true
},
yaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: yAxisLabels
}
},
grid: {
gridLineColor: '#ffffff', /**/
borderColor: '#509790',
shadowWidth: 0,
borderWidth: 0,
background: 'rgba(0,0,0,0)',
shadow: false
},
series: series
});
});
In the above picture, last bar has value as 2% which is displaying outside the bar. How to remove these type of elements while displaying outside bar?
there is a specific property for adjusting what you need:
edgeTolerance
with which you can set the minimum pixels distance between label and bar margin.
For instance...
pointLabels: {
show: true,
stackedValue: true,
location: 'w',
hideZeros: true,
edgeTolerance: 10
}