How to add more gridlines in google chart? - html

I tried using
hAxis: {count: 12},
but it ignores my count of 12 and just gives me 4 gridlines. Anyone has any idea how to add more gridlines? here is my code:
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540]
]);
var options = {
title: 'Company Performance',
curveType: 'function',
legend: { position: 'bottom' },
hAxis: {count: 12},
};
var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="curve_chart" style="width: 900px; height: 500px"></div>

There are 2 ways you can achieve this (Ref : Google Line Chart).
By setting vAxis.gridlines.count to number of rows. This is better way to achieve this as this will automatically adjust with maximum value in chart. Check example below:
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540]
]);
var options = {
title: 'Company Performance',
curveType: 'function',
legend: { position: 'bottom' },
vAxis: {
gridlines : {
count : 12
}
},
};
var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="curve_chart" style="width: 900px; height: 500px"></div>
By setting vAxis.ticks providing an array of values to be shown in chart. This is preferred only when chart will be static. Check example below:
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540]
]);
var options = {
title: 'Company Performance',
curveType: 'function',
legend: { position: 'bottom' },
vAxis: {
ticks: [0, 100,200,300,400,500,600,700,800,900,1000,1100,1200,1200]
},
};
var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="curve_chart" style="width: 900px; height: 500px"></div>

Related

How to change google charts text color

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">';
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Tools', 'Number'],
['example1', $countr1],
['example2', $countr2],
]);
var options = {
title: 'Available Tools',
titleTextStyle: {color: '#FFFFFF'},
backgroundColor: 'transparent',
legend: 'right',
chartArea: {'width': '100%', 'height': '80%' },
pieSliceText: 'label',
pieHole: 0.4,
colors:['#202020','#282828','#303030','#383838','#404040','#484848','#505050']
};
var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
chart.draw(data, options);
}
</script>
How to change tools text color "example1" and "example2" in this google visualization PieChart script. i want to color of exactly just "example1" and "example2"

Google charts - data from local json file - custom tooltips

I'm using google charts to create dvb-c channels availability charts. The data for charts is red from local json file. The charts are working really fine, but I would like to add one feature to it, but I need some assistanse with it.
The feature I would like to add is custom tooltips, but I have no idea how to do it. I know I have to add the wanted data to json, but like I said Im not sure how to do it and how do I have to change my html code to make it work. I want tooltip to read local html file and show the content on tooltip.
Here is my html code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
</head>
<body>
<div id="chart" style="width:3000px; height:600px;"></div>
</body>
<script>
// Visualization API with the 'corechart' package.
google.charts.load('visualization', { packages: ['corechart'] });
google.charts.setOnLoadCallback(drawLineChart);
function drawLineChart() {
$.ajax({
url: "./avail.json",
dataType: "json",
type: "GET",
contentType: "application/json; charset=utf-8",
success: function (data) {
var channels = [['Channel', 'HKI (%)', 'LTI (%)']]; // Define an array and assign columns for the chart.
// Loop through each data and populate the array.
$.each(data, function (index, value) {
channels.push([value.Channel, value.HKI, value.LTI]);
});
// Set chart Options.
var options = {
title: 'DVB-C Availability (HKI & LTI)',
series: {
0: { color: '#ff3385', lineWidth: 5, pointSize: 5 },
1: { color: '#000000', lineWidth: 1, pointSize: 3},
},
vAxis: { "title": "Availability (%)", maxValue: 100 },
hAxis : { "title": "Channels", showTextEvery:1, textStyle : {fontSize: 8, bold:'true' }, slantedText:true, slantedTextAngle:45 },
chartArea:{left:70,top:50,right:40,width:"90%",height:"70%"},
tooltip: {isHtml: true, trigger: 'both'},
legend: { position: 'top', textStyle: { color: '#555', fontSize: 14} }
};
// Create DataTable and add the array to it.
var figures = google.visualization.arrayToDataTable(channels)
// Define the chart type (LineChart) and the container (a DIV in our case).
var chart = new google.visualization.LineChart(document.getElementById('chart'));
chart.draw(figures, options); // Draw the chart with Options.
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert('Got an Error');
}
});
}
</script>
</html>
Here is little snippet of my current json file:
[
{ "Channel": "MTV Rocks", "HKI": 99.104700, "LTI": 98.760400 },
{ "Channel": "MTV3 HD", "HKI": 99.724600, "LTI": 99.724600 },
{ "Channel": "MTV3", "HKI": 100.000000, "LTI": 100.000000 },
]
Should I add something like this to json ?
[
{ "Channel": "MTV Rocks", "HKI": 99.104700, <object data="./hki1.html"></object> "LTI": 98.760400, <object data="./lti1.html"></object> },
{ "Channel": "MTV3 HD", "HKI": 99.724600, <object data="./hki1.html"></object>"LTI": 99.724600, <object data="./lti1.html"></object> },
{ "Channel": "MTV3", "HKI": 100.000000, object data="./hki1.html"></object>"LTI": 100.000000, object data="./lti1.html"></object> },
]
If this is the right way to change json, I have no idea how to change the html code to make this work.
Maybe someone can help me out with this ?
first, 'visualization' is not a valid version number for google charts.
it looks the this was left over from the old library loader code.
use 'current' instead...
google.charts.load('current', { packages: ['corechart'] });
next, you'll need to copy the html from the file into the json,
rather than trying to reference an external file.
the tooltip is only expecting an html snippet, not a full blown file.
to add the custom tooltip, first we need to add the column for the tooltip.
it should be an object, as follows...
{type: 'string', role: 'tooltip', p: {html: true}}
if you want a tooltip for both "HKI" & "LTI",
you need to add the above tooltip column after each column heading...
var channels = [['Channel', 'HKI (%)', {type: 'string', role: 'tooltip', p: {html: true}}, 'LTI (%)', {type: 'string', role: 'tooltip', p: {html: true}}]];
include the html when loading the rows...
$.each(data, function (index, value) {
channels.push([
value.Channel,
value.HKI,
'<div>custom html goes here</div>',
value.LTI,
'<div>custom html goes here</div>'
]);
});
see following working snippet for an example...
google.charts.load('current', { packages: ['corechart'] });
google.charts.setOnLoadCallback(drawLineChart);
function drawLineChart() {
var data = [
{ "Channel": "MTV Rocks", "HKI": 99.104700, "LTI": 98.760400 },
{ "Channel": "MTV3 HD", "HKI": 99.724600, "LTI": 99.724600 },
{ "Channel": "MTV3", "HKI": 100.000000, "LTI": 100.000000 },
];
var channels = [['Channel', 'HKI (%)', {type: 'string', role: 'tooltip', p: {html: true}}, 'LTI (%)', {type: 'string', role: 'tooltip', p: {html: true}}]];
// Loop through each data and populate the array.
$.each(data, function (index, value) {
channels.push([
value.Channel,
value.HKI,
'<div class="ggl-tooltip"><div>' + value.Channel + '</div><div>' + value.HKI + '</div></div>',
value.LTI,
'<div class="ggl-tooltip"><div>' + value.Channel + '</div><div>' + value.LTI + '</div></div>'
]);
});
// Set chart Options.
var options = {
title: 'DVB-C Availability (HKI & LTI)',
series: {
0: {color: '#ff3385', lineWidth: 5, pointSize: 5},
1: {color: '#000000', lineWidth: 1, pointSize: 3},
},
vAxis: {title: "Availability (%)", maxValue: 100},
hAxis : {title: "Channels", showTextEvery:1, textStyle : {fontSize: 8, bold:'true'}, slantedText:true, slantedTextAngle:45},
chartArea:{left: 70, top:50, right:40, width:"90%", height:"70%"},
tooltip: {isHtml: true, trigger: 'both'},
legend: {position: 'top', textStyle: { color: '#555', fontSize: 14}}
};
// Create DataTable and add the array to it.
var figures = google.visualization.arrayToDataTable(channels)
// Define the chart type (LineChart) and the container (a DIV in our case).
var chart = new google.visualization.LineChart(document.getElementById('chart'));
chart.draw(figures, options); // Draw the chart with Options.
}
.ggl-tooltip {
border: 1px solid #E0E0E0;
font-family: Arial, Helvetica;
font-size: 10pt;
padding: 12px 12px 12px 12px;
}
.ggl-tooltip div {
padding-top: 6px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>
EDIT
if you want to display an external html file as the tooltip,
it may make sense to hide the standard tooltip,
and display the external file 'onmouseover'
see following working snippet for an example...
google.charts.load('current', { packages: ['corechart'] });
google.charts.setOnLoadCallback(drawLineChart);
function drawLineChart() {
var data = [
{ "Channel": "MTV Rocks", "HKI": 99.104700, "LTI": 98.760400 },
{ "Channel": "MTV3 HD", "HKI": 99.724600, "LTI": 99.724600 },
{ "Channel": "MTV3", "HKI": 100.000000, "LTI": 100.000000 },
];
var channels = [['Channel', 'HKI (%)', 'LTI (%)']];
// Loop through each data and populate the array.
$.each(data, function (index, value) {
channels.push([
value.Channel,
value.HKI,
value.LTI
]);
});
// Set chart Options.
var options = {
title: 'DVB-C Availability (HKI & LTI)',
series: {
0: {color: '#ff3385', lineWidth: 5, pointSize: 5},
1: {color: '#000000', lineWidth: 1, pointSize: 3},
},
vAxis: {title: "Availability (%)", maxValue: 100},
hAxis : {title: "Channels", showTextEvery:1, textStyle : {fontSize: 8, bold:'true'}, slantedText:true, slantedTextAngle:45},
chartArea:{left: 70, top:50, right:40, width:"90%", height:"70%"},
tooltip: {trigger: 'none'},
legend: {position: 'top', textStyle: { color: '#555', fontSize: 14}}
};
// Create DataTable and add the array to it.
var figures = google.visualization.arrayToDataTable(channels)
// Define the chart type (LineChart) and the container (a DIV in our case).
var chart = new google.visualization.LineChart(document.getElementById('chart'));
var frame = document.getElementById('tooltip');
// hide external html on mouse out
google.visualization.events.addListener(chart, 'onmouseout', function () {
frame.className = 'hidden';
});
// display external html on mouse over
google.visualization.events.addListener(chart, 'onmouseover', function (props) {
if (props.row === null) {
return;
}
var chartLayout = chart.getChartLayoutInterface();
var bounds = chartLayout.getBoundingBox('point#' + (props.column - 1) + '#' + props.row);
frame.style.left = bounds.left + 'px';
frame.style.top = bounds.top + 'px';
// replace this
frame.src = 'https://www.december.com/html/demo/hello.html';
// with this
//frame.src = '../' + figures.getColumnLabel(props.column) + (props.row + 1) + '.html';
frame.className = 'tooltip';
});
chart.draw(figures, options);
}
.hidden {
display: none;
visibility: hidden;
}
.tooltip {
background-color: #ffffff;
position: absolute;
height: 200px;
width: 400px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>
<iframe class="hidden" id="tooltip"></iframe>

Draw two lines in column chart google charts

I am trying to draw two lines using google combo charts, I am referring this link https://developers.google.com/chart/interactive/docs/gallery/combochart
but I am able to draw only one line!!!
function drawchart1(dataValues) {
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
var data = new google.visualization.DataTable();
data.addColumn('string', 'KPI_MONTH');
data.addColumn('number', 'DIE');
data.addColumn('number', 'DIE_TS');
data.addColumn('number', 'DIE_LL');
for (var i = 0; i < dataValues.length; i++) {
data.addRow([dataValues[i].KPI_MONTH, dataValues[i].DIE, dataValues[i].DIE_TS, dataValues[i].DIE_LL]);
}
// Instantiate and draw our chart, passing in some options
var chart = new google.visualization.ComboChart(document.getElementById('ColumnChart'));
//var chart1 = new google.visualization.PieChart(document.getElementById('piechart1'));
chart.draw(data,
{
title: "Column Chart of Google Chart in Asp.net",
position: "top",
fontsize: "14px",
seriesType: 'bars',
series: { 2: { type: 'line' } },
series: { 1: { type: 'line' } },
chartArea: { width: '50%' },
});
Only for the series 1 graph is getting generated like below.Only one line is geeting generated in this graph
The chart options should only have one key for series, which can have multiple series definitions.
series: {
1: { type: 'line' },
2: { type: 'line' }
},
Example...
google.load('visualization', '1', {
packages: ['corechart'],
callback: drawchart1
});
function drawchart1(dataValues) {
var data = new google.visualization.DataTable();
data.addColumn('string', 'KPI_MONTH');
data.addColumn('number', 'DIE');
data.addColumn('number', 'DIE_TS');
data.addColumn('number', 'DIE_LL');
data.addRow(['Jan-15', 80, 90, 80]);
data.addRow(['Feb-15', null, 90, 80]);
data.addRow(['Mar-15', 100, 90, 80]);
data.addRow(['Apr-15', 100, 90, 80]);
data.addRow(['May-15', 20, 90, 80]);
data.addRow(['Jun-15', 30, 90, 80]);
data.addRow(['Jul-15', 10, 90, 80]);
data.addRow(['Aug-15', 50, 90, 80]);
data.addRow(['Sep-15', 30, 90, 80]);
data.addRow(['Oct-15', 10, 90, 80]);
data.addRow(['Nov-15', 20, 90, 80]);
data.addRow(['Dec-15', 100, 90, 80]);
var chart = new google.visualization.ComboChart(document.getElementById('ColumnChart'));
chart.draw(data,
{
title: "Column Chart of Google Chart in Asp.net",
position: "top",
fontsize: "14px",
seriesType: 'bars',
series: {
1: { type: 'line' },
2: { type: 'line' }
},
chartArea: { width: '50%' },
});
}
<script src="https://www.google.com/jsapi"></script>
<div id="ColumnChart"></div>

google is not defined in mvc4

I am trying to render google geochart inside partial view in mvc4 but it's showing reference error:
"google is not defined"
but in simple view it's rendering fine.below is step to render my geochat.i don't know what i am doing wrong or should fellow other step to render google geochat.
my partial view(_mymap.cshtml)
<script type='text/javascript' src='http://www.google.com/jsapi'></script>
<div id='visualization'></div>
<script type='text/javascript'>
function initialize() {
google.load('visualization', '1', { 'packages': ['geochart'] });
google.setOnLoadCallback(drawVisualization);
}
function drawVisualization() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Country');
data.addColumn('number', 'Value');
data.addColumn({ type: 'string', role: 'tooltip' }); var ivalue = new Array();
data.addRows([[{ v: '002', f: 'Africa' }, 0, 'Click to Choose']]);
ivalue['002'] = 'http://en.wikipedia.org/wiki/Africa';
data.addRows([[{ v: '150', f: 'Europe' }, 1, 'Click to Choose']]);
ivalue['150'] = 'http://en.wikipedia.org/wiki/Europe';
data.addRows([[{ v: '019', f: 'Americas' }, 2, 'Click to Choose']]);
ivalue['019'] = 'http://en.wikipedia.org/wiki/Americas';
data.addRows([[{ v: '142', f: 'Asia' }, 3, 'Click to Choose']]);
ivalue['142'] = 'http://en.wikipedia.org/wiki/Asia';
data.addRows([[{ v: '009', f: 'Australia' }, 4, 'Click to Choose']]);
ivalue['009'] = 'http://en.wikipedia.org/wiki/Oceania';
var options = {
backgroundColor: { fill: '#FFFFFF', stroke: '#FFFFFF', strokeWidth: 0 },
colorAxis: { minValue: 0, maxValue: 4, colors: ['#A8A8A8', '#939473', '#B1B38B', '#90AD89', '#87AAAD', ] },
legend: 'none',
backgroundColor: { fill: '#FFFFFF', stroke: '#FFFFFF', strokeWidth: 0 },
datalessRegionColor: '#f5f5f5',
displayMode: 'regions',
enableRegionInteractivity: 'true',
resolution: 'continents',
sizeAxis: { minValue: 1, maxValue: 1, minSize: 10, maxSize: 10 },
region: 'world',
keepAspectRatio: true,
width: 600,
height: 400,
tooltip: { textStyle: { color: '#444444' }, trigger: 'focus' }
};
var chart = new google.visualization.GeoChart(document.getElementById('visualization'));
google.visualization.events.addListener(chart, 'select', function () {
var selection = chart.getSelection();
//append_to_list(data.getValue(selection[0].row, 0));
});
chart.draw(data, options);
}
$(document).ready(function () {initialize();});
</script>
drawVisualization function is missing closing brace inside script tag. You have closed it after the end script tag in your code.
$(document).ready(function () {initialize();});
</script>
} //this brace need to be inside script tag
The loader uses document.write to inject JS and CSS, this can't be done after the document has finished loading(what is the case here, because you call initialize on domready)
define the callback in the call of google.load and not via setOnLoadCallback
function initialize() {
google.load('visualization',
'1',
{ 'packages': ['geochart'] , callback: drawVisualization});
}

Wrong order of items in legend (Google Chrome issue)

I have problem with items order in legend, when I using Google Chrome browser and when I have more than 10 items. In all other browsers items are displayed in appropriate order, but in Chrome - not.
version: Highcharts JS v2.1.6 (2011-07-08)
Chrome versions: 19.0.1084.56 and 20.0.1132.47
The chart looks like below:
Please see following code:
<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="highcharts.js"></script>
</head>
<body>
<script type="text/javascript">
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'chart',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
plotOptions: {
pie: {
size: '80%',
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false,
color: '#000000',
connectorColor: '#000000',
distance: 10
},
showInLegend: true
}
},
legend: {
itemWidth: 100
},
series: [{
type: 'pie',
data: [
['label1', 10],
['label2', 20],
['label3', 30],
['label4', 40],
['label5', 155.89],
['label6', 50],
['label7', 60],
['label8', 70],
['label9', 80],
['label10', 90],
['label11', 65.70],
['label12', 100],
]
}]
});
});
</script>
<div id="chart" style="width: 460px; height: 290px; margin: 0 auto">
</div>
</body>
</html>
Solution: update highcharts library to 2.2.5.