My Chart has a datetime value and two number values (positive and negative).
The above image shows the results of drawing one bar, datetime being current date, the problem is, the bar covers 1990 to 2050, when it should only be covering the current month.
If I draw 2 bars, one for last month, and one for current month, everything is drawn properly.
I'm assuming GoogleCharts needs at least 2 dates for some reason. Does anyone have any idea how to fix this, or give some direction.
Thanks in advance,
Edit to ADD:
The Chart that I am using:
google.charts.load('current', {packages: ['corechart', 'controls']});
The single bar that I am drawing comes from this data store in historyChart:
[["2016-10-01T00:00:00+00:00", 5000.0, 0]]
I am inserting this data to the chart in this manner:
data.addColumn('datetime', 'Chart Filter');
data.addColumn('number');
data.addColumn('number');
data.addRows(historyChart);
The Chart wrapper and options are as followed:
var programmaticChart = new google.visualization.ChartWrapper({
'chartType': 'ColumnChart',
'containerId': 'programmatic_chart_div',
'options': {
displayExactValues:false,
vAxis: {
format: '$#,###', //add $sign in virtical axis
viewWindowMode: 'maximized',
},
hAxis:{
format: 'MMM-yyyy',
},
width: 900,
height: 450,
chartArea: {
'backgroundColor': {
'fill': '#F4F4F4',
'opacity': 100
},
top:50,
left:85,
width: 1000
},
title: "{{ member.username }}'s chart", //set user name as chart's title
isStacked:"true",
bar:{groupWidth: "95%"},
colors: ['#7FFF00', '#e6693e'],
}
});
// Create and draw the visualization.
dashboard.bind(programmaticSlider, programmaticChart);
dashboard.draw(data);
adding option for hAxis.ticks seems to help...
see following working snippet...
google.charts.load('43', {
callback: function () {
var data = new google.visualization.DataTable();
data.addColumn('datetime', 'Chart Filter');
data.addColumn('number');
data.addColumn('number');
data.addRows([
[new Date("10/01/2016"), 5000.0, 0]
]);
var programmaticChart = new google.visualization.ChartWrapper({
chartType: 'ColumnChart',
containerId: 'programmatic_chart_div',
dataTable: data,
options: {
displayExactValues: false,
vAxis: {
format: '$#,###',
viewWindowMode: 'maximized'
},
hAxis:{
format: 'MMM-yyyy',
ticks: [new Date("10/01/2016")]
},
width: 900,
height: 450,
chartArea: {
backgroundColor: {
fill: '#f4f4f4',
opacity: 100
},
top: 50,
left: 85,
width: 1000
},
title: '{{ member.username }}\'s chart',
isStacked: 'true',
bar:{groupWidth: '95%'},
colors: ['#7fff00', '#e6693e']
}
});
programmaticChart.draw();
//dashboard.bind(programmaticSlider, programmaticChart);
//dashboard.draw(data);
},
packages: ['corechart', 'controls']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="programmatic_chart_div"></div>
Related
I am trying to generate a multicolor line chart refer jsfiddle code
The chart that's being generated by Google chart shows three straight lines (red, green and blue) which should not be part of the chart at all.
See attached image
When I am rendering the chart of individual colors, in that case, the chart is coming up fine but when I am combining them together, in that case, one can see these straight lines appearing out of nowhere.
Here's the code snippet, refer jsfiddle for the actual code
google.charts.load('current', {packages: ['corechart', 'line']});
google.charts.setOnLoadCallback(drawAxisTickColors);
function drawAxisTickColors() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'Bets');
data.addColumn('number', 'Values');
data.addColumn({type:'string', role:'style'});
data.addRows([[5,100,"color:#D3D3D3"],[10,200,"color:#D3D3D3"],[15,300,"color:#D3D3D3"]]);
var options = {
height: 450,
title: 'Monte Carlo',
curveType: 'function',
legend: 'none',
backgroundColor: { fill:'transparent' },
intervals: { 'style': 'line' },
hAxis: {
title: 'Bets',
textStyle: {
color: '#33465C'
},
titleTextStyle: {
color: '#33465C'
}
},
vAxis: {
title: 'Results',
textStyle: {
color: '#33465C'
},
titleTextStyle: {
color: '#33465C'
}
},
titleTextStyle: {
color: '#33465C'
},
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
Any guidance to resolve this will be much appreciated.
I have 20000+ data points of the format [Date, Number], actual data is per hour for the last load of months.
I would like to show only the latest 28 days in the chart, but use the chart option explorer.actions: ['dragToPan', 'rightClickToReset'] to view data older than 28 days.
Basically, i want to show a subset of the data and then scroll to older data.
Is this even possible? Can someone provide an example of how its done?
google.charts.load('current', {
callback: function () {
var element = document.getElementById('#chart');
var data = google.visualization.arrayToDataTable([["Date","hits"],["2017-07-01",30],["2017-07-02",20],["2017-07-03",16],["2017-07-4",10],["2017-07-5",31],["2017-07-6",20],["2017-07-7",2],["2017-07-8",8],["2017-07-09",30],["2017-07-10",20],["2017-07-11",16],["2017-07-12",10],["2017-07-13",31],["2017-07-14",20],["2017-07-15",2],["2017-07-16",8]]);
var chart = new google.visualization.AreaChart(element);
var options = {
width: "100%",
height: "100%",
fontSize: 13,
animation: { duration: 1250, easing: 'out' },
legend: 'none',
chartArea: {
left: 40,
height: "80%",
width: "85%"
},
explorer: {
actions: ['dragToPan', 'rightClickToReset'],
axis: 'horizontal',
keepInBounds: false
},
hAxis: {
showTextEvery: 2,
textPosition: 'out',
format: 'dd MMM yy',
}
};
chart.draw(data, options);
},
packages:['corechart']
});
You can use hAxis.viewWindow.max and hAxis.viewWindow.max as per: https://developers.google.com/chart/interactive/docs/gallery/linechart
See: https://jsfiddle.net/5h7jxqq8/169/
I am currently working with Google Charts to visualize data to the user. If there is no Data, the google chart automatically draws the y-Axis from -1 to 1. But in my case, -1 makes no sense, so I want it to show the empty chart from 0 to n (max value doesn't matter, I just don't want negative ones). I already searched for solutions, and the most common answer is, that
viewWindow: {
min: 0
}
should help. But, it doesn't. I guess I just use it the wrong way because it works for so many other users, but I can't figure out, what's wrong. So here is how I tried to avoid negative Y-Values:
function drawChart() {
var data = google.visualization.arrayToDataTable(dataArray);
var options = {
vAxis: { viewWindowMode: "explicit", viewWindow:{ min: 0 }},
chart: {
title: 'Check Diagramm',
subtitle: '#chartTitle',
},
colors: ['#8BC34A', '#F44336']
};
var chart = new google.charts.Bar(document.getElementById('columnchart_material'));
chart.draw(data, options);
}
And the result is always:
Thanks in advance for your help :)
Edit:
I also tried
vAxis: {
minValue:0,
viewWindow: {
min: 0
}
}
viewWindow: {min: 0} works, but when using Material charts,
have to convert the options...
google.charts.Bar.convertOptions
see following snippet...
google.charts.load('current', {
callback: function () {
var dataArray = [
['Month', 'Positive Checks', 'Negative Checks'],
['Jan', 0, 0],
['Feb', 0, 0],
['Mar', 0, 0],
['Apr', 0, 0],
['May', 0, 0]
];
var data = google.visualization.arrayToDataTable(dataArray);
// convert options
var options = google.charts.Bar.convertOptions({
height: 600,
width: 800,
vAxis: {
viewWindow: {
min: 0
}
},
chart: {
title: 'Check Diagramm',
subtitle: '#chartTitle',
},
colors: ['#8BC34A', '#F44336']
});
var chart = new google.charts.Bar(document.getElementById('columnchart_material'));
chart.draw(data, options);
},
packages: ['bar']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="columnchart_material"></div>
I tried multiple solutions given out from
How to set Axis step in Google Chart?, Trying to set y axis to 0 in google charts, and several other posts that I have looked over without any luck. Does anyone have an idea of what can be done in order to set the y axis to a starting point of 0? I can provide more information if need be. Also a side question, is it possible to bring a line to the front when clicked on. For example when you click on the current trend line, it bolds but the data points do not appear for them.
<div id="thelinechart" style="width: 1000px; height: 550px"></div>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script>google.charts.load('current', {'packages':['line']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();data.addColumn('string','Year');
data.addColumn('number','Current Trend');
data.addColumn('number','2015 Projection');
data.addColumn('number','2016 Projection');
data.addColumn('number','2017 Projection');
data.addColumn('number','2018 Projection');
data.addRows([
['2015',250,250,null,null,null],['2016',200,300,200,null,null],['2017',200,310,230,200,null],['2018',290,340,320,280,290],['2019',null,370,350,360,290],['2020',null,null,430,470,390],['2021',null,null,null,520,440],['2022',null,null,null,null,450]
]);
var options = {
chart: {
title: 'Capacity',
subtitle: 'in weight'
},
width: 850,
height: 450,
vAxis: {
viewWindowMode: 'explicit',
viewWindow: {
//max: 8000,
min: 0,
},
gridlines: {
count: 18, //set kind of step (max-min)/count
}
}
};
var chart = new google.charts.Line(document.getElementById('thelinechart'));
chart.draw(data, options);
}
</script>
I have a jsfiddle link where I have my code.
https://jsfiddle.net/abufr36y/
Need to convert options for Material Charts, depending on the package...
google.charts.Line.convertOptions(options)
See following example...
google.charts.load('current', {
callback: drawChart,
packages: ['line']
});
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string','Year');
data.addColumn('number','Current Trend');
data.addColumn('number','2015 Projection');
data.addColumn('number','2016 Projection');
data.addColumn('number','2017 Projection');
data.addColumn('number','2018 Projection');
data.addRows([
['2015',250,250,null,null,null],['2016',200,300,200,null,null],['2017',200,310,230,200,null],['2018',290,340,320,280,290],['2019',null,370,350,360,290],['2020',null,null,430,470,390],['2021',null,null,null,520,440],['2022',null,null,null,null,450]
]);
var options = {
chart: {
title: 'Capacity',
subtitle: 'in weight'
},
width: 850,
height: 450,
vAxis: {
viewWindowMode: 'explicit',
viewWindow: {
//max: 8000,
min: 0,
},
gridlines: {
count: 18, //set kind of step (max-min)/count
}
}
};
var view = new google.visualization.DataView(data);
view.setColumns([0, 2, 3, 4, 5, 1]);
var chart = new google.charts.Line(document.getElementById('thelinechart'));
// convert options for Material Charts, use view vs. data
chart.draw(view, google.charts.Line.convertOptions(options));
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="thelinechart"></div>
i tried to create a bar chart using google chart api. in which i want to remove the x-axis title
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1.1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'first six', 'second six'],
['2010', 3750, 3800],
['2011', 3900, 3850],
['2012', 3850, 3900],
['2013', 4280, 4160],
['2014', 4350, 0000]
]);
var options = {
width: 400,
height: 320,
bar: {groupWidth: "90%"},
legend: { position: "none" },
};
var chart = new google.charts.Bar(document.getElementById('columnchart_material_price'));
chart.draw(data, options);
}
this is the code for bar chart
i tried
var options = {
hAxis: {title: ' ', titleTextStyle: {color: 'white'}},
}
but this does nothing . how can i remove x-axis title it is by default "year"?
Following code will help you.It works for me.
var options = {
width: 400,
height: 320,
bar: {groupWidth: "90%"},
legend: { position: "none" },
hAxis: { textPosition: 'none' },
};
Try set axes.x.label to "".
I hope help.
var options = {
axes: {
x: {
0: { side: 'bottom', label: ""}
}
}
};
chart.draw(data, options);
Use the option
hAxis: {textPosition: 'none'}
https://developers.google.com/chart/interactive/docs/gallery/linechart#configuration-options
The syntax you're using to declare chart object doesn't seem right, change the line to the one below:
var chart = new google.visualization.BarChart(document.getElementById('columnchart_material_price'));
There are no predefined titles for the axis. But if you see the title 'Year' somehow, that's propably because of the data table's first column header. You can simply remove that:
var data = google.visualization.arrayToDataTable([
['', 'first six', 'second six'],
['2010', 3750, 3800],
['2011', 3900, 3850],
['2012', 3850, 3900],
['2013', 4280, 4160],
['2014', 4350, 0000]
]);