Develop Reference

Google chart spacing for data point

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>

How to create custom bar chart using google charts?

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>

how to adjust the tickposition or 'x' axis on areapline highchart

The situation with my char is that currently the tick marks are positioned according to my "tickposition" paramenter, they displayed what I want but the problem is that for example the tick mark on '50' should be right on the middle of the chart, below the 50% bubble. So my chart looks off center.
I am not sure if the type of chart I am using is the correct one or how to approach this problem. I am super new on Highcharts.
Here is what I have:
http://jsfiddle.net/cjwh/hu1t8159/15/
$(function () {
$('#container').highcharts({
xAxis: {
tickPositions: [250, 500, 750, 1000],
min: 0,
max: 900,
labels: {
formatter: function() {
return this.value / 10;
}
},
},
yAxis: {
min: 0,
allowDecimals: false,
floor : 0,
ceiling: 200,
lineWidth: 0,
minorGridLineWidth: 0,
lineColor: 'transparent',
minorTickLength: 0,
tickLength: 0,
gridLineColor: 'transparent',
labels: {
enabled: false
},
title: {
text: null
}
},
chart: {
events: {
redraw: function () {
var chart = this,
point = chart.series[1].points[0];
if(chart.customLabel) {
chart.customLabel.attr({
x: point.plotX + chart.plotLeft - 25,
y: point.plotY + chart.plotTop - 65,
anchorX: point.plotX + chart.plotLeft,
anchorY: point.plotY + chart.plotTop
});
}
}
}
},
legend: {
enabled: false
},
series: [{
type: 'areaspline',
marker: {
enabled: false
},
data: [
[0, 1],
[210, 1],
[225, 2],
[372,108],
[378,112],
[387, 118],
[396, 122],
[403, 125],
[433, 130],
[450, 129],
[460, 126],
[472, 122],
[479, 118],
[486, 114],
[495,108],
[502,102],
[504,100],
[510, 94],
[514, 89],
[518, 85],
[522, 81],
[526, 76],
[529, 72],
[534, 67],
[541, 59],
[548, 51],
[556, 43],
[566, 34],
[583, 22],
[593, 17],
[612, 9],
[621, 6],
[626, 5],
[635, 3],
[642, 2],
[651, 1],
[870, 1],
[1000, 1]
],
zoneAxis: 'x',
zones: [{
value: 430,
color: '#18d1ba'
}, {
color: '#74e3d6'
}]
}, {
type: 'scatter',
data: [
[430, 130]
],
marker: {
radius: 8,
symbol: 'circle',
fillColor: '#fff',
lineColor: '#09f',
lineWidth: 3
}
}]
}, function (chart) { // on complete
var point = chart.series[1].points[0];
chart.customLabel = chart.renderer.label('50%', point.plotX + chart.plotLeft - 25, point.plotY + chart.plotTop - 65, 'callout', point.plotX + chart.plotLeft, point.plotY + chart.plotTop)
.css({
color: '#09f',
fontSize: '18px'
})
.attr({
'stroke-width': 3,
stroke: '#09f',
fill: '#fff',
padding: 8,
r: 5,
zIndex: 6
})
.add();
});
});
This is a picture of the desired chart, please note the position of the 'x' positions or tickmarks.
http://claudiawong.ca/test/example.png
Would anyone happen to give me an example of what to change, ideally an example on the form of a jsfiddle would be really helpful.
Thanks!!!!

To expand on my comment:
1) You know, in your example, that 50% is 430. You can determine from that what 25, 75, and 100% are.
2) You can set the values of those percentages as your tickPositions array.
3) You will need to map the values to the % that you want to display in your labels
A very quick and dirty example:
var x100 = 860;
var x75 = (x100 * .75);
var x50 = (x100 * .5 );
var x25 = (x100 * .25);
var vals = {};
vals[x100] = '100';
vals[x75 ] = '75';
vals[x50 ] = '50';
vals[x25 ] = '25';
You can then use this object in your label formatter to display the correct value.
Example:http://jsfiddle.net/hu1t8159/18/

How can i get trend line graph using javascript

I am trying to get a 3rd order polynomial trendline, calculate r-squared value. I am getting only the linechart. In the chart atrendline is not showing. Here is my code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script type="text/javascript" src="js plugins/excanvas.js"></script>
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="jquery.flot.min.js"></script>
<script type="text/javascript" src="jquery.flot.axislabels.min.js"></script>
<script type="text/javascript" src="js plugins/jquery.flot.symbol.min.js"></script>
<script type="text/javascript">
var data = [
[0, 11],
[1, 15],
[2, 25],
[3, 24],
[4, 13],
[5, 18],
[6, 22],
[7, 45],
[8, 33],
[9, 12],
[10, 27],
[11, 24],
[12, 20]
];
var bin = [
[0, 1],
[1, 2],
[2, 3],
[3, 4],
[4, 5],
[5, 6],
[6, 7],
[7, 8],
[8, 9],
[9, 10],
[10, 11],
[11, 12],
[12, 13],
[13, 14]
];
var dataset = [{
label: "Frequency",
data: data,
points: {
symbol: "triangle"
}
}];
var options = {
series: {
lines: {
show: true
},
points: {
radius: 3,
fill: true,
show: true
}
},
/*
series:{
bars:{
show:true
}
},
bars:{
align:"center",
barWidth:1
},
*/
xaxis: {
//mode:"",
//tickSize:[],
ticks: bin,
ticklength: 0,
axisLabel: "Bin",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Verdana, Arial',
axisLabelPadding: 10
},
yaxis: {
axisLabel: "Frequncy",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Verdana, Arial',
axisLabelPadding: 3,
tickFormatter: function (v, axis) {
return v + "Hz";
}
},
legend: {
noColumns: 0,
labelBoxBorderColor: "#000000",
position: "nw"
},
grid: {
hoverable: true,
borderWidth: 2,
borderColor: "#633200",
backgroundColor: {
colors: ["#ffffff", "#EDF5FF"]
}
},
trendline: {
type: 'polynomial',
degree: 3,
visibleInLegend: true,
},
colors: ["#FF0000", "#0022FF"]
};
$(document).ready(function () {
$.plot($("#flot-placeholder"), dataset, options);
$("#flot-placeholder").UseTooltip();
});
var previousPoint = null,
previousLabel = null;
$.fn.UseTooltip = function () {
$(this).bind("plothover", function (event, pos, item) {
if (item) {
if ((previousLabel != item.series.label) || (previousPoint != item.dataIndex)) {
previousPoint = item.dataIndex;
previousLabel = item.series.label;
$("#tooltip").remove();
var x = item.datapoint[0];
var y = item.datapoint[1];
var color = item.series.color;
//console.log(item.series.xaxis.ticks[x].label);
showTooltip(item.pageX,
item.pageY,
color,
"<strong>" + item.series.label + "</strong><br>" + item.series.xaxis.ticks[x].label + " : <strong>" + y + "</strong> Hz");
}
} else {
$("#tooltip").remove();
previousPoint = null;
}
});
};
function showTooltip(x, y, color, contents) {
$('<div id="tooltip">' + contents + '</div>').css({
position: 'absolute',
display: 'none',
top: y - 40,
left: x - 120,
border: '2px solid ' + color,
padding: '3px',
'font-size': '9px',
'border-radius': '5px',
'background-color': '#fff',
'font-family': 'Verdana, Arial, Helvetica, Tahoma, sans-serif',
opacity: 0.9
}).appendTo("body").fadeIn(200);
}
</script>
</head>
<body>
<div id="flot-placeholder" style="width:450px;height:300px;margin:0 auto"> </div>
</body>
</html>
How can I get a polynomial trendline in a linechart?

How can I use Flot to make a multiseries line graph with curved lines?

I'm trying to use Flot to make a line graph with multiple series, then smoothing the lines out using the CurvedLines plugin.
I can get my multiple series line chart using flot alone to get jagged lines. I can also use the CurvedLines plugin to make a single smooth line chart. But for some reason, I'm unable to make my multiple series line graph smooth.
Here is a link to the graph I'm working on: www.somanifamily.com/multiple/
I am positive that there is nothing wrong with my CSS or the external JS files.
Here is the (slightly abridged) Javascript from my page:
$(function() {
var datasets = {
"oak": {
label: "Oak (Querus)",
data: [[10, 30], [20, 0], [30, 23], [40, 54], [50, 45], [60, 2], [70, 0], [80, 0], [90, 0], [100, 0], [110, 0], [120, 0]]
},
"elm": {
label: "Elm (Ulmus)",
data: [[10, 0], [20, 0], [30, 0], [40, 45], [50, 23], [60, 0], [70, 0], [80, 0], [90, 0], [100, 0], [110, 0], [120, 0]]
},
"weeds": {
label: "Total Weeds",
data: [[10, 0], [20, 0], [30, 0], [40, 45], [50, 23], [60, 0], [70, 0], [80, 0], [90, 0], [100, 0], [110, 0], [120, 0]]
},
"grass": {
label: "Total Grass",
data: [[10, 0], [20, 0], [30, 0], [40, 45], [50, 23], [60, 0], [70, 0], [80, 0], [90, 0], [100, 0], [110, 0], [120, 0]]
}
};
// hard-code color indices to prevent them from shifting as
// pollens are turned on/off
var i = 0;
$.each(datasets, function(key, val) {
val.color = i;
++i;
});
// insert checkboxes
var choiceContainer = $("#choices");
$.each(datasets, function(key, val) {
var check = "checked='checked'";
if (key != "oak") check = "";
choiceContainer.append("<br/><input type='checkbox' name='" + key +
"' " + check + "id='id" + key + "'></input>" +
"<label for='id" + key + "'>"
+ val.label + "</label>");
})
choiceContainer.find("input").click(plotAccordingToChoices);
function plotAccordingToChoices() {
var d1 = [];
choiceContainer.find("input:checked").each(function () {
var key = $(this).attr("name");
if (key && datasets[key]) {
d1.push(datasets[key]);
}
});
if (d1.length > 0) {
// set options
var options = {
series: {
curvedLines: {
active: true
}
},
yaxis: {
min: 0
},
xaxis: {
tickDecimals: 0,
ticks: [[10,'Jan.'],[20,'Feb.'],[30,'March'],[40,'April'],[50,'May'],[60,'June'],
[70,'July'],[80,'Aug.'],[90,'Sep.'],[100,'Oct.'],[110,'Nov.'],[120,'Dec.']]
}
};
// plot
$.plot("#placeholder", [{data: d1, lines: { show: true }, curvedLines: {apply:true, fit: true, fitPointDist: 0.000001}}], options);
}
}
plotAccordingToChoices();
});
I'm suspecting that the error is with the line
$.plot("#placeholder", [{data: d1, lines: { show: true }, curvedLines: {apply:true, fit: true, fitPointDist: 0.000001}}], options);
How do I get the graph to plot the multiple series smoothly (and display the legend along with it)? Thanks in advance.

Your suspicion is correct. In that line, you are treating d1 as an individual series, when it is in fact an array of series. In your case, since you seem to want the same curvedLines parameters applied to all the series, you can just add them in the options (you already have active: true, you need to add the rest):
var options = {
series: {
curvedLines: {
active: true
apply: true,
fit: true,
fitPointDist: 0.000001
}
},
etc...
If you wanted different parameters for each series, you could add them there instead.
var datasets = {
"oak": {
label: "Oak (Querus)",
data: [[10, 30], [20, 0], [30, 23], [90, 0], [100, 0], [110, 0], [120, 0]]
curvedLines: {
apply: true,
fit: true,
fitPointDist: 0.000001
}
},
etc...
Then the plot line is just:
$.plot("#placeholder", d1, options);