Change default marker in Google GeoMap

Change default marker in Google GeoMap - javascript

I use Google Charts API, not Maps.
I have this function. I want to make marker animated, so I want to change the default circle to gif image. How should I do it? Is it possible?
google.charts.load('current', {
callback: function () {
var chart = new window.google.visualization.GeoChart(document.getElementById('chart_div'));
var options = {
displayMode: 'markers',
sizeAxis: {
minSize: 3
},
backgroundColor: {
fill: '#303030'
},
colorAxis: {
colors: ['#FBFE72', '#FEB86B', '#EE683C']
},
legend: 'none',
region: 'US',
datalessRegionColor: '#289499'
};
var data;
data = new window.google.visualization.DataTable();
data.addColumn('number', 'Lat');
data.addColumn('number', 'Long');
data.addColumn('string', 'Name');
data.addColumn('number', 'Count');
data.addRows(1);
data.setValue(0, 0, -120);
data.setValue(0, 1, 2);
data.setValue(0, 2, 'Test');
data.setValue(0, 3, 1);
chart.draw(data, options);
},
packages:['geochart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://www.google.com/jsapi"></script>
<div id="chart_div"></div>

Related

How to reduce gap between haxis and annotation value in line chart using google api

I am creating line chart using google api. I want to reduce gap between haxis line and annotation value label. I will shown the actual image.
var data = new google.visualization.DataTable();
data.addColumn('string', '');
data.addColumn({type: 'string', role: 'annotation'});
data.addColumn('number', '');
data.addColumn({type: 'string', role: 'annotation'});
data.addRows([['2014', '20%', 63569, '63569']]);
data.addRows([['2014', '20%', 62034, '62034']]);
data.addRows([['2014', '19%', 60605, '60605']]);
data.addRows([['2014', '19%', 60605, '60605']]);
var chart = new google.visualization.LineChart(document.getElementById('chart_div));
chart.draw(data, options);

you can use option --> annotations.stem.length
set length to 0 to reduce the gap
annotations: {
stem: {
length: 0
}
}
adjust the series option to adjust for the y-axis annotations
see following working snippet...
google.charts.load('current', {
callback: drawChart,
packages: ['corechart']
});
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', '');
data.addColumn({type: 'string', role: 'annotation'});
data.addColumn('number', '');
data.addColumn({type: 'string', role: 'annotation'});
data.addRows([['2014', '20%', 63569, '63569']]);
data.addRows([['2015', '20%', 62034, '62034']]);
data.addRows([['2016', '19%', 60605, '60605']]);
data.addRows([['2017', '19%', 57467, '57467']]);
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, {
annotations: {
stem: {
length: 0
},
textStyle: {
bold: true,
color: '#000000'
}
},
backgroundColor: '#fbe9e7',
colors: ['#ffc107'],
legend: 'none',
pointSize: 8,
series: {
0: {
annotations: {
stem: {
color: 'transparent',
length: 12
}
}
}
},
vAxis: {
gridlines: {
count: 0
}
}
});
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Dynamic Bar Chart in MVC Application

I am trying to create a dynamic bar chart in a MVC application in Visual Studio
<input type="button" value="Add Column" onclick="add('Work',20)" class="btn btn-default btn-sm" />
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
<script>
var myObj = { "Elicit": 16, "Design": 23, "Code": 17, "Test": 24, "Deploy": 20 };
var myJSON = JSON.stringify(myObj);
var obj2 = JSON.parse(myJSON);
var v1 = obj2.Elicit;
var v2 = obj2.Design;
var v3 = obj2.Code;
var v4 = obj2.Test;
var v5 = obj2.Deploy;
google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawTrendlines);
function drawTrendlines() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Items');
data.addColumn('number', 'Sales');
data.addRows([
['Elicitation', v1],
['Design', v2],
['Code', v3],
['Test', v4],
['Deploy', v5],
]);
var options = {
title: 'Project Division',
trendlines: {
0: {type: 'linear', lineWidth: 5, opacity: .3},
1: { type: 'exponential', lineWidth: 10, opacity: .3 },
2: {type: 'curve', lineWidth: 10, opacity: .3}
},
hAxis: {
title: 'Time of Day'
},
vAxis: {
title: 'Rating (scale of 1-10)'
},
colors: ['#80ccff', '#85e085', '#ffb84d', '#b3b3ff', '#ffb3ff'],
backgroundColor: '#f1f2f7',
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
function add(name,val)
{
var data = new google.visualization.DataTable();
data.addColumn('string', 'Items');
data.addColumn('number', 'Sales');
data.addRows([
['Elicitation', v1],
['Design', v2],
['Code', v3],
['Test', v4],
['Deploy', v5],
[name, val]
]);
var options = {
title: 'Project Division',
trendlines: {
0: { type: 'linear', lineWidth: 5, opacity: .3 },
1: { type: 'exponential', lineWidth: 10, opacity: .3 },
2: { type: 'curve', lineWidth: 10, opacity: .3 }
},
hAxis: {
title: 'Time of Day'
},
vAxis: {
title: 'Rating (scale of 1-10)'
},
colors: ['#80ccff', '#85e085', '#ffb84d', '#b3b3ff', '#ffb3ff'],
backgroundColor: '#f1f2f7',
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
where I can add and remove data displayed in the bar chart. I tried multiple ways but none of them seem to work.
Finally what I was able to do was add one additional column using variable name and value. However, it is not practical to have preset constructors for lets say 1 additional column, 2 columns and so on. Furthermore this does not allow me to delete columns. What can I do to solve this?

Google chart - role: annotation in candlestick bar [duplicate]

i'm trying to use Google Chart API for building an Waterfall chart. I noticed that Candlestick/Waterfall charts are not supporting the annotations.
See this jsfiddle sample
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Category');
data.addColumn('number', 'MinimumLevel');
data.addColumn('number', 'MinimumLevel1');
data.addColumn('number', 'MaximumLevel');
data.addColumn('number', 'MaximumLevel1');
data.addColumn({type: 'number', role: 'tooltip'});
data.addColumn({type: 'string', role: 'style'});
data.addColumn({type: 'number', role: 'annotation'});
data.addRow(['Category 1', 0 , 0, 5, 5, 5,'gray',5]);
data.addRow(['Category 2', 5 , 5, 10, 10, 10,'red',10]);
data.addRow(['Category 3', 10 , 10, 15, 15, 15,'blue',15]);
data.addRow(['Category 4', 15 , 15, 10, 10, 10,'yellow',10]);
data.addRow(['Category 5', 10 , 10, 5, 5, 5,'gray',5]);
var options = {
legend: 'none',
bar: { groupWidth: '60%' } // Remove space between bars.
};
var chart = new google.visualization.CandlestickChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
I would like to put the value of the 5th column at the top of every candlestick.
It should look like this :
Is there a way to do this?
Thanks

I add annotations to candlestick charts by adding annotations to a hidden scatter plot. You can set exactly where you want the annotations to sit by changing the plot.
google.charts.load('current', { 'packages': ['corechart'] });
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Low');
data.addColumn('number', 'Open');
data.addColumn('number', 'Close');
data.addColumn('number', 'High');
data.addColumn('number'); //scatter plot for annotations
data.addColumn({ type: 'string', role: 'annotation' }); // annotation role col.
data.addColumn({ type: 'string', role: 'annotationText' }); // annotationText col.
var high, low, open, close = 160;
for (var i = 0; i < 10; i++) {
open = close;
close += ~~(Math.random() * 10) * Math.pow(-1, ~~(Math.random() * 2));
high = Math.max(open, close) + ~~(Math.random() * 10);
low = Math.min(open, close) - ~~(Math.random() * 10);
annotation = '$' + close;
annotation_text = 'Close price: $' + close;
data.addRow([new Date(2014, 0, i + 1), low, open, close, high, high, annotation, annotation_text]);
}
var view = new google.visualization.DataView(data);
var chart = new google.visualization.ComboChart(document.querySelector('#chart_div'));
chart.draw(view, {
height: 400,
width: 600,
explorer: {},
chartArea: {
left: '7%',
width: '70%'
},
series: {
0: {
color: 'black',
type: 'candlesticks',
},
1: {
type: 'scatter',
pointSize: 0,
targetAxisIndex: 0,
},
},
candlestick: {
color: '#a52714',
fallingColor: { strokeWidth: 0, fill: '#a52714' }, // red
risingColor: { strokeWidth: 0, fill: '#0f9d58' } // green
},
});
}
<script type="text/javascript"src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div" style="width: 900px; height: 500px;"></div>

just so happens, i ran into the same problem this week
so I added my own annotations, during the 'animationfinish' event
see following working snippet...
google.charts.load('current', {
callback: drawChart,
packages:['corechart']
});
function drawChart() {
var dataChart = new google.visualization.DataTable({"cols":[{"label":"Category","type":"string"},{"label":"Bottom 1","type":"number"},{"label":"Bottom 2","type":"number"},{"label":"Top 1","type":"number"},{"label":"Top 2","type":"number"},{"role":"style","type":"string","p":{"role":"style"}}],"rows":[{"c":[{"v":"Budget"},{"v":0},{"v":0},{"v":22707893.613},{"v":22707893.613},{"v":"#007fff"}]},{"c":[{"v":"Contract Labor"},{"v":22707893.613},{"v":22707893.613},{"v":22534350.429},{"v":22534350.429},{"v":"#1e8449"}]},{"c":[{"v":"Contract Non Labor"},{"v":22534350.429},{"v":22534350.429},{"v":22930956.493},{"v":22930956.493},{"v":"#922b21"}]},{"c":[{"v":"Materials and Equipment"},{"v":22930956.493},{"v":22930956.493},{"v":22800059.612},{"v":22800059.612},{"v":"#1e8449"}]},{"c":[{"v":"Other"},{"v":22800059.612},{"v":22800059.612},{"v":21993391.103},{"v":21993391.103},{"v":"#1e8449"}]},{"c":[{"v":"Labor"},{"v":21993391.103},{"v":21993391.103},{"v":21546003.177999996},{"v":21546003.177999996},{"v":"#1e8449"}]},{"c":[{"v":"Travel"},{"v":21546003.177999996},{"v":21546003.177999996},{"v":21533258.930999994},{"v":21533258.930999994},{"v":"#1e8449"}]},{"c":[{"v":"Training"},{"v":21533258.930999994},{"v":21533258.930999994},{"v":21550964.529999994},{"v":21550964.529999994},{"v":"#922b21"}]},{"c":[{"v":"Actual"},{"v":0},{"v":0},{"v":21550964.52999999},{"v":21550964.52999999},{"v":"#007fff"}]}]});
var waterFallChart = new google.visualization.ChartWrapper({
chartType: 'CandlestickChart',
containerId: 'chart_div',
dataTable: dataChart,
options: {
animation: {
duration: 1500,
easing: 'inAndOut',
startup: true
},
backgroundColor: 'transparent',
bar: {
groupWidth: '85%'
},
chartArea: {
backgroundColor: 'transparent',
height: 210,
left: 60,
top: 24,
width: '100%'
},
hAxis: {
slantedText: false,
textStyle: {
color: '#616161',
fontSize: 9
}
},
height: 272,
legend: 'none',
tooltip: {
isHtml: true,
trigger: 'both'
},
vAxis: {
format: 'short',
gridlines: {
count: -1
},
textStyle: {
color: '#616161'
},
viewWindow: {
max: 24000000,
min: 16000000
}
},
width: '100%'
}
});
google.visualization.events.addOneTimeListener(waterFallChart, 'ready', function () {
google.visualization.events.addListener(waterFallChart.getChart(), 'animationfinish', function () {
var annotation;
var chartLayout;
var container;
var numberFormatShort;
var positionY;
var positionX;
var rowBalance;
var rowBottom;
var rowFormattedValue;
var rowIndex;
var rowTop;
var rowValue;
var rowWidth;
container = document.getElementById(waterFallChart.getContainerId());
chartLayout = waterFallChart.getChart().getChartLayoutInterface();
numberFormatShort = new google.visualization.NumberFormat({
pattern: 'short'
});
rowIndex = 0;
Array.prototype.forEach.call(container.getElementsByTagName('rect'), function(rect) {
switch (rect.getAttribute('fill')) {
// use colors to identify bars
case '#922b21':
case '#1e8449':
case '#007fff':
rowWidth = parseFloat(rect.getAttribute('width'));
if (rowWidth > 2) {
rowBottom = waterFallChart.getDataTable().getValue(rowIndex, 1);
rowTop = waterFallChart.getDataTable().getValue(rowIndex, 3);
rowValue = rowTop - rowBottom;
rowBalance = Math.max(rowBottom, rowTop);
positionY = chartLayout.getYLocation(rowBalance) - 6;
positionX = parseFloat(rect.getAttribute('x'));
rowFormattedValue = numberFormatShort.formatValue(rowValue);
if (rowValue < 0) {
rowFormattedValue = rowFormattedValue.replace('-', '');
rowFormattedValue = '(' + rowFormattedValue + ')';
}
annotation = container.getElementsByTagName('svg')[0].appendChild(container.getElementsByTagName('text')[0].cloneNode(true));
$(annotation).text(rowFormattedValue);
annotation.setAttribute('x', (positionX + (rowWidth / 2)));
annotation.setAttribute('y', positionY);
annotation.setAttribute('font-weight', 'bold');
rowIndex++;
}
break;
}
});
});
});
$(window).resize(function() {
waterFallChart.draw();
});
waterFallChart.draw();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

generating graph using google API in java

I am trying to create graph for 'sale v/s return' in my project. I am using google API with Java and data from DB. My code is as below,
JS code:
google.charts.load('current', {packages: ['corechart', 'line']});
google.charts.setOnLoadCallback(drawTrendlines);
function drawTrendlines() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'X');
data.addColumn('number', 'Sale');
data.addColumn('number', 'Return');
var bb="BPS40L 1 Y";
var jsonData = $.ajax({
url: "chart?icd="+bb+"&opt="+1,
type: "post",
dataType: "json",
async: false
}).responseText;
var data = google.visualization.arrayToDataTable(jsonData);
var options = {
hAxis: {
title: "day"
},
vAxis: {
title: "Sales"
},
colors: ['#AB0D06', '#007329'],
trendlines: {
0: {type: 'exponential', color: '#333', opacity: 1},
1: {type: 'linear', color: '#111', opacity: .3}
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options, {width: 600, height: 540});
}
});
Java Code:
ArrayList mn1 = new ArrayList();
while (rs.next()) {
JSONObject aListcounter = new JSONObject();
aListcounter.put(i,i);
aListcounter.put("sale",rs.getInt("SLQ"));
aListcounter.put("return",rs.getInt("RTQ"));
mn1.add(aListcounter);
i+=3;
}
rs.close();
ps.close();
response.setContentType("application/json");
//new Gson().toJson(list2, response.getWriter());
JSONObject jObj = new JSONObject();
jObj.put("data",mn1);
out.println(mn1);
I am getting output from server as below:
[{"0":0,"sale":"3","return":"13"},{"1":1,"sale":"23","return":"23"}]
No graph is generated. Getting error message: "not an array"

You need to change the data sent by the server so it has this format:
[
["X", "Sale", "Return"],
[0, 3, 13],
[1, 23, 23]
]
google.charts.load('current', {
packages: ['corechart']
});
google.charts.setOnLoadCallback(drawTrendlines);
function drawTrendlines() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'X');
data.addColumn('number', 'Sale');
data.addColumn('number', 'Return');
var bb = "BPS40L 1 Y";
var jsonData =
[
["X", "Sale", "Return"],
[0, 3, 13],
[1, 23, 23]
];
var data = google.visualization.arrayToDataTable(jsonData);
var options = {
hAxis: {
title: "day"
},
vAxis: {
title: "Sales"
},
colors: ['#AB0D06', '#007329'],
trendlines: {
0: {
type: 'exponential',
color: '#333',
opacity: 1
},
1: {
type: 'linear',
color: '#111',
opacity: .3
}
}
};
var chart =
new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options, {
width: 600,
height: 540
});
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Google Charts: ChartRangeFilter and CategoryFilter with discontinuous DataTable

I'm trying to use Google Charts to display multiple curves in a LineChart with two controls: CategoryFilter and ChartRangeFilter.
I want ChartRangeFilter to display only selected columns in CategoryFilter, but I often get exceptions:
One or more participants failed to draw()
and/or
undefined is not an object (evaluating 'd[0].x')
I think the problem is that the data I need to show are discontinuous, here's an example:
var data = new google.visualization.DataTable();
data.addColumn('date', 'DATE');
data.addColumn('number', 'DATA.1');
data.addColumn('number', 'DATA.2');
data.addColumn('number', 'DATA.3');
data.addRows
([
[new Date(2016,9,19), 18, null, null],
[new Date(2016,9,20), 24, null, null],
[new Date(2016,9,21), 41, null, null],
[new Date(2016,9,22), 47, null, null],
[new Date(2016,9,23), 60, null, null],
[new Date(2016,9,24), 79, null, null],
[new Date(2016,9,25), null, 3, null],
[new Date(2016,9,26), null, 4, null],
[new Date(2016,9,27), null, 10, null],
[new Date(2016,9,28), null, 11, 123],
[new Date(2016,9,29), null, 4, 130],
[new Date(2016,9,30), 6, null, 132],
]);
and a code snippet of my chart:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<title>NEW CHART</title>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
.labels{font-size: 50%;}
</style>
<script type="text/javascript" src="../cal/formatDate.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
//-------------------------------------------------------------------GOOGLE CHARTS ->
google.charts.load('current', {'packages':['corechart', 'controls']});
google.charts.setOnLoadCallback(drawChart);
function drawChart ()
{
var data = new google.visualization.DataTable();
data.addColumn('date', 'DATE');
data.addColumn('number', 'DATA.1');data.addColumn('number', 'DATA.2');data.addColumn('number', 'DATA.3');
data.addRows
([
[new Date(2016,9,19),18,null,null],
[new Date(2016,9,20),24,null,null],
[new Date(2016,9,21),41,null,null],
[new Date(2016,9,22),47,null,null],
[new Date(2016,9,23),60,null,null],
[new Date(2016,9,24),79,null,null],
[new Date(2016,9,25),null,3,null],
[new Date(2016,9,26),null,4,null],
[new Date(2016,9,27),null,10,null],
[new Date(2016,9,28),null,11,123],
[new Date(2016,9,29),null,4,130],
[new Date(2016,9,30),6,null,132],
]);
var dash = new google.visualization.Dashboard(document.getElementById('dashboard'));
var columnsTable = new google.visualization.DataTable();
columnsTable.addColumn('number', 'colIndex');
columnsTable.addColumn('string', 'colLabel');
var initState= {selectedValues: []};
// populate columnsTable Rows skipping column 0
for (var i = 1; i < data.getNumberOfColumns(); i++)
{
columnsTable.addRow([i, data.getColumnLabel(i)]);
// comment out next line to have a default selection other than the whole list
// initState.selectedValues.push(data.getColumnLabel(i));
}
// set individual columns to be the default columns (not with the loop above)
// initState.selectedValues.push(data.getColumnLabel(4));
// initialize the CategoryFilter
var CategoryFilter_control = new google.visualization.ControlWrapper
({
controlType: 'CategoryFilter',
containerId: 'CategoryFilter_div',
dataTable: columnsTable,
options:
{
filterColumnLabel: 'colLabel',
ui:
{
label: 'Columns',
allowTyping: false,
allowMultiple: true,
allowNone: false,
selectedValuesLayout: 'aside'
}
},
'state': {'selectedValues': ['DATA.1']}
});
// initialize the LineChart
var chart = new google.visualization.ChartWrapper
({
chartType: 'LineChart',
containerId: 'chart_div',
dataTable: data,
options:
{
title: 'SOCIAL FOLLOWERS',
curveType: 'function',
interpolateNulls: 'true',
pointSize: 2,
legend: { position: 'right', textStyle:{ fontSize: 10 } },
chartArea: { left: 50, top: 10, width: "80%", height: "90%" },
trendlines:
{
0:
{
type: 'linear',
lineWidth: 1,
dataOpacity: 0.2,
showR2: false,
pointSize: 0,
visibleInLegend: false
},
1:
{
type: 'linear',
lineWidth: 1,
dataOpacity: 0.2,
showR2: false,
pointSize: 0,
visibleInLegend: false
},
2:
{
type: 'linear',
lineWidth: 1,
dataOpacity: 0.2,
showR2: false,
pointSize: 0,
visibleInLegend: false
},
}
}
});
// initialize the ChartRangeFilter
var ChartRangeFilter_control = new google.visualization.ControlWrapper
({
controlType: 'ChartRangeFilter',
containerId: 'ChartRangeFilter_div',
dataTable: data,
options:
{
filterColumnIndex: 0,
ui: { chartOptions: {height:50,width:'100%',chartArea:{left:50,width: '80%'}} }
}
});
// set the chart
function setChartView ()
{
var state = CategoryFilter_control.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));
}
chart.setView(view);
chart.draw();
}
// set the ChartRangeFilter ??
function setRangeFilterView ()
{
var state = CategoryFilter_control.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));
}
ChartRangeFilter_control.setView(view);
ChartRangeFilter_control.draw();
}
// display selected Range
function displayRange()
{
var v = ChartRangeFilter_control.getState();
document.getElementById('dbgchart').innerHTML = v.range.start.format("%d-%m-%Y")+ ' to ' +v.range.end.format("%d-%m-%Y");
return 0;
}
// draw the CategoryFilter
CategoryFilter_control.draw();
// bind LineChart and ChartRangeFilter
dash.bind([ChartRangeFilter_control], [chart]);
dash.draw(data);
setChartView();
setRangeFilterView();
google.visualization.events.addListener(CategoryFilter_control, 'statechange', setChartView);
google.visualization.events.addListener(CategoryFilter_control, 'statechange', setRangeFilterView);
google.visualization.events.addListener(ChartRangeFilter_control, 'statechange', displayRange);
}
//-------------------------------------------------------------------GOOGLE CHARTS <-
</script>
</head>
<body>
<h3>Social Followers Overview</h3>
<div id="dashboard">
<div id="CategoryFilter_div"></div>
<div id="chart_div" style="margin:0; padding:0; width: auto; height: 75vh"></div>
<div id="ChartRangeFilter_div"></div>
<p><span id='dbgchart' style="padding-top: 50; padding-left: 50px;"></span></p>
</div>
</body>
</html>
What should I do to prevent trying to draw null data when there are holes in the DataTable?

I've found a workaround here
How to remove default error message in google chart
so I added this code to drawChart() function:
google.visualization.events.addListener(chart, 'error', function (googleError) {
google.visualization.errors.removeError(googleError.id);
});
google.visualization.events.addListener(dash, 'error', function (googleError) {
google.visualization.errors.removeError(googleError.id);
});
but if you move the thumbs to select a range where some data are missing, the error occurs (even if it is removed) and the chart won't change...

Develop Reference

JavaScript is the programming language of the Web.

Change default marker in Google GeoMap - javascript

Related

How to reduce gap between haxis and annotation value in line chart using google api

Dynamic Bar Chart in MVC Application

Google chart - role: annotation in candlestick bar [duplicate]

generating graph using google API in java

Google Charts: ChartRangeFilter and CategoryFilter with discontinuous DataTable

Categories

Resources