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>
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>
I used the following example to create a drop down menu: https://jsfiddle.net/asgallant/WaUu2/ which makes it possible to select a column and then show the line on the graph.
But I also want to use a ChartRangeFilter but the problem is this method doesn't use a dashboard so I have no clue were to start to make everything work together. And most of the examples I found use this dashboard method.
I want it to approximately to be like this example http://jsfiddle.net/x7pyk55q/4/ but would like to keep filtering on the columns.
It would be nice if someone could provide me an example how to do it the right way. I'm a bit new when it comes to this.
My code:
<html>
<head>
<title>Temperature Chart</title>
<link rel="stylesheet" type="text/css" href="graph.css">
<!--Load the Ajax API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.load('visualization', '1.1', {'packages':['controls','corechart']});
</script>
</head>
<body>
<!--this is the div that will hold the pie chart-->
<div id="colFilter_div"></div>
<div id="chart_div"></div>
<script language="JavaScript">
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
function drawChart() {
// Create our data table out of JSON data loaded from server.
var jsonData = "{\"cols\":[{\"id\":\"\",\"label\":\"datetime\",\"type\":\"datetime\"},{\"id\":\"\",\"label\":\"RPI1\",\"type\":\"number\"},{\"id\":\"\",\"label\":\"RPI2\",\"type\":\"number\"}],\"rows\":[{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 40, 41)\"},{\"v\":\"22\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 40, 52)\"},{\"v\":\"21\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 41, 2)\"},{\"v\":\"22\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 41, 12)\"},{\"v\":\"20\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 41, 22)\"},{\"v\":\"21\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 41, 32)\"},{\"v\":\"21\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 41, 43)\"},{\"v\":\"21\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 41, 53)\"},{\"v\":\"20\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 42, 3)\"},{\"v\":\"21\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 42, 13)\"},{\"v\":\"22\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 42, 23)\"},{\"v\":\"21\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 42, 34)\"},{\"v\":\"21\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 42, 44)\"},{\"v\":\"20\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 42, 54)\"},{\"v\":\"19\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 43, 4)\"},{\"v\":\"20\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 43, 15)\"},{\"v\":\"22\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 43, 25)\"},{\"v\":\"20\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 43, 35)\"},{\"v\":\"20\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 43, 45)\"},{\"v\":\"20\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 43, 55)\"},{\"v\":\"20\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 44, 6)\"},{\"v\":\"20\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 44, 16)\"},{\"v\":\"19\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 44, 26)\"},{\"v\":\"20\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 44, 36)\"},{\"v\":\"20\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 44, 47)\"},{\"v\":\"20\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 44, 57)\"},{\"v\":\"20\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 45, 7)\"},{\"v\":\"19\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 45, 17)\"},{\"v\":\"20\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 45, 27)\"},{\"v\":\"21\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 45, 38)\"},{\"v\":\"21\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 45, 48)\"},{\"v\":\"21\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 45, 58)\"},{\"v\":\"23\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 46, 8)\"},{\"v\":\"23\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 46, 18)\"},{\"v\":null},{\"v\":\"24\"}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 46, 29)\"},{\"v\":null},{\"v\":\"22\"}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 46, 39)\"},{\"v\":null},{\"v\":\"22\"}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 46, 49)\"},{\"v\":null},{\"v\":\"21\"}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 46, 59)\"},{\"v\":null},{\"v\":\"21\"}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 47, 10)\"},{\"v\":null},{\"v\":\"22\"}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 47, 20)\"},{\"v\":null},{\"v\":\"21\"}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 47, 30)\"},{\"v\":null},{\"v\":\"21\"}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 47, 40)\"},{\"v\":null},{\"v\":\"22\"}]}]}"
var data = new google.visualization.DataTable(JSON.parse(jsonData));
// return the JSON data in console
console.log(JSON.stringify(data));
var columnsTable = new google.visualization.DataTable();
columnsTable.addColumn('number', 'colIndex');
columnsTable.addColumn('string', 'colLabel');
var initState= {selectedValues: []};
// put the columns into this data table (skip column 0)
for (var i = 1; i < data.getNumberOfColumns(); i++) {
columnsTable.addRow([i, data.getColumnLabel(i)]);
}
initState.selectedValues.push(data.getColumnLabel(1));
var chart = new google.visualization.ChartWrapper({
chartType: 'LineChart',
containerId: 'chart_div',
dataTable: data,
options: {
title: 'Temps',
width: 1600,
height: 600,
hAxis:{
title:'DateTime'
},
vAxis:{
title: 'Temperature',
}
}
});
var columnFilter = new google.visualization.ControlWrapper({
controlType: 'CategoryFilter',
containerId: 'colFilter_div',
dataTable: columnsTable,
options: {
filterColumnLabel: 'colLabel',
ui: {
label:'',
caption: 'Select RPI',
allowTyping: false,
allowMultiple: true,
allowNone: false,
selectedValuesLayout: 'aside'
}
},
state: initState
});
function setChartView () {
var state = columnFilter.getState();
var row;
var view = {
columns: [0]
};
for (var i = 0; i < state.selectedValues.length; i++) {
row = columnsTable.getFilteredRows([{column: 1, value: state.selectedValues[i]}])[0];
view.columns.push(columnsTable.getValue(row, 0));
}
// sort the indices into their original order
view.columns.sort(function (a, b) {
return (a - b);
});
chart.setView(view);
chart.draw();
}
google.visualization.events.addListener(columnFilter, 'statechange', setChartView);
setChartView();
columnFilter.draw();
}
</script>
</body>
</html>
you can use the ChartRangeFilter to set the view.rows
similar to how the CategoryFilter sets the view.columns
when the 'statechange' event fires on the ChartRangeFilter,
use it's state to filter the rows for the range selected,
then redraw the chart
the ChartRangeFilter should be drawn using the same data and view as the chart
and re-drawn when the CategoryFilter changes
see following working snippet...
google.charts.load('current', {
callback: drawChart,
packages:['controls','corechart']
});
function drawChart() {
// Create our data table out of JSON data loaded from server.
var jsonData = "{\"cols\":[{\"id\":\"\",\"label\":\"datetime\",\"type\":\"datetime\"},{\"id\":\"\",\"label\":\"RPI1\",\"type\":\"number\"},{\"id\":\"\",\"label\":\"RPI2\",\"type\":\"number\"}],\"rows\":[{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 40, 41)\"},{\"v\":\"22\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 40, 52)\"},{\"v\":\"21\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 41, 2)\"},{\"v\":\"22\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 41, 12)\"},{\"v\":\"20\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 41, 22)\"},{\"v\":\"21\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 41, 32)\"},{\"v\":\"21\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 41, 43)\"},{\"v\":\"21\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 41, 53)\"},{\"v\":\"20\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 42, 3)\"},{\"v\":\"21\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 42, 13)\"},{\"v\":\"22\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 42, 23)\"},{\"v\":\"21\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 42, 34)\"},{\"v\":\"21\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 42, 44)\"},{\"v\":\"20\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 42, 54)\"},{\"v\":\"19\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 43, 4)\"},{\"v\":\"20\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 43, 15)\"},{\"v\":\"22\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 43, 25)\"},{\"v\":\"20\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 43, 35)\"},{\"v\":\"20\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 43, 45)\"},{\"v\":\"20\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 43, 55)\"},{\"v\":\"20\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 44, 6)\"},{\"v\":\"20\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 44, 16)\"},{\"v\":\"19\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 44, 26)\"},{\"v\":\"20\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 44, 36)\"},{\"v\":\"20\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 44, 47)\"},{\"v\":\"20\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 44, 57)\"},{\"v\":\"20\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 45, 7)\"},{\"v\":\"19\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 45, 17)\"},{\"v\":\"20\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 45, 27)\"},{\"v\":\"21\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 45, 38)\"},{\"v\":\"21\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 45, 48)\"},{\"v\":\"21\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 45, 58)\"},{\"v\":\"23\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 46, 8)\"},{\"v\":\"23\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 46, 18)\"},{\"v\":null},{\"v\":\"24\"}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 46, 29)\"},{\"v\":null},{\"v\":\"22\"}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 46, 39)\"},{\"v\":null},{\"v\":\"22\"}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 46, 49)\"},{\"v\":null},{\"v\":\"21\"}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 46, 59)\"},{\"v\":null},{\"v\":\"21\"}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 47, 10)\"},{\"v\":null},{\"v\":\"22\"}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 47, 20)\"},{\"v\":null},{\"v\":\"21\"}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 47, 30)\"},{\"v\":null},{\"v\":\"21\"}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 47, 40)\"},{\"v\":null},{\"v\":\"22\"}]}]}"
var data = new google.visualization.DataTable(JSON.parse(jsonData));
var columnsTable = new google.visualization.DataTable();
columnsTable.addColumn('number', 'colIndex');
columnsTable.addColumn('string', 'colLabel');
var initState= {selectedValues: []};
// put the columns into this data table (skip column 0)
for (var i = 1; i < data.getNumberOfColumns(); i++) {
columnsTable.addRow([i, data.getColumnLabel(i)]);
}
initState.selectedValues.push(data.getColumnLabel(1));
var chart = new google.visualization.ChartWrapper({
chartType: 'LineChart',
containerId: 'chart_div',
dataTable: data,
options: {
title: 'Temps',
width: 1600,
height: 600,
hAxis:{
title:'DateTime'
},
vAxis:{
title: 'Temperature',
}
}
});
var rangeFilter = new google.visualization.ControlWrapper({
controlType: 'ChartRangeFilter',
containerId: 'rngFilter_div',
dataTable: data,
options: {
filterColumnIndex: 0,
ui: {
chartOptions: {
width: 1600,
height: 200,
hAxis:{
title:'DateTime'
},
vAxis:{
title: 'Temperature'
}
}
}
}
});
var columnFilter = new google.visualization.ControlWrapper({
controlType: 'CategoryFilter',
containerId: 'colFilter_div',
dataTable: columnsTable,
options: {
filterColumnLabel: 'colLabel',
ui: {
label:'',
caption: 'Select RPI',
allowTyping: false,
allowMultiple: true,
allowNone: false,
selectedValuesLayout: 'aside'
}
},
state: initState
});
function setChartViewCols () {
var state = columnFilter.getState();
var row;
var view = {
columns: [0]
};
for (var i = 0; i < state.selectedValues.length; i++) {
row = columnsTable.getFilteredRows([{column: 1, value: state.selectedValues[i]}])[0];
view.columns.push(columnsTable.getValue(row, 0));
}
// sort the indices into their original order
view.columns.sort(function (a, b) {
return (a - b);
});
view.rows = null;
chart.setView(view);
chart.draw();
rangeFilter.setView(view);
rangeFilter.setState();
rangeFilter.draw();
}
google.visualization.events.addListener(columnFilter, 'statechange', setChartViewCols);
function setChartViewRows () {
var state = rangeFilter.getState();
var view = chart.getView();
view.rows = rangeFilter.getDataTable().getFilteredRows([{
column: 0,
minValue: state.range.start,
maxValue: state.range.end
}]);
chart.setView(view);
chart.draw();
}
google.visualization.events.addListener(rangeFilter, 'statechange', setChartViewRows);
setChartViewCols();
columnFilter.draw();
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="colFilter_div"></div>
<div id="chart_div"></div>
<div id="rngFilter_div"></div>
note:
recommend using loader.js to load the library, instead of jsapi
according to the release notes...
The version of Google Charts that remains available via the jsapi loader is no longer being updated consistently. Please use the new gstatic loader from now on.
<script src="https://www.gstatic.com/charts/loader.js"></script>
this will only change the load statement
google.charts.load('current', {packages:['controls','corechart']});
you can also include the callback in the load statement, as in the above snippet...
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/