I'm having trouble getting the spacing between the "Applications" and the data to be separated (chart 1). It needs a space between the colon and the int. I want it to look like chart 2.
(Since I'm new I can't post pictures of the chart)
Chart 1:
2011
Applicaitons:10 <-- no spacing
Chart 2: (from Google)
25
Cats: 42 <-- spacing
I'm setting my data point dynamically, not like the example from Google charts. Please see below:
public string GetAppFiledPatIssuedByYear(DateTime? startDate, DateTime? endDate)
{
using (var db = new PatentDashboardEntities())
{
var appFiledAndPatentIssued = db.f_sp_Get_AppPatentsFiled(startDate, endDate);
StringBuilder sb = new StringBuilder();
//open parent array
sb.Append("[");
//add new row containing column names
sb.Append("[\"Year\",\"Applications\", \"Patents\"], ");
int count = 0;
foreach (f_sp_Get_AppPatentsFiled_Result result in appFiledAndPatentIssued)
{
if (count > 0)
sb.Append(", ");
count++;
sb.Append("[");
sb.Append("\"" + result.LatestYear.ToString().Trim() + "\", ");
sb.Append(result.AppCount.ToString().Trim() + ", ");
sb.Append(result.PatentCount.ToString().Trim());
sb.Append("]");
}
// In case of data is not coming from server.
if (startDate != null && endDate != null)
{
int startYear = startDate.Value.Year;
int endYear = endDate.Value.Year;
List<int> yearRange = new List<int>();
for (int i = startYear; i <= endYear; i++)
{
yearRange.Add(i);
}
if (count == 0)
{
foreach (var year in yearRange)
{
if (count > 0)
sb.Append(", ");
count++;
sb.Append("[");
sb.Append("\" " + year + "\", ");
sb.Append("0 ,");
sb.Append("0");
sb.Append("]");
}
}
}
// Close parent array
sb.Append("]");
return sb.ToString();
}
}
***** Code in JS where it is being built ******
function getAppFiledPatentsIssuedByYear() {
retrieveData("/PatentDashboard/GetAppFiledPatIssuedByYear?Date=" + $('#dtDateRange').val() + "", drawAppFiledPatIssuedByYearChart);}
function drawAppFiledPatIssuedByYearChart(json) {
var data = google.visualization.arrayToDataTable(json);
var options = {
isStacked: false,
height: 250,
width: "100%",
fontSize: 12,
fontName: fontName,
pointSize: 10,
legend: { position: 'top' },
chartArea: {
top: 50,
left: 60,
width: "100%"
},
hAxis: {
slantedText: true,
slantedTextAngle: 45,
textStyle: {
fontsize: 11
}
},
vAxis: {
format: "0",
textStyle: {
bold: true
},
viewWindow: {
min: 0
}
},
colors: filedAndIssuedColors
};
setVAxisTicks(data, options);
var chart = new google.visualization.LineChart(document.getElementById("patIssuedDiv"));
chart.draw(data, options);
var chartName = 'YearlyApplicationsFiledAndPatentsIssued';
var chartTitle = 'Yearly Applications Filed and Patents Issued';
setUpRawDataLink(chart, chartTitle, chartName, data);
setUpExcelLink($("#yearlyAppFiledandPatentsIssuedExportExcel"), { chartName: chartName });
setUpImageLink($("#yearlyAppFiledandPatentsIssuedExportImage"), chart, chartTitle);}
It's returning as a string (from backend) and later passing the content as JSON object back to the front end in the JS file.
Link to Google Datapoint
How do I get the spacing between "Applications:10" to "Applications: 10"
just not able to re-create the issue, seems to work fine here.
see following working snippet...
could it be the fontName? (what is it?)
what else is missing from the snippet below?
filedAndIssuedColors & setVAxisTicks -- but don't see how those could cause the issue.
google.charts.load('current', {
packages:['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([["Year","Applications", "Patents"], ["1990", 1, 0], ["1991", 11, 0], ["1992", 2, 0], ["1993", 1, 0], ["1994", 19, 0], ["1997", 1, 0], ["2000", 1, 0], ["2001", 9, 0], ["2002", 11, 0], ["2003", 2, 1], ["2004", 2, 0], ["2005", 15, 0], ["2006", 2, 1], ["2007", 34, 1], ["2008", 2, 5], ["2009", 2, 5], ["2010", 27, 1], ["2011", 14, 6], ["2012", 23, 7], ["2013", 22, 14], ["2014", 15, 6], ["2015", 94, 12], ["2016", 26, 22], ["2017", 96, 33], ["2018", 22, 51]]);
var options = {
isStacked: false,
height: 250,
width: "100%",
fontSize: 12,
//fontName: fontName,
pointSize: 10,
legend: { position: 'top' },
chartArea: {
top: 50,
left: 60,
width: "100%"
},
hAxis: {
slantedText: true,
slantedTextAngle: 45,
textStyle: {
fontsize: 11
}
},
vAxis: {
format: "0",
textStyle: {
bold: true
},
viewWindow: {
min: 0
}
},
//colors: filedAndIssuedColors
};
//setVAxisTicks(data, options);
var chart = new google.visualization.LineChart(document.getElementById("chart_div"));
chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
EDIT
we can certainly add more space using a custom tooltip,
see following working snippet...
google.charts.load('current', {
packages:['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([["Year","Applications", "Patents"], ["1990", 1, 0], ["1991", 11, 0], ["1992", 2, 0], ["1993", 1, 0], ["1994", 19, 0], ["1997", 1, 0], ["2000", 1, 0], ["2001", 9, 0], ["2002", 11, 0], ["2003", 2, 1], ["2004", 2, 0], ["2005", 15, 0], ["2006", 2, 1], ["2007", 34, 1], ["2008", 2, 5], ["2009", 2, 5], ["2010", 27, 1], ["2011", 14, 6], ["2012", 23, 7], ["2013", 22, 14], ["2014", 15, 6], ["2015", 94, 12], ["2016", 26, 22], ["2017", 96, 33], ["2018", 22, 51]]);
var options = {
isStacked: false,
height: 250,
width: "100%",
fontSize: 12,
fontName: 'Open Sans',
pointSize: 10,
legend: { position: 'top' },
chartArea: {
top: 50,
left: 60,
width: "100%"
},
hAxis: {
slantedText: true,
slantedTextAngle: 45,
textStyle: {
fontsize: 11
}
},
vAxis: {
format: "0",
textStyle: {
bold: true
},
viewWindow: {
min: 0
}
},
tooltip: {
isHtml: true
}
};
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
type: 'string',
role: 'tooltip',
calc: function (dt, row) {
return '<div class="tooltip"><div><span>' + dt.getValue(row, 0) + '</span></div><div>' + dt.getColumnLabel(1) + ': <span>' + dt.getValue(row, 1) + '</span></div>';
},
p: {html: true}
}, 2, {
type: 'string',
role: 'tooltip',
calc: function (dt, row) {
return '<div class="tooltip"><div><span>' + dt.getValue(row, 0) + '</span></div><div>' + dt.getColumnLabel(2) + ': <span>' + dt.getValue(row, 2) + '</span></div>';
},
p: {html: true}
}]);
console.log('test');
var chart = new google.visualization.LineChart(document.getElementById("chart_div"));
chart.draw(view.toDataTable(), options);
});
.tooltip {
font-family: 'Open Sans';
font-size: 11pt;
padding: 4px;
}
.tooltip div {
padding: 4px;
}
.tooltip span {
font-weight: bold;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
Related
I want to create bar chart using google charts
Condition to create chart is like Bar should have fixed width and padding between the bars and it should be plot at center of grid lines.
I used google chart for this .
google.charts.load("current", {packages:['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
["Element", "Density", { role: "style" } ],
["Copper", 8.94, "#b87333"],
["Silver", 10.49, "silver"],
["Gold", 19.30, "gold"],
["Platinum", 21.45, "color: #e5e4e2"]
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1,
{ calc: getValueAt.bind(undefined, 1),
sourceColumn: 1,
type: "string",
role: "annotation" },
2]);
var options = {
title: "Density of Precious Metals, in g/cm^3",
width: 600,
height: 400,
bar: {
groupWidth: 20
},
legend: { position: "none" },
};
var chart = new google.visualization.ColumnChart(document.getElementById("columnchart_values"));
chart.draw(view, options);
}
function getValueAt(column, dataTable, row) {
return dataTable.getFormattedValue(row, column);
}
JsFiddle for the same
I want to create something like this.
in order to get the bars between the gridlines,
will need to use a continuous data type for the x-axis,
timeofday will work, which takes an array of either 3 or 4 numbers,
representing hours, minutes, seconds, and optionally milliseconds, respectively
['Time', 'Value'],
[[9, 30, 0], 20],
[[10, 30, 0], 30],
...
set the data values at the half minute mark,
then use ticks at the full minute mark...
ticks: [
[9, 0, 0],
[10, 0, 0],
...
for padding between the bars, use a percentage...
bar: {
groupWidth: '95%'
},
see following working snippet...
google.charts.load('current', {
packages:['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['Time', 'Value'],
[[9, 30, 0], 20],
[[10, 30, 0], 30],
[[11, 30, 0], 57],
[[12, 30, 0], 70],
[[13, 30, 0], 80],
[[14, 30, 0], 55],
[[15, 30, 0], 45],
[[16, 30, 0], 20],
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
calc: function (dt, row) {
return dt.getFormattedValue(row, 1);
},
role: 'annotation',
type: 'string'
}]);
var options = {
annotations: {
alwaysOutside: true,
stem: {
color: '#cb4335',
length: 20,
},
},
bar: {
groupWidth: '95%'
},
colors: ['#cb4335'],
hAxis: {
format: 'ha',
gridlines: {
color: 'transparent'
},
ticks: [
[9, 0, 0],
[10, 0, 0],
[11, 0, 0],
[12, 0, 0],
[13, 0, 0],
[14, 0, 0],
[15, 0, 0],
[16, 0, 0],
],
},
height: 400,
legend: {position: 'none'},
tooltip: {trigger: 'none'},
vAxis: {
textStyle: {
color: 'transparent'
}
},
};
var chart = new google.visualization.ColumnChart(document.getElementById('columnchart_values'));
chart.draw(view, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="columnchart_values"></div>
EDIT
to expand the gridlines, use option hAxis.viewWindow.min & max
and chartArea.width can extend the chart to the edges of the chart container
see following working snippet...
google.charts.load('current', {
packages:['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['Time', 'Value'],
[[9, 30, 0], 20],
[[10, 30, 0], 30],
[[11, 30, 0], 57],
[[12, 30, 0], 70],
[[13, 30, 0], 80],
[[14, 30, 0], 55],
[[15, 30, 0], 45],
[[16, 30, 0], 20],
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
calc: function (dt, row) {
return dt.getFormattedValue(row, 1);
},
role: 'annotation',
type: 'string'
}]);
var options = {
annotations: {
alwaysOutside: true,
stem: {
color: '#cb4335',
length: 20,
},
},
bar: {
groupWidth: '95%'
},
chartArea: {
width: '100%'
},
colors: ['#cb4335'],
hAxis: {
format: 'ha',
gridlines: {
color: 'transparent'
},
ticks: [
[9, 0, 0],
[10, 0, 0],
[11, 0, 0],
[12, 0, 0],
[13, 0, 0],
[14, 0, 0],
[15, 0, 0],
[16, 0, 0],
],
viewWindow: {
min: [6, 0, 0],
max: [20, 0, 0]
}
},
height: 400,
legend: {position: 'none'},
tooltip: {trigger: 'none'},
vAxis: {
textStyle: {
color: 'transparent'
}
},
};
var chart = new google.visualization.ColumnChart(document.getElementById('columnchart_values'));
chart.draw(view, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="columnchart_values"></div>
I'm using google line chart in my project and facing a problem that I need to change color for some segments to visualize the target status changes over time. It should look like this:
I've searched around for quite long but couldn't find a way to do that with google chart.
My workaround is to add another series to the chart and alternately set the value of the second line eq to the first line based on the status but it looks tedious.
Is there a proper way to do this? Here is a sample of my workaround solution:
function drawMultipleTrendlineChart() {
var chart;
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Sales value A');
data.addColumn('number', 'Sales value B');
data.addRows([
[new Date(2013, 3, 11), 200, 0],
[new Date(2013, 4, 02), 500, 0],
[new Date(2013, 5, 03), 700, 0],
[new Date(2013, 6, 04), 800, 800],
[new Date(2013, 7, 05), 500, 500],
[new Date(2013, 8, 06), 900, 0],
[new Date(2014, 0, 07), 800, 0],
[new Date(2014, 1, 08), 1100, 1100],
[new Date(2014, 2, 09), 1000, 1000],
[new Date(2014, 2, 10), 1000, 0],
[new Date(2014, 3, 11), 800, 0],
]);
var formatter = new google.visualization.NumberFormat({
fractionDigits: 2,
prefix: 'R$:'
});
formatter.format(data, 1);
var dateFormatter = new google.visualization.NumberFormat({
pattern: 'MMM yyyy'
});
dateFormatter.format(data, 0);
var chartHeight = 400;
var chartWidth = 600;
var chartOptions = {
tooltip: {
isHtml: true
},
title: 'Trendlines with multiple lines',
isStacked: true,
width: chartWidth,
height: chartHeight,
colors: ['#0000D8', '#00dddd'],
hAxis: {
title: 'example title',
slantedText: false,
slantedTextAngle: 45,
textStyle: {
fontSize: 10
},
format: 'dd-MM-yyyy'
},
chartArea: {
left: 50,
top: 20,
width: (chartWidth - 10),
height: (chartHeight - 90)
}
};
chart = new google.visualization.LineChart(document.getElementById('multipleTrendChart'));
chart.draw(data, chartOptions);
}
google.load('visualization', '1', {
packages: ['corechart'],
callback: drawMultipleTrendlineChart
});
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
</script>
</head>
<body>
<div id="multipleTrendChart"></div>
</body>
</html>
After looking at this answer How to change color for negative values, I tried and this works for me. The answer is using DataView API to manipulate the data.
google.charts.load('current', {
callback: drawLineColors,
packages: ['corechart']
});
function drawLineColors() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Blue Team');
data.addColumn('number', 'Red Team');
data.addRows([
[0, 0, 0],
[3, 1700, 1600],
[6, 1800, 1700],
[9, 2500, 2423],
[12, 3000, 2500],
[15, 4700, 5800],
[18, 5200, 5900],
[21, 5500, 6000],
[24, 6000, 6200],
[27, 6800, 6700],
[30, 7500, 7000],
[33, 7800, 8200],
[36, 7900, 9756],
[39, 8000, 10752],
[42, 9000, 13753],
[45, 15000, 17845]
]);
var options = {
legend: {
position: 'top'
},
enableInteractivity: false,
width: 712,
height: 156,
backgroundColor: {
fill: 'transparent'
},
curveType: 'function',
hAxis: {
title: 'Time'
},
vAxis: {
title: 'Team Gold'
}
};
var dataView = new google.visualization.DataView(data);
dataView.setColumns([
// reference first column by index
0,
// variance
{
calc: function(data, row) {
return data.getValue(row, 1);
},
type: 'number',
label: 'Y'
},
// variance color
{
calc: function(data, row) {
var val = data.getValue(row, 2) - data.getValue(row, 1);
if (val >= 0) {
return '#0000FF';
}
return '#FF0000';
},
type: 'string',
role: 'style'
}
]);
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(dataView, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
Using the following google chart how would I go about hiding a line by clicking the legend? It currently has two lines Elec and Gas I would like to be able to hide or show each one based on clicking the corresponding legend. I understand I have to add an event listener function to the chart but Im kinda lost on how to do that on this particular chart. The example i can find are done slightly differently.
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Time', 'Electricity', 'Gas'],
[new Date('2017-05-01'), 12.903, 4.624],
[new Date('2017-05-02'), 15.82, 34.4],
[new Date('2017-05-03'), 9.087, 29.542],
[new Date('2017-05-04'), 11.094, 18.003],
[new Date('2017-05-05'), 10.709, 16.573],
[new Date('2017-05-06'), 10.547, 67.86],
[new Date('2017-05-07'), 22.491, 4.011],
[new Date('2017-05-08'), 14.245, 14.898],
[new Date('2017-05-09'), 0, 0],
[new Date('2017-05-10'), 0, 0],
[new Date('2017-05-11'), 0, 0],
[new Date('2017-05-12'), 0, 0],
[new Date('2017-05-13'), 0, 0],
[new Date('2017-05-14'), 0, 0],
[new Date('2017-05-15'), 0, 0],
[new Date('2017-05-16'), 0, 0],
[new Date('2017-05-17'), 0, 0],
[new Date('2017-05-18'), 0, 0],
[new Date('2017-05-19'), 0, 0],
[new Date('2017-05-20'), 0, 0],
[new Date('2017-05-21'), 0, 0],
[new Date('2017-05-22'), 0, 0],
[new Date('2017-05-23'), 0, 0],
[new Date('2017-05-24'), 0, 0],
[new Date('2017-05-25'), 0, 0],
[new Date('2017-05-26'), 0, 0],
[new Date('2017-05-27'), 0, 0],
[new Date('2017-05-28'), 0, 0],
[new Date('2017-05-29'), 0, 0],
[new Date('2017-05-30'), 0, 0],
[new Date('2017-05-31'), 0, 0],
]);
var dateRange = data.getColumnRange(0);
var oneDay = (1000 * 60 * 60 * 24);
var ticksAxisH = [];
for (var i = dateRange.min.getTime(); i <= dateRange.max.getTime(); i = i + oneDay) {
// add tick every 3 days
if ((((i - dateRange.min.getTime()) / oneDay) % 3) === 0) {
ticksAxisH.push(new Date(i));
}
}
// ensure last day is added
if (ticksAxisH[ticksAxisH.length - 1].getTime() !== dateRange.max.getTime()) {
ticksAxisH.push(dateRange.max);
}
var options = {
chartArea: {
width: "80%"
},
width: 900,
height: 500,
hAxis: {
title: 'Daily Total',
viewWindowMode: 'pretty',
ticks: ticksAxisH,
slantedText: false,
format: 'd MMM yy',
gridlines: {
color: 'transparent'
},
textStyle: {
color: 'black',
fontSize: 12,
fontName: 'Arial',
bold: true,
italic: false,
textAlign: 'right'
},
titleTextStyle: {
color: 'black',
fontSize: 16,
fontName: 'Arial',
bold: true,
italic: false
},
},
vAxis: {
title: 'kWh',
titleTextStyle: {
color: 'black',
fontSize: 16,
fontName: 'Arial',
bold: true,
italic: false
},
textStyle: {
color: 'black',
fontSize: 12,
fontName: 'Arial',
bold: true,
italic: false
},
},
legend: {
position: 'top',
width: "90%"
},
backgroundColor: '#fff',
colors: ['#f36daa', '#51b9d2'],
};
var chart = new google.visualization.AreaChart(document.getElementById('graph-tab-2'));
chart.draw(data, options);
}
I was able to achieve it by adding the following code to the char. See this question and answer for details Show/hide lines/data in Google Chart
var columns = [];
var series = {};
for (var i = 0; i < data.getNumberOfColumns(); i++) {
columns.push(i);
if (i > 0) {
series[i - 1] = {};
}
}
google.visualization.events.addListener(chart, 'select', function () {
var sel = chart.getSelection();
// if selection length is 0, we deselected an element
if (sel.length > 0) {
// if row is undefined, we clicked on the legend
if (sel[0].row === null) {
var col = sel[0].column;
if (columns[col] == col) {
// hide the data series
columns[col] = {
label: data.getColumnLabel(col),
type: data.getColumnType(col),
calc: function () {
return null;
}
};
// grey out the legend entry
series[col - 1].color = '#CCCCCC';
} else {
// show the data series
columns[col] = col;
series[col - 1].color = null;
}
var view = new google.visualization.DataView(data);
view.setColumns(columns);
chart.draw(view, options);
}
}
});
I have an array of [Moment, integer] pairs that I'm plotting in a graph using flot. When I plot the data as a bar chart, the tooltips do not appear.
However if I display the points, or if I convert the chart into a line graph then the tooltips appear.
As the following snippet show, I'm practically using the flot example code. What could be causing the tooltips to fail to display when plotted as a bar chart? Editable JSFiddle is available here.
var people_count_data = [
[moment("2015-05-26T09:15:00+00:00"), 0],
[moment("2015-05-26T09:30:00+00:00"), 0],
[moment("2015-05-26T09:45:00+00:00"), 0],
[moment("2015-05-26T10:00:00+00:00"), 0],
[moment("2015-05-26T10:15:00+00:00"), 0],
[moment("2015-05-26T10:30:00+00:00"), 0],
[moment("2015-05-26T10:45:00+00:00"), 0],
[moment("2015-05-26T11:00:00+00:00"), 0],
[moment("2015-05-26T11:15:00+00:00"), 0],
[moment("2015-05-26T11:30:00+00:00"), 0],
[moment("2015-05-26T11:45:00+00:00"), 2],
[moment("2015-05-26T12:00:00+00:00"), 51],
[moment("2015-05-26T12:15:00+00:00"), 59],
[moment("2015-05-26T12:30:00+00:00"), 72],
[moment("2015-05-26T12:45:00+00:00"), 23],
[moment("2015-05-26T13:00:00+00:00"), 50],
[moment("2015-05-26T13:15:00+00:00"), 55],
[moment("2015-05-26T13:30:00+00:00"), 52],
[moment("2015-05-26T13:45:00+00:00"), 53],
[moment("2015-05-26T14:00:00+00:00"), 39],
[moment("2015-05-26T14:15:00+00:00"), 50],
[moment("2015-05-26T14:30:00+00:00"), 51],
[moment("2015-05-26T14:45:00+00:00"), 55],
[moment("2015-05-26T15:00:00+00:00"), 39],
[moment("2015-05-26T15:15:00+00:00"), 12],
[moment("2015-05-26T15:30:00+00:00"), 0],
[moment("2015-05-26T15:45:00+00:00"), 0],
[moment("2015-05-26T16:00:00+00:00"), 0],
[moment("2015-05-26T16:15:00+00:00"), 0],
[moment("2015-05-26T16:30:00+00:00"), 0],
[moment("2015-05-26T16:45:00+00:00"), 0],
[moment("2015-05-26T17:00:00+00:00"), 0],
[moment("2015-05-26T17:15:00+00:00"), 0],
];
var plotOptions = {
//Options go here
xaxis: {
mode: "time",
reserveSpace: true,
tickLength: 5,
autoscaleMargin: 0.01
},
yaxis: {
min: 0
},
grid: {
hoverable: true,
clickable: true
},
series: {
// If I comment out bars and turn the chart into a line graph, tooltips work(!)
bars: {
show: true
},
// If I show the points on the bar graph, tooltips work(!)
// points: {
// show: true
// }
},
};
var plot1 = $.plot(
'#store-people-count-plot', [{
label: "People Count",
color: "#FC8200",
data: people_count_data
}], plotOptions);
function showTooltip(x, y, contents) {
$("<div id='tooltip'>" + contents + "</div>").css({
position: "absolute",
display: "none",
top: y + 5,
left: x + 5,
border: "1px solid #fdd",
padding: "2px",
"background-color": "#fee",
opacity: 0.80
}).appendTo("body").fadeIn(200);
}
var previousPoint = null;
var hoverCallback = function(event, pos, item) {
if (item) {
if (previousPoint != item.dataIndex) {
previousPoint = item.dataIndex;
var x_moment = moment(item.datapoint[0]);
$("#tooltip").remove();
var y = item.datapoint[1];
var tooltipString = x_moment.format("HH:mm") + ", " + y;
showTooltip(item.pageX, item.pageY,
tooltipString);
}
} else {
$("#tooltip").remove();
previousPoint = null;
}
};
$('#store-people-count-plot').on("plothover", hoverCallback);
#store-people-count-plot {
width: 400px;
height: 300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.3.1/moment-timezone.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.time.js"></script>
<div id="store-people-count-plot"></div>
Your bars are too thin. If you zoom your browser window in and hover your cursor over a bar, the tooltip is displayed. Try widening your bars using the barwidth option:
"barWidth" is the width of the bars in units of the x axis (or the y axis if "horizontal" is true), contrary to most other measures that are specified in pixels. For instance, for time series the unit is milliseconds so 24 * 60 * 60 * 1000 produces bars with the width of a day.
I've modified your options and set the barWidth to 10 minutes, and the tooltip works.
var people_count_data = [
[moment("2015-05-26T09:15:00+00:00"), 0],
[moment("2015-05-26T09:30:00+00:00"), 0],
[moment("2015-05-26T09:45:00+00:00"), 0],
[moment("2015-05-26T10:00:00+00:00"), 0],
[moment("2015-05-26T10:15:00+00:00"), 0],
[moment("2015-05-26T10:30:00+00:00"), 0],
[moment("2015-05-26T10:45:00+00:00"), 0],
[moment("2015-05-26T11:00:00+00:00"), 0],
[moment("2015-05-26T11:15:00+00:00"), 0],
[moment("2015-05-26T11:30:00+00:00"), 0],
[moment("2015-05-26T11:45:00+00:00"), 2],
[moment("2015-05-26T12:00:00+00:00"), 51],
[moment("2015-05-26T12:15:00+00:00"), 59],
[moment("2015-05-26T12:30:00+00:00"), 72],
[moment("2015-05-26T12:45:00+00:00"), 23],
[moment("2015-05-26T13:00:00+00:00"), 50],
[moment("2015-05-26T13:15:00+00:00"), 55],
[moment("2015-05-26T13:30:00+00:00"), 52],
[moment("2015-05-26T13:45:00+00:00"), 53],
[moment("2015-05-26T14:00:00+00:00"), 39],
[moment("2015-05-26T14:15:00+00:00"), 50],
[moment("2015-05-26T14:30:00+00:00"), 51],
[moment("2015-05-26T14:45:00+00:00"), 55],
[moment("2015-05-26T15:00:00+00:00"), 39],
[moment("2015-05-26T15:15:00+00:00"), 12],
[moment("2015-05-26T15:30:00+00:00"), 0],
[moment("2015-05-26T15:45:00+00:00"), 0],
[moment("2015-05-26T16:00:00+00:00"), 0],
[moment("2015-05-26T16:15:00+00:00"), 0],
[moment("2015-05-26T16:30:00+00:00"), 0],
[moment("2015-05-26T16:45:00+00:00"), 0],
[moment("2015-05-26T17:00:00+00:00"), 0],
[moment("2015-05-26T17:15:00+00:00"), 0],
];
var plotOptions = {
//Options go here
xaxis: {
mode: "time",
reserveSpace: true,
tickLength: 5,
autoscaleMargin: 0.01
},
yaxis: {
min: 0
},
grid: {
hoverable: true,
clickable: true
},
series: {
// If I comment out bars and turn the chart into a line graph, tooltips work(!)
bars: {
show: true,
barWidth: 60*10*1000
},
// If I show the points on the bar graph, tooltips work(!)
// points: {
// show: true
// }
},
};
var plot1 = $.plot(
'#store-people-count-plot', [{
label: "People Count",
color: "#FC8200",
data: people_count_data
}], plotOptions);
function showTooltip(x, y, contents) {
$("<div id='tooltip'>" + contents + "</div>").css({
position: "absolute",
display: "none",
top: y + 5,
left: x + 5,
border: "1px solid #fdd",
padding: "2px",
"background-color": "#fee",
opacity: 0.80
}).appendTo("body").fadeIn(200);
}
var previousPoint = null;
var hoverCallback = function(event, pos, item) {
if (item) {
if (previousPoint != item.dataIndex) {
previousPoint = item.dataIndex;
var x_moment = moment(item.datapoint[0]);
$("#tooltip").remove();
var y = item.datapoint[1];
var tooltipString = x_moment.format("HH:mm") + ", " + y;
showTooltip(item.pageX, item.pageY,
tooltipString);
}
} else {
$("#tooltip").remove();
previousPoint = null;
}
};
$('#store-people-count-plot').on("plothover", hoverCallback);
#store-people-count-plot {
width: 400px;
height: 300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.3.1/moment-timezone.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.time.js"></script>
<div id="store-people-count-plot"></div>
Using google charts API with line chart controlled by range finder.I am stuck with two annoying issues:
The control has extra space before and after the data values it was set to follow, leaving an ugly space the control can slide to.
I can not seem to get the control to snap to data value.
If you can give me a pointer what I am doing wrong I will appreciate it a lot.
I set a JSfiddle here: http://jsfiddle.net/Db4fm/2/
Thank you very much!
JS
function drawChart() {
var activity_breakdown = [
['Text Index', 'Numeric Index', 'totals', 'Value 1', 'Value 2', 'Value 3',
'Value 4', 'Value 5', 'Value 6', 'Value 7'],
['W15', 1, 13, 2, 0, 20, 2, 1, 0, 0],
['W16', 2, 20, 0, 1, 10, 3, 0, 0, 2],
['W17', 3, 19, 3, 0, 20, 2, 0, 2, 0],
['W18', 4, 31, 0, 2, 10, 4, 1, 0, 3],
['W19', 5, 11, 1, 0, 10, 2, 0, 3, 0],
['W20', 6, 26, 0, 0, 10, 6, 0, 0, 4],
['W21', 7, 39, 2, 0, 30, 2, 1, 2, 0],
['W22', 8, 41, 0, 3, 10, 7, 0, 0, 0],
['Today', 9, 44, 0, 1, 20, 2, 1, 0, 5]
];
// Data table
var data1 = google.visualization.arrayToDataTable(activity_breakdown);
// Chart
var chart1 = new google.visualization.ChartWrapper({
chartType: 'ColumnChart',
containerId: 'chart_activity',
dataTable: data,
options: {
width: 950,
height: 300,
chartArea: {
left: 40,
top: 20,
width: 700,
height: 250
},
legend: {
position: 'right',
textStyle: {
fontSize: 13
}
}
},
view: {
columns: [0, 3, 4, 5, 6, 7, 8, 9]
}
});
var control1 = new google.visualization.ControlWrapper({
'controlType': 'ChartRangeFilter',
'containerId': 'control_activity',
'options': {
// Filter by the date axis.
'filterColumnIndex': 1,
'ui': {
'chartType': 'LineChart',
'snapToData': true, // this bugger is not working
'chartOptions': {
width: 950,
height: 50,
chartArea: {
left: 40,
top: 0,
width: 700,
height: 50
},
'hAxis': {
textPosition: 'none'
}
},
'chartView': {
'columns': [0, 2]
},
'minRangeSize': 1
}
},
'state': {
'range': {
'start': 7,
'end': 8
}
}
});
var dashboard1 = new google.visualization.Dashboard(
document.getElementById('dashboard_activity'));
// Draw
dashboard1.bind(control1, chart1);
dashboard1.draw(data1);
google.visualization.events.addListener(control1, 'statechange', function () {
var v = control1.getState();
document.getElementById('dbgchart').innerHTML = v.range.start + ' -> ' +
v.range.end;
return 0;
});
// FSM knows why but without this line this line the code will not run...
var data = new google.visualization.DataTable();
}
google.load('visualization', '1.1', {
packages: ['corechart', 'controls']
});
google.setOnLoadCallback(drawChart);
HTML
<div id="dashboard_activity">
<div id="chart_activity"></div>
<div id="control_activity"></div>
</div>
<p>Debug range: <span id="dbgchart">Init</span></p>
The space before and after your data values is a result of setting your range filter's chart's domain axis to axis 0, which is a "string" type axis. If you want the line to go edge-to-edge, the domain axis has to be a continuous data type ("number", "date", "datetime", "timeofday"). If you change the control's chart's view.columns parameter to [1, 2], the spaces will go away:
var control1 = new google.visualization.ControlWrapper({
controlType: 'ChartRangeFilter',
containerId: 'control_activity',
options: {
filterColumnIndex: 1,
ui: {
chartType: 'LineChart',
snapToData: true, // this bugger is not working
chartOptions: {
width: 950,
height: 50,
chartArea: {
left: 40,
top: 0,
width: 700,
height: 50
},
hAxis: {
textPosition: 'none'
}
},
chartView: {
columns: [1, 2]
},
minRangeSize: 1
}
},
state: {
range: {
start: 7,
end: 8
}
}
});
I couldn't replicate your problem with the ui.snapToData option.
Updated jsfiddle with fix: http://jsfiddle.net/asgallant/Db4fm/3/
Change line 67 to as follows:
'columns': [1, 2]
jsFiddle: http://jsfiddle.net/Db4fm/4/