I'm new to Highcharts JS.
I'm finding an issue in plotting "processed_json4".
All the other 4 plots (processed_json to processed_json3) appear on the graph. Any help would be much appreciated.
I have initialised 5 arrays and pushed the data received from JSON file into these arrays. The 5th plot however does not appear.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Highcharts data from JSON Response</title>
<style>
body{
margin-top: 30px;
margin-left:10px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript">
$(function () {
var processed_json = new Array(); //TS1
var processed_json1 = new Array(); //TS2
var processed_json2 = new Array(); //TS3
var processed_json3 = new Array(); //Processing Delay
var processed_json4 = new Array(); //Input-Output Delay
$.getJSON('http://localhost:8080/charts_demo/new4.json', function(data) {
// Populate series
for (i = 0; i < data.length; i++){
processed_json.push([data[i].timestamp1, data[i].val]);
processed_json1.push([data[i].timestamp2, data[i].val]);
processed_json2.push([data[i].timestamp3, data[i].val]);
processed_json3.push([((data[i].timestamp3)-(data[i].timestamp2)), data[i].val]);
processed_json4.push([((data[i].timestamp3)-(data[i].timestamp1)), data[i].val]);
}
// draw chart
$('#container').highcharts({
chart: {
type: "line"
},
title: {
text: "Streaming Flink Data"
},
xAxis: {
type: 'category',
allowDecimals: true,
title: {
text: "Timestamps"
}
},
yAxis: {
title: {
text: "Steps"
}
},
series: [{
name: 'Timestamp1',
data: processed_json
},
{
name: 'Timestamp2',
data: processed_json1
} ,
{
name: 'Timestamp3',
data: processed_json2,
},
{
name: 'Processing Delay',
data: processed_json3,
},
{
name: 'Input-Output Delay',
data: processed_json4,
}
]
});
});
});
</script>
</head>
<body>
<div style="width: 800px; margin: 2em auto; padding: 1em; border: 1px solid red; border-radius: 0.5em">
Highcharts data load from a JSON using manual JSON Processing
</div>
<div id="container" style="height: 400px"></div>
</body>
</html>
new4.json looks like this:
[
{
"temperSensorData": "26.183021749996204",
"temperSensorUnit": "celsius",
"timestamp": "1370718629809",
"timestamp2": "1272913900562",
"timestamp3": "1272914212663",
"val": 0
},
{
"temperSensorData": "26.183021749996204",
"temperSensorUnit": "celsius",
"timestamp": "1370718629809",
"timestamp2": "1272923870899",
"timestamp3": "1272923910916",
"val": 1
},
.
.
.,{}
]
Related
I am trying to plot a graph using chart.js where y-axis values are numbers and x-axis values are strings. I have given the code that i have written, but it does not plot the string values.
Appreciate your help.
window.onload = function() {
var dataPoints7 = [];
var chart7 = new CanvasJS.Chart("chartContainer7", {
animationEnabled: true,
theme: "light2",
title: {
text: "Cases in States"
},
axisY: {
title: "Cases",
titleFontSize: 24
},
data: [{
type: "line",
yValueFormatString: "#,### Cases",
dataPoints: dataPoints7
}]
});
fetch("https://api.covid19india.org/data.json", {
"method": "GET"
})
.then(function(response) {
return response.json();
})
.then(function(data) {
for (var i = 1; i < data.statewise.length; i++) {
dataPoints7.push({
x: data.statewise[i].state,
y: parseInt(data.statewise[i].confirmed)
});
}
chart7.render();
});
}
<!DOCTYPE html>
<html lang="en">
<div id="chartContainer7" style="height: 370px; width: 100%;"></div>
<script src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</html>
For your case you should supply label property not x value and also i believe you should use column charts for this purpose.
You might see some labels not showing up.You can either set the angle or increase the width of chart to make it visible.
Try running this snippet
window.onload = function() {
var dataPoints7 = [];
var chart7 = new CanvasJS.Chart("chartContainer7", {
animationEnabled: true,
theme: "light2",
title: {
text: "Cases in States"
},
axisY: {
title: "Cases",
titleFontSize: 24
},
axisX: {
labelAngle: 180
},
data: [{
type: "line",
yValueFormatString: "#,### Cases",
dataPoints: dataPoints7
}]
});
fetch("https://api.covid19india.org/data.json", {
"method": "GET"
})
.then(function(response) {
return response.json();
})
.then(function(data) {
for (var i = 1; i < data.statewise.length; i++) {
dataPoints7.push({
label: data.statewise[i].state,
y: parseInt(data.statewise[i].confirmed)
});
}
chart7.render();
});
}
<!DOCTYPE html>
<html lang="en">
<div id="chartContainer7" style="height: 370px; width: 100%;"></div>
<script src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</html>
With laravel i created Highcharts from consumed Rest API Link(Spring app) (http://85614a50.ngrok.io/api/devices) with 2 series(axes)
First series do a visualization of Memory in time so object contains(Memory usage, timestamp)
Second series do a visualization of CPU in time and object contains(CPU Usage,timestamp)
This all results are shown statically, now i want to visualise dynamically on charts.
I created a function which do a call of rest api within every 5 second, and event function inside Chart refreshing every 5 second.
It work but axes does not shows me a data from Series(it shows some random numbers because x and y variables are declare as current time and random numbers).
So i know that i must call a Series inside x,y variables.But didn't figure how. Did someone maybe know how to solve this problem ?
P.S.
In case you declare variables and chart(data) is not updated probably it will happen because i didn't turn on java client application so it showing just same data.I not able to keep application truned on because lack of memory on my harddisk. Only monitoring app is truned on so link is working!
My code Example: https://codepen.io/anon/pen/eLERGG (If you open this link it takes 5 seconds for charts to appear)
Home..blade.php
#extends('layouts.app')
#section('content')
<style type="text/css">
#container{
width: 100%;
margin: 0 auto;
}
.col-lg-4 {
margin-bottom: 10%;
min-width: 40%;
max-width: 100%;
margin: 1em auto;
height: 400px;
}
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 10%; /* Location of the box */
padding-right: 10%;
padding-left: 10%;
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
#container.modal{
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.5);
display:block;
}
</style>
<h2 class="text-center" >{{$user->first_name}} Charts </h2>
<div id="container">
<div class="row">
</div>
</div>
<script type="text/javascript">
$(function () {
setInterval(getHighChart, 10000); //30 seconds onload="getHighChart()"
});
function getHighChart() {
$.getJSON( "http://localhost:8000/api/devices", function( data ) {
console.log(data);
var mappedClientsAllias = _.map(_.uniqBy(data, "clientName"), "clientName");
var mappedClients = _.map(_.uniqBy(data, "Id_client"), "Id_client");
var clients = [];
_.forEach(mappedClients, function(Id_client, clientName) {
var tempClient = {
Allias: mappedClientsAllias[clientName],
name: Id_client,
data: [],
memory:[]
};
tempClient2=tempClient;
_.forEach(data, function(tempData) {
if (Id_client=== tempData.Id_client**strong text**) {
_.forEach(tempData.clientData, function(clientData) {
tempClient.data.push([
clientData.timestamp,
clientData.cpuUsage,
]);
tempClient.memory.push([
clientData.timestamp,
clientData.memoryUsage,
]);
});
}
});
clients.push(tempClient);
});
console.log("clients", clients);
var chart = _.forEach(clients, function(client) {
$('<div class="col-lg-4">')
.css("position", "relative")
.appendTo("#container")
.highcharts("StockChart", {
marker: {
states: {
enabled: true
}
},
time: {
timezoneOffset: -2 * 60
},
exporting: {
buttons: {
customButton3: {
text: 'Zooming',
//make fullscreen of chart with size change
onclick: function(e) {
var w = $(window).width();
var h = $(window).height();
$(e.target).closest('#container').toggleClass('modal');
if($(e.target).closest('#container').hasClass('modal')) {
$('.col-lg-4').hide();
$(e.target).closest('.col-lg-4').show();
$('.col-lg-4').css({
'width': w * .9,
'height': h * .9
});
} else {
$('.col-lg-4').show();
$('.col-lg-4').css({
'width': '',
'height': ''
});
}
$(e.target).closest('.col-lg-4').highcharts().reflow();
}
}
}
},
rangeSelector: {
y: 15,
buttons: [
{
count: 1,
type: "minute",
text: "Sec"
},
{
count: 1,
type: "hour",
text: "Min"
},
{
count: 1,
type: "day",
text: "Hours"
},
{
type: "all",
text: "All"
}
],
title: "hours",
inputEnabled: true,
_selected: 1
},
title: {
text: client.Allias
},
yAxis: [{
labels: {
enabled: true,
align: 'right',
x: -3
},
title: {
text: 'CPU'
},
height: '50%',
lineWidth: 2,
color: 'red'
}, {
labels: {
align: 'right',
x: -3
},
title: {
text: 'Memory'
},
top: '70%',
height: '50%',
offset: 0,
lineWidth: 2,
}],
xAxis: {
tickInterval: 1,
title: {
enabled: true,
text: "Client usage"
},
top: '20%',
type: "datetime",
dateTimeLabelFormats: {
second: "%H:%M:%S",
minute: "%H:%M",
hour: "%H:%M",
day: "%e. %b",
week: "%e. %b",
day: "%Y<br/>%b-%d"
}
},
plotOptions: {
series: {
marker: {
enabled: false,
}
}
},
series: [{
name: "Memory USAGE",
data: client.memory.sort()
}, // Add a new series
{
name: "Cpu USAGE",
yAxis: 1,
color: 'red',
data: client.data.sort()
}],
chart: {
renderTo: "container",
height:400,
events: {
load: function () {
// set up the updating of the chart each second
var series = this.series[0];
setInterval(function () {
var x = (new Date()).getTime(), // current time
y = Math.round(Math.random() * 100);
series.addPoint([x, y], false, true);
}, 1000);
}
}
},
});
});
});
}
</script>
#endsection
Layouts.app
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Master thesis application</title>
<!-- Jquery -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!-- Import css file-->
<link href="{{asset('css/style.css')}}" rel="stylesheet" type="text/css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.15.0/lodash.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous">
</script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.15.0/lodash.min.js"></script>
</head>
<script type="text/javascript">
</script>
<body>
#include('doc.header')
#include('doc.nav')
<script>
window.onscroll = function() {myFunction()};
var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
</script>
<div class="container">
#include('doc.ifno')
#yield('main')
</div> <!-- /container -->
#include('doc.Navfoot')
</body>
</html>
I'm trying to create column chart using data imported from csv file. I have tried every possible solution on the Internet but couldn't figure out the solution to my problem. I'm trying to show Shop Name on x-axis and Sales on y-axis.
Here is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<style>
body{
margin-top: 30px;
margin-left:40px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/data.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/4.3.5/papaparse.js"></script>
</head>
<body>
</div>
<div id="container" style="height: 400px"></div>
<script type="text/javascript">
$(function () {
$.get('stores.csv', function(csvdata) {
var data = Papa.parse(csvdata);
$('#container').highcharts({
chart: {
type: "column"
},
title: {
text: "Sales Analysis"
},
xAxis: {
ShopName: []
},
yAxis: {
title: {
text: "Sales"
}
},
data: {
csv: data
},
plotOptions: {
series: {
marker: {
enabled: false
}
}
}
});
});
});
</script>
</body>
</html>
csv file(stores.csv):
Longitude,Latitude,ShopName,ShopAddress,Sales
73.2350874,34.1990918,Abbotaqbad Civic Shopping Center,Mansehra Road Mandian,29719
74.3062887,31.5673136,Anarkali 1 9 - Babar Market,Anarkali,14212
74.3040372,31.5643123,Anarkali 263 - Babar Market,Anarkali,35928
74.4559979,31.5931715,Baghbanpura 239 - G T Road,Baghbanpura,49901
This is just to give you an example of how you can plot chart with Highchart while parsing .csv data. Code is simple and self explanatory.
<html>
<head>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<script type="text/javascript">
$.get('stores.csv', function(data) {
var lines = data.split('\n');
console.log(lines);
var shopNameData=[];
$.each(lines, function(lineNo, lineContent){
if(lineNo > 0)
{
shopNameData[lineNo-1] = lineContent.split(',')[2];
}
});
var salesData=[];
$.each(lines, function(lineNo, lineContent){
if(lineNo > 0)
{
salesData[lineNo-1] = parseFloat(lineContent.substring(lineContent.lastIndexOf(",")+1) );
}
});
console.log(shopNameData);
console.log(salesData);
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Sales Analysis'
},
subtitle: {
text: 'put subtitle here'
},
xAxis: {
categories: shopNameData,
crosshair: false
},
yAxis: {
min: 0,
title: {
text: 'Sales (in Rupees)'
}
},
tooltip: {
headerFormat: '<b>Shopname:</b> {point.x}<br/>',
pointFormat: '<b>{series.name}:</b> {point.y}<br/>'
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'Sales',
data: salesData
} ]
});
});
</script>
</body>
</html>
.csv file used is:
Longitude,Latitude, ShopName,ShopAddress,Sales
73.2350874,34.1990918,Abbotaqbad Civic Shopping Center,Mansehra Road Mandian,29719
74.3062887,31.5673136,Anarkali 1 9 - Babar Market,Anarkali,14212
74.3040372,31.5643123,Anarkali 263 - Babar Market,Anarkali,35928
74.4559979,31.5931715,Baghbanpura 239 - G T Road,Baghbanpura,49901
Points to be noted
Note that in .csv there are no space after comma, so .csv must follow that or you have to edit the logic to form shopNameData and salesData
Host both .html and .csv at one place in some server. Otherwise, in Google Chrome, you will get CrossOrigin error.
Here is the snapshot of Chart if you will copy the html and name the .csv as stores.csv in same directory of html and host in some server.
I am reading data and loading in two dimensional array using following code by initializing 2d array (series)
where series is structure like as follows (highchart series)
series: [{
name: ''
data: []
}]
Manual code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type='text/css'>
</style>
<script type='text/javascript'>
$(function () {
var options = {
chart :{
type: 'polygon',
renderTo: 'container',
},
title: {
text: 'Height vs Weight'
},
yAxis: {
title: false,
gridLineWidth:0,
lineWidth:0,
labels:{
enabled: false
}
},
series: [{},{}]
};
$.getJSON('data.json', function(data) {
options.series[0].data = data[0];
options.series[1].data = data[1];
var chart = new Highcharts.Chart(options);
})
});
</script>
</head>
<body>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
</body>
But i want to initialize dynamic array so that i can insert arrays(data[i]) dynamically.
data.json
[
[
[
153,
42
],
[
149,
46
],
[
149,
55
],
[
152,
60
]
],
[
[
253,
142
],
[
349,
146
],
[
349,
155
],
[
352,
160
]
]
]
dynamic code:
series: [[]]
$.getJSON('data.json', function(data) {
for (i=0; i<data.length(); i++) {
series[i].data = data[i];
}
})
above code does not seem to be working. Pls help me how can i solve my problem.
You need to use the push() function to append dynamically
EDIT with second array to get the required "data" structure
// initialize array
var series = [];
$.getJSON('data.json', function(data) {
var temparray = [];
for (i=0; i<data.length; i++) {
temparray["data"] = data[i];
series.push(temparray);
}
})
I've tried similar examples through stackoverflow as well as Highcharts Support, however still cannot get a graph to display properly. Trying to display a spline graph with data from a csv file with format hour,temperature as shown below in an example:
22,84
23,83
00,82
01,81
02,79
03,77
04,75
Here is the currently html/javascript I have:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="../../js/highcharts.js"></script>
<script src="../../js/modules/exporting.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var time = [];
var temp = [];
$.get('forecast.csv', function(data) {
var lines = data.split('\n');
$.each(lines, function(lineNo, line) {
var items = line.split(',');
time.push(parseInt(items[0]));
temp.push(parseInt(items[1]));
});
});
var options = {
chart: {
renderTo: 'container',
type: 'spline'
},
title: {
text: 'Temperature Forecast'
},
xAxis: {
title: {
text: 'Hour'
},
categories: time
},
yAxis: {
title: {
text: 'Temperature'
}
},
series: [{
data: temp
}]
};
var chart = new Highcharts.Chart(options);
});
</script>
</head>
<body>
<div id="container" style="width: 100%; height: 400px"></div>
</body>
My graph displays, however there is no data. Any ideas?
Thanks..
You need to add a two dimensional array as data. You can declare a global variable and add the data to that varible.
var chartData=[]
var dataTemp = new Array(parseInt(items[0]), parseInt(items[1]));
chartData.push(dataTemp);
and
series: [{
data: chartData
}]