I'm working on adding a linear trendline to my chart which represents a 24 hour clock. Only some of the hours will contain data. In my example, I expect a positive trend when considering I have data present in hours 7 to 10 only.
It appears as if all the Zero values are contributing to the trendline in my example code. This results in a negative trendline.
Is there a way I can make the trendline apply to only the values which are present?
Thanks as always to the experts out there!
google.charts.load('current', {
'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawVisualization);
function drawVisualization() {
// Some raw data (not necessarily accurate)
var data = google.visualization.arrayToDataTable([
['Hour', 'Value'],
[0, 0],
[1, 0],
[2, 0],
[3, 0],
[4, 0],
[5, 0],
[6, 0],
[7, 5],
[8, 15],
[9, 10],
[10, 20],
[11, 0],
[12, 0],
[13, 0],
[14, 0],
[15, 0],
[16, 0],
[17, 0],
[18, 0],
[19, 0],
[20, 0],
[21, 0],
[22, 0],
[23, 0],
[24, 0]
]);
var options = {
title: 'Task completed per Hour',
vAxis: {
title: 'Count'
},
hAxis: {
title: 'Hour',
slantedText: false,
ticks: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24]
},
seriesType: 'bars',
series: {},
trendlines: {
0: {type: 'linear'}
},
isStacked: false
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div" ></div>
try replacing zero with null
see following working snippet...
google.charts.load('current', {
'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawVisualization);
function drawVisualization() {
// Some raw data (not necessarily accurate)
var data = google.visualization.arrayToDataTable([
['Hour', 'Value'],
[0, null],
[1, null],
[2, null],
[3, null],
[4, null],
[5, null],
[6, null],
[7, 5],
[8, 15],
[9, 10],
[10, 20],
[11, null],
[12, null],
[13, null],
[14, null],
[15, null],
[16, null],
[17, null],
[18, null],
[19, null],
[20, null],
[21, null],
[22, null],
[23, null],
[24, null]
]);
var options = {
title: 'Task completed per Hour',
vAxis: {
title: 'Count'
},
hAxis: {
title: 'Hour',
slantedText: false,
ticks: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24]
},
seriesType: 'bars',
series: {},
trendlines: {
0: {
type: 'linear'
}
},
isStacked: false
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
Related
I currently have this script in MVC view
<script type="text/javascript">
$(document).ready(function () {
$(".bar_dashboard").peity("bar", {
fill: ["#1ab394", "#d7d7d7"],
width: 100
})
$("#sparkline8").sparkline([5, 6, 7, 2, 0, 4, 2, 4, 5, 7, 2, 4, 12, 14, 4, 2, 14, 12, 7], {
type: 'bar',
barWidth: 8,
height: '150px',
barColor: '#1ab394',
negBarColor: '#c6c6c6'
});
var updatingChart = $(".updating-chart").peity("line", { fill: '#1ab394', stroke: '#169c81', width: 64 })
setInterval(function () {
var random = Math.round(Math.random() * 10)
var values = updatingChart.text().split(",")
values.shift()
values.push(random)
updatingChart
.text(values.join(","))
.change()
}, 1000);
var data1 = [
[0, 4], [1, 8], [2, 5], [3, 10], [4, 4], [5, 16], [6, 5], [7, 11], [8, 6], [9, 11], [10, 30], [11, 10], [12, 13], [13, 4], [14, 3], [15, 3], [16, 6]
];
var data2 = [
[0, 1], [1, 0], [2, 2], [3, 0], [4, 1], [5, 3], [6, 1], [7, 5], [8, 2], [9, 3], [10, 2], [11, 1], [12, 0], [13, 2], [14, 8], [15, 0], [16, 0]
];
$("#flot-dashboard-chart").length && $.plot($("#flot-dashboard-chart"), [
data1, data2
],
{
series: {
lines: {
show: false,
fill: true
},
splines: {
show: true,
tension: 0.4,
lineWidth: 1,
fill: 0.4
},
points: {
radius: 0,
show: true
},
shadowSize: 2
},
grid: {
hoverable: true,
clickable: true,
tickColor: "#d5d5d5",
borderWidth: 1,
color: '#d5d5d5'
},
colors: ["#1ab394", "#464f88"],
xaxis: {
},
yaxis: {
ticks: 4
},
tooltip: false
}
);
var doughnutData = [
{
value: 300,
color: "#a3e1d4",
highlight: "#1ab394",
label: "App"
},
{
value: 50,
color: "#dedede",
highlight: "#1ab394",
label: "Software"
},
{
value: 100,
color: "#b5b8cf",
highlight: "#1ab394",
label: "Laptop"
}
];
var doughnutOptions = {
segmentShowStroke: true,
segmentStrokeColor: "#fff",
segmentStrokeWidth: 2,
percentageInnerCutout: 45, // This is 0 for Pie charts
animationSteps: 100,
animationEasing: "easeOutBounce",
animateRotate: true,
animateScale: false,
};
var ctx = document.getElementById("doughnutChart").getContext("2d");
var DoughnutChart = new Chart(ctx).Doughnut(doughnutData, doughnutOptions);
var polarData = [
{
value: 300,
color: "#a3e1d4",
highlight: "#1ab394",
label: "App"
},
{
value: 140,
color: "#dedede",
highlight: "#1ab394",
label: "Software"
},
{
value: 200,
color: "#b5b8cf",
highlight: "#1ab394",
label: "Laptop"
}
];
var polarOptions = {
scaleShowLabelBackdrop: true,
scaleBackdropColor: "rgba(255,255,255,0.75)",
scaleBeginAtZero: true,
scaleBackdropPaddingY: 1,
scaleBackdropPaddingX: 1,
scaleShowLine: true,
segmentShowStroke: true,
segmentStrokeColor: "#fff",
segmentStrokeWidth: 2,
animationSteps: 100,
animationEasing: "easeOutBounce",
animateRotate: true,
animateScale: false,
};
var ctx = document.getElementById("polarChart").getContext("2d");
var Polarchart = new Chart(ctx).PolarArea(polarData, polarOptions);
});
</script>
I want to change
var data1 = [
[0, 4], [1, 8], [2, 5], [3, 10], [4, 4], [5, 16], [6, 5], [7, 11], [8, 6], [9, 11], [10, 30], [11, 10], [12, 13], [13, 4], [14, 3], [15, 3], [16, 6]
];
var data2 = [
[0, 1], [1, 0], [2, 2], [3, 0], [4, 1], [5, 3], [6, 1], [7, 5], [8, 2], [9, 3], [10, 2], [11, 1], [12, 0], [13, 2], [14, 8], [15, 0], [16, 0]
];
to read dynamic data from my Controller using JSON how can I do that?
You need a method in your controller which provides you the information you want.
public String getData(){
int[,] ints = new int[,] { {1,1},{2,2},{3,3} };
var json = Newtonsoft.Json.JsonConvert.SerializeObject(ints);
}
In your view you can get it like this:
$.get("/Controller/getData", null, function (data) {
thisismydata = data;
});
If you want to do this async take a look at $.ajax(). You can find more information here.
I am using Gooble Material ScatterChart (since I need dual-Y chart). So I load it with:
google.load('visualization', '1.1', {packages: ['scatter']});
But now it seems that it is impossible to set lineWidth and PointSize options of such charts. Seems that it does not affect anything:
var options = {
width: 900,
height: 500,
}
What am I doing wrong? Documentation (https://google-developers.appspot.com/chart/interactive/docs/gallery/scatterchart#configuration-options) says there are these properties for ScatterChart. No refinement is given for Material chart. But I do not see any affect and no errors are thrown.
Here is the full code of JS function and a piece of HTML. I have commented out non-Material test portion of code, which is working fine.
1: https://github.com/leoKiddy/google_charts/blob/master/dual-Y_Scatter_PointSize.html "link to GitHub".
Indeed, it seems pointSize & lineWidth properties could not be applied to google.charts.Scatter object.
But you could consider the following approach for adjusting the chart.
As an alternative for pointSize property,the point size could be specified via CSS:
#chart_div circle {
r: 3;
}
Regarding lineWidth property, points could be connected using line element once the chart is generated as demonstrated below.
Complete example
google.load('visualization', '1.1', { packages: ['scatter'] });
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'Student ID');
data.addColumn('number', 'Hours Studied');
data.addColumn('number', 'Final');
data.addRows([
[0, 0, 67], [1, 1, 88], [2, 2, 77],
[3, 3, 93], [4, 4, 85], [5, 5, 91],
[6, 6, 71], [7, 7, 78], [8, 8, 93],
[9, 9, 80], [10, 10, 82], [11, 0, 75],
[12, 5, 80], [13, 3, 90], [14, 1, 72],
[15, 5, 75], [16, 6, 68], [17, 7, 98],
[18, 3, 82], [19, 9, 94], [20, 2, 79],
[21, 2, 95], [22, 2, 86], [23, 3, 67],
[24, 4, 60], [25, 2, 80], [26, 6, 92],
[27, 2, 81], [28, 8, 79], [29, 9, 83]
]);
var options = {
chart: {
title: 'Students\' Final Grades',
subtitle: 'based on hours studied'
},
width: 900,
height: 500,
axes: {
y: {
'hours studied': { label: 'Hours Studied' },
'final grade': { label: 'Final Exam Grade' }
}
},
series: {
0: { axis: 'hours studied' },
1: { axis: 'final grade' }
},
//pointSize: 10,
//lineWidth: 1
};
var chart = new google.charts.Scatter(document.getElementById('chart_div'));
chart.draw(data, google.charts.Scatter.convertOptions(options));
google.visualization.events.addListener(chart, 'ready', configureChart);
}
function configureChart()
{
var chartContainer = document.getElementById('chart_div');
var options = {
pointSize: 3,
lineWidth: 1
};
drawLines(chartContainer,options);
}
function drawLines(chartContainer,options)
{
var points = chartContainer.getElementsByTagName('circle');
var area = {};
for(var i = 0; i < points.length;i++){
if(i > 0){
area.start = {'x': points[i-1].getAttribute('cx'), 'y': points[i-1].getAttribute('cy')};
area.end = {'x': points[i].getAttribute('cx'), 'y': points[i].getAttribute('cy')};
if(points[i].getAttribute('fill') == points[i-1].getAttribute('fill'))
drawLine(chartContainer,area,points[i].getAttribute('fill'),'1');
}
}
}
function drawLine(chartContainer,area,color,width)
{
var line = document.createElementNS('http://www.w3.org/2000/svg','line');
line.setAttribute('x1',area.start.x);
line.setAttribute('y1',area.start.y);
line.setAttribute('x2',area.end.x);
line.setAttribute('y2',area.end.y);
line.setAttribute('stroke-width',width);
line.setAttribute('stroke',color);
var svg = chartContainer.getElementsByTagName('svg')[0];
svg.appendChild(line);
}
#chart_div circle {
r: 3;
}
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="chart_div"></div>
I want to create a google chart which has 3 columns. Also I want to add 2 sets to data to it. Please refer to the JS code for understanding.
Also you can check https://jsfiddle.net/dt6syt2w/2/
I'm looking forward to getting some solution from user : asgallant
google.load('visualization', '1', {packages: ['corechart', 'line']});
google.setOnLoadCallback(drawTrendlines);
function drawTrendlines()
{
var data1 = new google.visualization.DataTable();
data1.addColumn('number', 'X');
data1.addColumn('number', 'Normal Value 1');
data1.addColumn('number', 'Peak Value 1');
data1.addRows([
[0, 0, 0], [1, 10, 15], [2, 23, 25], [3, 17, 26], [4, 18, 30], [5, 9, 20],
[6, 11, 25], [7, 27, 30]
]);
var data2 = new google.visualization.DataTable();
data2.addColumn('number', 'X');
data2.addColumn('number', 'Normal Value 2');
data2.addColumn('number', 'Peak Value 2');
data2.addRows([
[1, 1, 1], [2, 20, 25], [3, 25, 30], [4, 23, 35], [5, 28, 36], [6, 19, 40], [7, 80, 100]
]);
var joinedData = google.visualization.data.join(data1, data2, 'full', [[0, 0, 0]], [1], [1], [1]);
var options = {
hAxis: {
title: 'Time'
},
vAxis: {
title: 'Popularity'
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(joinedData, options);
}
Just have to fix up your join() call:
var joinedData = google.visualization.data.join(data1, data2, 'full', [[0, 0]], [1, 2], [1, 2]);
The [[0, 0]] compares keys at column position 0 for each datatable passed in. The [1, 2] supplied to the next arguments join the columns at position 1 and 2 in each data table. Since the columns named Normal Value 1, Peak Value 1, Normal Value 2, and Peak Value 2 are at those positions, the data comes from there.
google.load('visualization', '1', {
packages: ['corechart', 'line']
});
google.setOnLoadCallback(drawTrendlines);
function drawTrendlines() {
var data1 = new google.visualization.DataTable();
data1.addColumn('number', 'X');
data1.addColumn('number', 'Normal Value 1');
data1.addColumn('number', 'Normal Value 2');
data1.addRows([
[0, 0, 0],
[1, 10, 15],
[2, 23, 25],
[3, 17, 26],
[4, 18, 30],
[5, 9, 20],
[6, 11, 25],
[7, 27, 30]
]);
var data2 = new google.visualization.DataTable();
data2.addColumn('number', 'X');
data2.addColumn('number', 'Peak Value 1');
data2.addColumn('number', 'Peak Value 2');
data2.addRows([
[1, 1, 1],
[2, 20, 25],
[3, 25, 30],
[4, 23, 35],
[5, 28, 36],
[6, 19, 40],
[7, 80, 100]
]);
var joinedData = google.visualization.data.join(data1, data2, 'full', [
[0, 0]
], [1, 2], [1, 2]);
var options = {
hAxis: {
title: 'Time'
},
vAxis: {
title: 'Popularity'
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(joinedData, options);
}
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="chart_div">
<div>
I am working with high charts, I have a set of controls on a web page that allows the user to select months and locations. The issue is if they select a location that has no data. So lets say they select January and Hawaii but there is no data for Hawaii in January. Nothing will be displayed at all, but I would like the axis to appear along with the labels.
NOTE: I am trying to create a heatmap so I don't want to see the minimun color when there is no data.
A value of null seems to work. You can change your tooltip to not display if the value is null too: http://jsfiddle.net/SheldonNeilson/95um4x0q/1/
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/heatmap.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="height: 400px; min-width: 310px; max-width: 800px; margin: 0 auto"></div>
$(function () {
$('#container').highcharts({
chart: {
type: 'heatmap',
marginTop: 40,
marginBottom: 80
},
title: {
text: 'Sales per employee per weekday'
},
xAxis: {
categories: ['Alexander', 'Marie', 'Maximilian', 'Sophia', 'Lukas', 'Maria', 'Leon', 'Anna', 'Tim', 'Laura']
},
yAxis: {
categories: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
title: null
},
colorAxis: {
min: 0,
minColor: Highcharts.getOptions().colors[0],
maxColor: '#FFFFFF'
},
legend: {
align: 'right',
layout: 'vertical',
margin: 0,
verticalAlign: 'top',
y: 25,
symbolHeight: 280
},
tooltip: {
formatter: function () {
if(this.point.value == null){
return 'No data' ;
}else{
return '<b>' + this.series.xAxis.categories[this.point.x] + '</b> sold <br><b>' +
this.point.value + '</b> items on <br><b>' + this.series.yAxis.categories[this.point.y] + '</b>';
}
}
},
series: [{
name: 'Sales per employee',
borderWidth: 1,
data: [[0, 0, null], [0, 1, 19], [0, 2, 8], [0, 3, 24], [0, 4, 67], [1, 0, 92], [1, 1, 58], [1, 2, 78], [1, 3, 117], [1, 4, 48], [2, 0, 35], [2, 1, 15], [2, 2, 123], [2, 3, 64], [2, 4, 52], [3, 0, 72], [3, 1, 132], [3, 2, 114], [3, 3, 19], [3, 4, 16], [4, 0, 38], [4, 1, 5], [4, 2, 8], [4, 3, 117], [4, 4, 115], [5, 0, 88], [5, 1, 32], [5, 2, 12], [5, 3, 6], [5, 4, 120], [6, 0, 13], [6, 1, 44], [6, 2, 88], [6, 3, 98], [6, 4, 96], [7, 0, 31], [7, 1, 1], [7, 2, 82], [7, 3, 32], [7, 4, 30], [8, 0, 85], [8, 1, 97], [8, 2, 123], [8, 3, 64], [8, 4, 84], [9, 0, 47], [9, 1, 114], [9, 2, 31], [9, 3, 48], [9, 4, 91]],
dataLabels: {
enabled: true,
color: '#000000'
}
}]
});
});
I am using Google Charts for a simple Area Chart. I have many points to draw, i would like to set the interval between them. At the moment there is a list 1,2,3,4,5,6,7 etc
I would like to show all points but with custom hAxis labels, like: 0 5 10 15 20 etc
The code is:
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Day', 'Visit', 'Applic.'],
['1', 19, 1],
['2', 100, 9],
['3', 103, 18],
['4', 42, 8],
['5', 34, 2],
['6', 63, 9],
['7', 35, 7],
['8', 427, 51],
['9', 314, 38],
['10', 71, 4],
['11', 27, 0],
['12', 25, 0],
['13', 78, 0],
['14', 54, 0],
['15', 60, 0],
['16', 47, 0],
['17', 29, 0],
['18', 16, 0],
['19', 10, 0],
['20', 26, 0],
['21', 200, 0],
['22', 255, 0],
['23', 160, 0],
['24', 30, 0],
['25', 35, 0],
['26', 9, 0],
]);
var options = {
vAxis: {minValue: 0},
hAxis: {
title: 'Days',
},
pointSize: 8,
colors: ['#9EC653', '#475825'],
chartArea: {
left: 40,
top: 40,
width: 600,
height: 250
},
legend: {position: 'top', textStyle: {fontSize: 14}, alignment: 'center'},
backgroundColor: '#f7f6f4',
};
var chart = new google.visualization.AreaChart(document.getElementById('visits'));
chart.draw(data, options);
}
</script>
And the result is:
The horizontal labels represent all points, I need all of them, but showing specific horizontal labels. How can i set specific interval?
Thanks
This will be much easier to achieve if you enter your axis values as numbers instead of strings:
var data = google.visualization.arrayToDataTable([
['Day', 'Visit', 'Applic.'],
[1, 19, 1],
[2, 100, 9],
[3, 103, 18],
[4, 42, 8],
[5, 34, 2],
[6, 63, 9],
[7, 35, 7],
[8, 427, 51],
[9, 314, 38],
[10, 71, 4],
[11, 27, 0],
[12, 25, 0],
[13, 78, 0],
[14, 54, 0],
[15, 60, 0],
[16, 47, 0],
[17, 29, 0],
[18, 16, 0],
[19, 10, 0],
[20, 26, 0],
[21, 200, 0],
[22, 255, 0],
[23, 160, 0],
[24, 30, 0],
[25, 35, 0],
[26, 9, 0]
]);
You can then specify the hAxis.ticks option to tell the chart which values should be labeled on the axis:
hAxis: {
title: 'Days',
ticks: [0, 5, 10, 15, 25]
}