as indicated by red arrow. why it is showing -25 line in chart
javascript which i am using is.
<!DOCTYPE html>
<html>
<head> <meta http-equiv="refresh" content="30" />
<title>Analytics of Payment Service</title>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {
packages: ["corechart", "bar"]
});
google.setOnLoadCallback(function(){
drawChart2()
})
function drawChart2() {
var listOfDataCC =$!{dataForCCInvoice}
var outputArrayForInvoiceAndCredit = new Array();
// header
var headerArray1 = ['Day', 'cc', 'In'];
outputArrayForInvoiceAndCredit.push(headerArray1);
for (var i = 0; i < listOfDataCC.length; i++){
var obj1 = listOfDataCC[i];
var innerArray = new Array();
innerArray[0] = obj1.date;
innerArray[1] = obj1.CCount;
innerArray[2] = obj1.inCount;
outputArrayForInvoiceAndCredit.push(innerArray);
}
var data2 = google.visualization.arrayToDataTable(outputArrayForInvoiceAndCredit);
var options2 = {
title: 'CC/In Details',
curveType: 'function',
legend: {
position: 'bottom'
}
};
var chart2 = new google.visualization.LineChart(document.getElementById('cc/in'));
chart2.draw(data2, options2);
}
</script>
</head>
<body>
<div id="cc/in" style="width: 900px; height: 500px"></div>
</body>
</html>
value of $!{dataForCCInvoice} is values in json format.
json values are.
[
{
"date": "15-APR-16",
"CCount": 38,
"inCount": 18
},
{
"date": "16-APR-16",
"CCount": 9,
"inCount": 14
},
{
"date": "17-APR-16",
"CCount": 9,
"inCount": 3
},
{
"date": "18-APR-16",
"CCount": 52,
"inCount": 44
},
{
"date": "19-APR-16",
"CCount": 59,
"inCount": 44
},
{
"date": "20-APR-16",
"CCount": 9,
"inCount": 7
}
]
what i am missing here. sometimes its working fine but dont know why that -25 line is appearing
To solve this, you can add the following to your options :
vAxis: {viewWindow: {min: 0}}
So it will look like this :
var options2 = {
title: 'CC/In Details',
curveType: 'function',
legend: {
position: 'bottom'
},
vAxis: {
viewWindow: {
min: 0
}
}
};
I'm not sure why it show the -25 line in the first place though. I think it's due to the value of 3 in inCount, which is low enough to make the charts display negative values.
Related
I am trying to color each point on my scatterplot according to the continent it is on. I have my code below but I am unsure as to how I can reference the continent field for each entry, and then assign it to the color field in trace1.
I tried something such as below but no luck.
EDIT:: This has been answered -> Also, how can I pull from the github?
Here is my code below.
<!DOCTYPE html>
<html>
<head>
<!-- Load plotly.js into the DOM -->
<script src='https://cdn.plot.ly/plotly-2.11.1.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js'></script>
</head>
<body>
<div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>
</body>
<body>
<svg id="visualisation" width="1355" height="333"></svg>
<script src="https://cdn.plot.ly/plotly-2.11.1.min.js" charset="utf-8"></script>
<script>
d3.csv('https://raw.githubusercontent.com/holtzy/data_to_viz/master/Example_dataset/4_ThreeNum.csv', function(err, rows){
function unpack(rows, key) {
return rows.map(function(row)
{ return row[key]; });}
const asia = [];
const condition = unpack(rows, 'continent');
const j = 0;
for(let i = 0; i < condition.length;i++ ){
if(condition[i] === 'asia'){
asia[j] = condition[i];
j++;
}
}
console.log(asia[0]);
var trace1 = {
x:unpack(rows, 'lifeExp'), y: unpack(rows, 'gdpPercap'), z: unpack(rows, 'pop'),
mode: 'markers',
marker: {
size: 12,
line: {
color: 'rgba(217, 217, 217, 0.14)',
width: 0.5},
opacity: 0.8},
type: 'scatter3d'
};
var data = [trace1];
var layout = {
width: 1000,
height: 1000,
margin: {
l: 0,
r: 0,
b: 100,
t: 0
},
scene: {
xaxis: { title: asia[1] },
yaxis: { title: "Population" },
zaxis: { title: "GDP per cap" },
},
};
Plotly.newPlot('myDiv', data, layout);
});
</script>
</body>
</html>
I am having issues creating my Highcharts graph out of my csv data. I have the following code that seems that it should work but it produces a blank graph on my server, I think it has something to do with the way that I'm pulling my data. I am using a ajax requests to pull from the csv file and plot the points. My csv is formatted like this.
0,0,0,12:45:37
5,26,130,12:45:37
1,28,28,12:45:42
4,35,140,12:45:47
1,32,32,12:45:52
3,16,48,12:45:57
1,29,29,12:46:02
1,25,25,12:46:07
5,16,80,12:46:12
4,35,140,12:46:17
5,25,125,12:46:22
4,37,148,12:46:27
With new points being added to the csv file every 30 seconds.
This is my code producing a blank graph.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Load cells data</title>
<!-- 1. Add these JavaScript inclusions in the head of your page -->
<script type="text/javascript" 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>
<!-- 2. Add the JavaScript to initialize the chart on document ready -->
<script type="text/javascript">
$(document).ready(function() {
Highcharts.setOptions({
global: {
useUTC: false
}
});
var t = [];
var Cell1 = [];
var Cell2 = [];
var Cell3 = [];
$.get('test.csv',function(data) {
var lines = data.split('\n');
$.each(lines, function(lineNo, line) {
var items = line.split(',');
var date = items[0].split('/');
Cell1.push([date, parseFloat(items[1])]);
Cell2.push([date, parseFloat(items[2])]);
Cell3.push([date, parseFloat(items[0])]);
});
var options = {
chart: {
zoomType: 'x',
renderTo: 'chart',
defaultSeriesType: 'line',
animation: Highcharts.svg,
events: {
load: requestData
}
},
title: {
text: 'Reading chart'
},
xAxis: {
title: {
text: 'Date'
},
type: 'datetime'
},
yAxis: {
title: {
text: 'kN'
}
},
series: [{
data: Cell1},{data: Cell2
}, {data: Cell3}],
//barra vertical que une puntos
tooltip: {
backgroundColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1,
x3: 0,
y3: 2
},
stops: [
[0, 'rgba(96, 96, 96, .8)'],
[1, 'rgba(16, 16, 16, .8)'],
[2, 'rgba(50, 50, 50, .8)']
]
},
borderWidth: 0,
style: {
color: '#FFF'
},
crosshairs: true,
shared: true
},
// quitar link Highcharts
credits: {
position: {
align: 'left',
verticalAlign: 'bottom',
x: 0,
y: -10
},
style: {
cursor: 'pointer',
fontSize: '20px',
color: 'rgba(0, 0, 0, 0)'
},
text: 'R E M t i m er.com',
href: 'http://Google.com'
},
// finn quitar link highcharts
};
var chart = new Highcharts.StockChart(options);
function requestData() {
$.ajax({
csv: '\\server\\test.csv',
success: function(csv) {
var items = csv.split(',');
var date = items[0].split('/');
Cell1 = parseFloat(items[1]),
Cell2 = parseFloat(items[2]),
Cell3 = parseFloat(items[3]),
point = [date, Cell1];
point2 = [date, Cell2];
point3 = [date, Cell3];
chart.series[0].addPoint(point);
chart.series[1].addPoint(point2)
chart.series[2].addPoint(point3)
// call it again after one second
setTimeout(requestData, 30000);
},
cache: false
});
}
});
});
</script>
</head>
<body>
<!-- 3. Add the container -->
<div id="chart" style="width: 800px; height: 400px; margin: 0 auto"></div>
</body>
</html>
Please help.
You need to put date as timestamp.
Since the csv date doesn't contain the day, I suggest put the current date (but check your requirements).
Try this (create a new date based on string in ISO 8601 format):
var date = new Date(new Date().toISOString().substr(0,10) + 'T' + items[3])
I've been trying to add annotations to google bar chart. I've seen related questions about this, but can't solve it. There are 2 bar in charts and i want to show numbers on bars. I added 2 annotation column to my datatable. Chart draw works without annotations and there is no error at console. So i need some help. Here is my code:
var options = {
chart: {
title: 'xxxx',
subtitle: 'xxxx',
focusTarget:'category'
},
annotations: {
textStyle: {
color: 'black',
fontSize: 11,
},
alwaysOutside: true
},
height:300,
vAxis: {format: 'short'},
colors: ['#17807E', '#4285F4']
};
function drawAudits(Data) //data comes from another function with ajax call
{
var dataTbl = new google.visualization.DataTable();
dataTbl.addColumn('string', 'Months');
dataTbl.addColumn('number', 'Scheduled');
dataTbl.addColumn('number', 'Done');
dataTbl.addColumn({ type:'number' , role: 'annotation' });
dataTbl.addColumn({ type:'number' , role: 'annotation' });
for (var i = 0; i < Data.length; i++)
{
dataTbl.addRow([Data[i].month, Data[i].AllAudits, Data[i].DoneAudits, Data[i].AllAudits, Data[i].DoneAudits]);
} //last 2 column for annotations
var chart = new google.charts.Bar(document.getElementById('columnChartDiv'));
chart.draw(dataTbl,options);
}
thanks in advance.
annotations.* are not supported by Material charts, along with several other options...
see --> Tracking Issue for Material Chart Feature Parity #2143
the following option will style Core charts, similar to Material...
theme: 'material'
note: the annotation column should directly follow the series it represents...
see following working snippet...
google.charts.load('current', {
callback: function () {
var options = {
annotations: {
textStyle: {
color: 'black',
fontSize: 11,
},
alwaysOutside: true
},
chartArea: {
left: 36,
width: '100%'
},
colors: ['#17807E', '#4285F4'],
focusTarget:'category',
height:300,
legend: {
position: 'bottom'
},
theme: 'material',
title: 'xxxx',
vAxis: {
format: 'short',
viewWindow: {
max: 12
}
},
};
drawAudits();
window.addEventListener('resize', drawAudits, false);
function drawAudits(Data) {
var dataTbl = new google.visualization.DataTable();
dataTbl.addColumn('string', 'Months');
dataTbl.addColumn('number', 'Scheduled');
dataTbl.addColumn({ type:'number' , role: 'annotation' });
dataTbl.addColumn('number', 'Done');
dataTbl.addColumn({ type:'number' , role: 'annotation' });
Data = [
{month: 'Jan', AllAudits: 10, DoneAudits: 5},
{month: 'Feb', AllAudits: 10, DoneAudits: 6}
];
for (var i = 0; i < Data.length; i++) {
dataTbl.addRow([Data[i].month, Data[i].AllAudits, Data[i].AllAudits, Data[i].DoneAudits, Data[i].DoneAudits]);
}
var chart = new google.visualization.ColumnChart(document.getElementById('columnChartDiv'));
chart.draw(dataTbl,options);
}
},
packages: ['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="columnChartDiv"></div>
i am using google chart api in which i am fetching values from json .i am sharing my javascript with json here.its giving me error like it must be same data type but as for my knowledge it is of same type.
function drawChart2() {
var jsa = [
{
"date": "01-APR-16",
"creditCardCount": 3,
"invoiceCount": 1
},
{
"date": "06-APR-16",
"creditCardCount": 2,
"invoiceCount": 3
},
{
"date": "29-MAR-16",
"creditCardCount": 3,
"invoiceCount": 1
},
{
"date": "30-MAR-16",
"creditCardCount": 4,
"invoiceCount": 3
},
{
"date": "31-MAR-16",
"creditCardCount": 1,
"invoiceCount": 1
}
]
var outputArrayForInvoiceAndCredit = new Array();
// header
var headerArray1 = ['Day', 'CreditCard', 'Invoice'];
outputArrayForInvoiceAndCredit.push(headerArray1);
for (var i = 0; i < jsa.length; i++){
var obj1 = jsa[i];
var innerArray = new Array();
innerArray[0] = obj1.date;
innerArray[1] = obj1.creditCardCount;
innerArray[2] = obj1.InvoiceCount;
outputArrayForInvoiceAndCredit.push(innerArray);
}
var data2 = google.visualization.arrayToDataTable(outputArrayForInvoiceAndCredit);
var options2 = {
title: 'CreaditCard/Invoice Details',
curveType: 'function',
legend: {
position: 'bottom'
}
};
var chart2 = new google.visualization.LineChart(document.getElementById('cc/invoice'));
chart2.draw(data2, options2);
}
meanwhile if i use it without json it is working fine
below is the script which works fine
function drawChart3() {
var data3 = google.visualization.arrayToDataTable([
['Day', 'Sales','exp'],
['4-APRIL-16', 1000,200],
['5-APRIL-16', 1170,300],
['6-APRIL-16', 660,400],
['7-APRIL-16', 1030,500]
]);
var options3 = {
title: 'Company Performance',
curveType: 'function',
legend: {
position: 'bottom'
}
};
var chart3 = new google.visualization.LineChart(document.getElementById('curve_chart'));
chart3.draw(data3, options3);
}
can anyone help me into this.Thank you
I have a google visualisation linechart. I am having issues formatting the labels on the h-axis. I would like to have them rounded off to integers so it looks neater. I have looked at the documentation but could not find a solution. Here is my code:
HTML
<div id="myChart2" name="myChart2" width="500" height="280"></div>
jQuery
$(document).ready(function(){
var chartData = new google.visualization.DataTable();
chartData.addColumn('number', 'SPS');
chartData.addColumn('number', 'WGT');
var chartdatax = ["47", "47", "38", "35", "35"];
var chartdatay = ["1500", "2300", "2300", "1950", "1500"];
for (var i = 0; i < chartdatax.length; i++) {
chartData.addRow([parseFloat(chartdatax[i]), parseFloat(chartdatay[i])]);
};
options2 = {
height: 500,
hAxis: {
title: 'SPS',
gridlines: {
count: 15
}
},
vAxis: {
title: 'WGT',
gridlines: {
count: 15
}
},
chartArea: {
top: 40,
width: "70%",
height: "75%"
},
legend: {
position: 'none'
},
pointSize: 5
};
myLineChart = new google.visualization.LineChart(document.getElementById('myChart2'));
myLineChart.draw(chartData, options2);
});
JSFiddle: https://jsfiddle.net/rdawkins/w83mdx3y/2/
You can add format:'#,###' to your hAxis object:
hAxis: {
format:'#,###',
title: 'SPS',
gridlines: {
count: 15
}
},
Here's an updated version of your fiddle: https://jsfiddle.net/w83mdx3y/3/
See customizing axes in the charts documentation for more information on how this works.