Automatically Combine Values using Google Charts - javascript

I currently have a dataset called test.csv with the columns:
location time
It consists of a number of records, which may be for the same location. ie. there may be two records where the location is Paris but the time is different and I wish to add them and then plot them as one.
I wish to combine the values of time for all where the value of location is the same when plotting to a bar chart using Google Chart. Currently I have written this, but am unsure how to continue:
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<title>Google Graph and CSV</title>
<meta name="description" content="test">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="jquery.csv.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript"> // load the visualisation API
google.load('visualization', '1', { packages: ['corechart', 'controls'] });
</script>
<script type="text/javascript">
function drawVisualization() {
$.get("test.csv", function(csvString) {
var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar});
var data = new google.visualization.arrayToDataTable(arrayData);
var crt_ertdlyYY = new google.visualization.ChartWrapper({
chartType: 'BarChart',
containerId: 'crt_ertdlyYY',
dataTable: data,
options:{
title: 'Room Occupancy for',
titleTextStyle : {color: 'grey', fontSize: 16},
bar: {groupWidth: "95%"},
legend: { position: "none" },
width:400,
height:600,
}
});
crt_ertdlyYY.draw();
});
}
google.setOnLoadCallback(drawVisualization)
</script>
<div id="crt_ertdlyYY"></div>
This produces the following visualisation: Output of code

use the group() method to aggregate the total for each location
var aggData = google.visualization.data.group(
data,
[0],
[{
column: 1,
aggregation: google.visualization.data.sum,
type: 'number',
label: 'Total'
}]
);
then use the grouped data on the chart
var crt_ertdlyYY = new google.visualization.ChartWrapper({
chartType: 'BarChart',
containerId: 'crt_ertdlyYY',
dataTable: aggData, // <-- use agg data
options:{
title: 'Room Occupancy for',
titleTextStyle : {color: 'grey', fontSize: 16},
bar: {groupWidth: "95%"},
legend: { position: "none" },
width:400,
height:600,
}
});
EDIT
a modifier function can be used to combine locations with different cases
var aggData = google.visualization.data.group(
data,
[{
column: 0,
modifier: function (value) {
return value.toUpperCase();
},
type: 'string',
label: 'Location'
}],
[{
column: 1,
aggregation: google.visualization.data.sum,
type: 'number',
label: 'Total'
}]
);

Related

ApexCharts only shows 5 labels (type datetime)

I have a chart with one value per day. Somehow it only labels 5 days on the x-axis.
How can I make it label all the days between the set min and max date (as far as I know tickAmount does not work with type datetime)?
And how can I remove the offset on the x-axis so that the point for every day is directly above its label (See offset here)?
var options = {
series: [{
name: 'Series1',
data: [
5, 6, 5.5, 7, 1, 3, 4
]
}],
chart: {
height: 250,
type: 'area'
},
dataLabels: {
enabled: false
},
stroke: {
curve: 'smooth'
},
colors:['#000000'],
xaxis: {
type: 'datetime',
categories: [
'2022-07-20 00:00:00', '2022-07-21 00:00:00', '2022-07-22 00:00:00', '2022-07-23 00:00:00', '2022-07-24 00:00:00', '2022-07-25 00:00:00', '2022-07-26 00:00:00'
],
min: new Date("2022-07-20 00:00:00").getTime(),
max: new Date("2022-07-26 00:00:00").getTime(),
labels: {
formatter: function(val) {
return moment(new Date(val)).format("ddd");
},
style: {
colors: '#000000',
},
datetimeUTC: false, // Do not convert to UTC
},
},
yaxis: {
labels: {
style: {
colors: '#000000',
},
formatter: function (val) {
return val.toFixed(0)
},
},
tickAmount: 10,
min: 0,
max: 10
},
};
document.getElementById("chart").innerHTML = "";
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
<!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.0">
<title>Document</title>
</head>
<body>
<div id="chart"></div>
</body>
</html>
<script src="moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
Found a solution for the problems you mention, we removed the tags:
type inside xaxis
min and max
We add the tickAmount tag with value 6 (7 ticks 0-6).
Another problem detected has been the value of the labels since 5.5 rounded it to 6, so that it does not happen we add it inside the tooltip label
y: {
formatter: function (val) {
return val.toFixed(1);
}
}
I leave the solution in react below.
CodeSandbox solution
Result of the solution in photo

ApexCharts - Adding a number inside the "Simple Donut Chart"

I have been trying to add a number on the inside of the "Simple donut chart" from ApexCharts. This is the link to it - https://apexcharts.com/javascript-chart-demos/pie-charts/simple-donut/ .
To use the chart, I ran the command "npm install apexcharts --save" in my project terminal.
This is my HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./Chart.css">
<script src="./Chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
</head>
<div id="chart"></div>
<script>
const chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
</script>
</html>
This is my CSS file:
#chart{
width:400px;
height:400px;
margin-left: auto;
margin-right: auto;
}
This is what I used in my JavaScript file:
var options = {
series: [44, 55, 41, 60],
labels: ["Transport", "Shopping", "Energy use", "Food"],
chart: {
type: 'donut',
},
responsive: [{
breakpoint: 480,
options: {
chart: {
width: 200
},
legend: {
position: 'bottom'
}
}
}]
};
This is the result of the code mentioned above:
Current Chart
This is a model to show how I would like the number to be displayed:
Example Chart
I would like to know if its possible to add a number inside the current chart with ApexCharts as the example chart shows.
Yes it's possible.
let options = {
series: [44, 55, 41, 60],
labels: ["Transport", "Shopping", "Energy use", "Food"],
chart: {
type: 'donut',
},
plotOptions: {
pie: {
donut: {
labels: {
show: true,
total: {
show: true,
label: '',
formatter: () => 'Text you want'
}
}
}
}
}
};
const chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
<script src="https://cdn.jsdelivr.net/npm/apexcharts#3.18.1/dist/apexcharts.min.js"></script>
<div id="chart"></div>
You can show the following information inside a donut:
a value of an individual donut piece (on hover to that piece)
the total of all the donut pieces
custom text
Try to change values of the total object properties to better understanding what I mean. More detailed information is here

Highcharts series visibility with csv data source

I am new to programming language so please consider my poor knowledge. Basically i am trying to use Highcharts for my project which takes data from a csv data source.
please take a look at:
flood forcast data
The chart shows 10 days flood forcast for a particular place. I want to have the ability to disable a data series by default, so that when you click on its legend item it shows, instead of hides. This will give me the ability to put many series on one graph, only show the Important ones, while allowing users to show additional series if they need. as an example: on load it will have day1, day3 and day5 "visible: true" and rest "visible: false." hope i made it clear
here goes my code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<script type="text/javascript" src="//code.jquery.com/jquery-1.7.1.js"> </script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" />
<title>Flood Forecast</title>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script type="text/javascript" src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"></script>
<script type='text/javascript'>
$(document).ready(function() {
$.get('data.csv', function(csv) {
// Create the chart
window.chart = new Highcharts.StockChart({
chart: {
renderTo: 'container',
type:'spline'
},
rangeSelector: {
selected: 1,
inputDateFormat: '%Y-%m-%d'
},
title: {
text: 'Flood Forcast'
},
legend: {
enabled: true,
align: 'right',
verticalAlign: 'middle',
layout: 'vertical',
borderColor: 'black',
borderWidth: 0.5,
itemDistance: 0
},
// data
data: {
csv: csv
},
}, function(chart) {
// apply the date pickers
setTimeout(function() {
$('input.highcharts-range-selector', $('#' + chart.options.chart.renderTo)).datepicker()
}, 0)
});
});
// Set the datepicker's date format
$.datepicker.setDefaults({
dateFormat: 'yy-mm-dd',
onSelect: function(dateText) {
this.onchange();
this.onblur();
}
});
});
</script>
</head>
<body>
<div id="container" style="height: 600px; min-width: 600px"></div>
</body>
</html>
Thanks in advance.
You can do this with the visible property, just add to your options:
series: [{
visible: false
}, {
visible: true
}]
series represents your array of series, in this example has two series, the first hidden and the second visible. You can check this fiddle that uses data csv too:
http://jsfiddle.net/u4yaxk58/
Hope it helps!

Highcharts not displaying data but drawing chart when reading from CSV file

I have spent many hours learning JavaScript and HighCharts today. I am trying to get this chart to display. I managed to get the JSON to work but I would prefer to get the CSV to work as all of my files are in CSV. I have gone through the JavaScript debugger a lot and see that my data is saving correctly but yet the data does not draw. The axis and title do display. Attached is my code. Thanks in advance for help. For whatever reason, the JSFiddle doesn't work so feel free to look at what I mean at: www.teratuple.com/data/dataVolume.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>
</head>
<body>
<div id = "container" style = "width:100%; height:400px;"></div>
<script>
var seriesData = [];
var chart;
$(document).ready(function () {
var options = {
chart: {
renderTo: 'container'
},
rangeSelector: {
buttons: [{
type: 'hour',
count: 1,
text: '1h'
}, {
type: 'day',
count: 1,
text: '1d'
}, {
type: 'month',
count: 1,
text: '1m'
}, {
type: 'year',
count: 1,
text: '1y'
}, {
type: 'all',
text: 'All'
}],
selected: 1 // all
},
xAxis: {
title: {
text: 'Date'
}
},
yAxis: {
title: {
text: 'Volume (mm3)'
}
},
title: {
text: 'Volume Differential'
},
series: [{
data: [],
tooltip: {
pointFormat: '{series.name}: <b>{point.y}</b><br/>',
valueDecimals: 2
}
}]
};
$.get('www.teratuple.com/data/volumeData.csv', function (data) {
var lines = data.split('\n');
$.each(lines, function (lineNo, line) {
var items = line.split(',');
if (lineNo > 0) {
seriesData.push([parseInt(items[0]), parseFloat(items[1])]);
}
});
options.series.data = seriesData;
chart = new Highcharts.StockChart(options);
});
});
</script>
</body>
</html>
The series property is meant to be an array so set your series data via
options.series[0].data = seriesData;

Javascript HighCharts parsing CSV

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
}]

Categories