Mixing
Google charts not showing yaxis labels
I'm using google charts to show two graphs.
One is a bar graph and the other - line. Each graph has a dropdown with options.
Changing the value in the dropdown will reload the graph with the respective values.
The options in the dropdown are - SuperTitle, dimensions, impressions.
On page load, "Metrics" will be selected by default and the graph with related values is displayed.
On page load, the labels on yaxis do not show up. However, if i select a different value in the dropdown and then "SuperTitle", the yaxis labels show up.
What suprises me is.. on page load and the dropdown, the same function is called which renders the graph.
What could be the issue.
<div id="graphResultView3" class="divGraph3"></div>
<script type="text/javascript">
$(document).ready(function () {
google.charts.setOnLoadCallback(DrawResultView3Graph);
DrawResultView3Graph();
$(document.body).on("change", ".ddlKeyMetricColumns", function(){
$("#graphResultView3").html("");
DrawResultView3Graph();
});
});
function DrawResultView3Graph(){
var graphBarColor = "#029789";
var data = new google.visualization.DataTable();
data.addColumn("string", "value");
data.addColumn("number", $(".rv3Header .select-box .ddlKeyMetricColumns option:selected").html());
data.addColumn({type: "string", role: "style"});
if (keyMetricsJSON == null){
keyMetricsJSON = @Html.Raw(Json.Encode(Model.KeyMetrics));
}
if(keyMetricsJSON != null){
for (var i = 0; i < keyMetricsJSON.length; i++) {
var outputFacetValue = keyMetricsJSON[i].value;
switch($(".rv3Header .select-box .ddlKeyMetricColumns").val()){
case 1:
case "1":
var upto3DecimalDigits = (Number(keyMetricsJSON[i].engagementRate)).toFixed(constants.MaxDecimalDigits);
data.addRow([outputFacetValue, Number(upto3DecimalDigits), graphBarColor]);
break;
case 2:
case "2":
data.addRow([outputFacetValue, Number(keyMetricsJSON[i].uniqueActors), graphBarColor]);
break;
}
}
var options = {
legend: {position: "none"},
width: $(window).width() * 0.80,
height:constants.GraphHeight,
hAxis: {
title: $(".rv3Header .select-box .ddlKeyMetricColumns option:selected").html(),
textStyle : {
fontSize: graphValueFontSize
}
},
vAxis: {
title: $(".ddlOutputTargetingFacets:first option:selected").html(),
textStyle : {
fontSize: graphValueFontSize
}
}
};
var chart = new google.visualization.BarChart(document.getElementById("graphResultView3"));
chart.draw(data, options);
}
else{
$(".divGraph3").remove();
}
}
</script>
google-visualization
asked Jan 2 at 13:13
QwertyQwerty
89222966
add a comment |
I'm using google charts to show two graphs.
One is a bar graph and the other - line. Each graph has a dropdown with options.
Changing the value in the dropdown will reload the graph with the respective values.
The options in the dropdown are - SuperTitle, dimensions, impressions.
On page load, "Metrics" will be selected by default and the graph with related values is displayed.
On page load, the labels on yaxis do not show up. However, if i select a different value in the dropdown and then "SuperTitle", the yaxis labels show up.
What suprises me is.. on page load and the dropdown, the same function is called which renders the graph.
What could be the issue.
<div id="graphResultView3" class="divGraph3"></div>
<script type="text/javascript">
$(document).ready(function () {
google.charts.setOnLoadCallback(DrawResultView3Graph);
DrawResultView3Graph();
$(document.body).on("change", ".ddlKeyMetricColumns", function(){
$("#graphResultView3").html("");
DrawResultView3Graph();
});
});
function DrawResultView3Graph(){
var graphBarColor = "#029789";
var data = new google.visualization.DataTable();
data.addColumn("string", "value");
data.addColumn("number", $(".rv3Header .select-box .ddlKeyMetricColumns option:selected").html());
data.addColumn({type: "string", role: "style"});
if (keyMetricsJSON == null){
keyMetricsJSON = @Html.Raw(Json.Encode(Model.KeyMetrics));
}
if(keyMetricsJSON != null){
for (var i = 0; i < keyMetricsJSON.length; i++) {
var outputFacetValue = keyMetricsJSON[i].value;
switch($(".rv3Header .select-box .ddlKeyMetricColumns").val()){
case 1:
case "1":
var upto3DecimalDigits = (Number(keyMetricsJSON[i].engagementRate)).toFixed(constants.MaxDecimalDigits);
data.addRow([outputFacetValue, Number(upto3DecimalDigits), graphBarColor]);
break;
case 2:
case "2":
data.addRow([outputFacetValue, Number(keyMetricsJSON[i].uniqueActors), graphBarColor]);
break;
}
}
var options = {
legend: {position: "none"},
width: $(window).width() * 0.80,
height:constants.GraphHeight,
hAxis: {
title: $(".rv3Header .select-box .ddlKeyMetricColumns option:selected").html(),
textStyle : {
fontSize: graphValueFontSize
}
},
vAxis: {
title: $(".ddlOutputTargetingFacets:first option:selected").html(),
textStyle : {
fontSize: graphValueFontSize
}
}
};
var chart = new google.visualization.BarChart(document.getElementById("graphResultView3"));
chart.draw(data, options);
}
else{
$(".divGraph3").remove();
}
}
</script>
google-visualization
asked Jan 2 at 13:13
QwertyQwerty
89222966
where / when is the value forgraphValueFontSizeset?
– WhiteHat
Jan 5 at 19:25
add a comment |
I'm using google charts to show two graphs.
One is a bar graph and the other - line. Each graph has a dropdown with options.
Changing the value in the dropdown will reload the graph with the respective values.
The options in the dropdown are - SuperTitle, dimensions, impressions.
On page load, "Metrics" will be selected by default and the graph with related values is displayed.
On page load, the labels on yaxis do not show up. However, if i select a different value in the dropdown and then "SuperTitle", the yaxis labels show up.
What suprises me is.. on page load and the dropdown, the same function is called which renders the graph.
What could be the issue.
<div id="graphResultView3" class="divGraph3"></div>
<script type="text/javascript">
$(document).ready(function () {
google.charts.setOnLoadCallback(DrawResultView3Graph);
DrawResultView3Graph();
$(document.body).on("change", ".ddlKeyMetricColumns", function(){
$("#graphResultView3").html("");
DrawResultView3Graph();
});
});
function DrawResultView3Graph(){
var graphBarColor = "#029789";
var data = new google.visualization.DataTable();
data.addColumn("string", "value");
data.addColumn("number", $(".rv3Header .select-box .ddlKeyMetricColumns option:selected").html());
data.addColumn({type: "string", role: "style"});
if (keyMetricsJSON == null){
keyMetricsJSON = @Html.Raw(Json.Encode(Model.KeyMetrics));
}
if(keyMetricsJSON != null){
for (var i = 0; i < keyMetricsJSON.length; i++) {
var outputFacetValue = keyMetricsJSON[i].value;
switch($(".rv3Header .select-box .ddlKeyMetricColumns").val()){
case 1:
case "1":
var upto3DecimalDigits = (Number(keyMetricsJSON[i].engagementRate)).toFixed(constants.MaxDecimalDigits);
data.addRow([outputFacetValue, Number(upto3DecimalDigits), graphBarColor]);
break;
case 2:
case "2":
data.addRow([outputFacetValue, Number(keyMetricsJSON[i].uniqueActors), graphBarColor]);
break;
}
}
var options = {
legend: {position: "none"},
width: $(window).width() * 0.80,
height:constants.GraphHeight,
hAxis: {
title: $(".rv3Header .select-box .ddlKeyMetricColumns option:selected").html(),
textStyle : {
fontSize: graphValueFontSize
}
},
vAxis: {
title: $(".ddlOutputTargetingFacets:first option:selected").html(),
textStyle : {
fontSize: graphValueFontSize
}
}
};
var chart = new google.visualization.BarChart(document.getElementById("graphResultView3"));
chart.draw(data, options);
}
else{
$(".divGraph3").remove();
}
}
</script>
google-visualization
asked Jan 2 at 13:13
QwertyQwerty
89222966
I'm using google charts to show two graphs.
One is a bar graph and the other - line. Each graph has a dropdown with options.
Changing the value in the dropdown will reload the graph with the respective values.
The options in the dropdown are - SuperTitle, dimensions, impressions.
On page load, "Metrics" will be selected by default and the graph with related values is displayed.
On page load, the labels on yaxis do not show up. However, if i select a different value in the dropdown and then "SuperTitle", the yaxis labels show up.
What suprises me is.. on page load and the dropdown, the same function is called which renders the graph.
What could be the issue.
<div id="graphResultView3" class="divGraph3"></div>
<script type="text/javascript">
$(document).ready(function () {
google.charts.setOnLoadCallback(DrawResultView3Graph);
DrawResultView3Graph();
$(document.body).on("change", ".ddlKeyMetricColumns", function(){
$("#graphResultView3").html("");
DrawResultView3Graph();
});
});
function DrawResultView3Graph(){
var graphBarColor = "#029789";
var data = new google.visualization.DataTable();
data.addColumn("string", "value");
data.addColumn("number", $(".rv3Header .select-box .ddlKeyMetricColumns option:selected").html());
data.addColumn({type: "string", role: "style"});
if (keyMetricsJSON == null){
keyMetricsJSON = @Html.Raw(Json.Encode(Model.KeyMetrics));
}
if(keyMetricsJSON != null){
for (var i = 0; i < keyMetricsJSON.length; i++) {
var outputFacetValue = keyMetricsJSON[i].value;
switch($(".rv3Header .select-box .ddlKeyMetricColumns").val()){
case 1:
case "1":
var upto3DecimalDigits = (Number(keyMetricsJSON[i].engagementRate)).toFixed(constants.MaxDecimalDigits);
data.addRow([outputFacetValue, Number(upto3DecimalDigits), graphBarColor]);
break;
case 2:
case "2":
data.addRow([outputFacetValue, Number(keyMetricsJSON[i].uniqueActors), graphBarColor]);
break;
}
}
var options = {
legend: {position: "none"},
width: $(window).width() * 0.80,
height:constants.GraphHeight,
hAxis: {
title: $(".rv3Header .select-box .ddlKeyMetricColumns option:selected").html(),
textStyle : {
fontSize: graphValueFontSize
}
},
vAxis: {
title: $(".ddlOutputTargetingFacets:first option:selected").html(),
textStyle : {
fontSize: graphValueFontSize
}
}
};
var chart = new google.visualization.BarChart(document.getElementById("graphResultView3"));
chart.draw(data, options);
}
else{
$(".divGraph3").remove();
}
}
</script>
google-visualization
google-visualization
asked Jan 2 at 13:13
QwertyQwerty
89222966
asked Jan 2 at 13:13
QwertyQwerty
89222966
edited Jan 2 at 13:20
Qwerty
asked Jan 2 at 13:13
QwertyQwerty
89222966
asked Jan 2 at 13:13
QwertyQwerty
89222966
asked Jan 2 at 13:13
QwertyQwerty
89222966
89222966
where / when is the value forgraphValueFontSizeset?
– WhiteHat
Jan 5 at 19:25
add a comment |
where / when is the value forgraphValueFontSizeset?
– WhiteHat
Jan 5 at 19:25
where / when is the value for
graphValueFontSize set?– WhiteHat
Jan 5 at 19:25
where / when is the value for
graphValueFontSize set?– WhiteHat
Jan 5 at 19:25
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54007026%2fgoogle-charts-not-showing-yaxis-labels%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54007026%2fgoogle-charts-not-showing-yaxis-labels%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
where / when is the value for
graphValueFontSizeset?– WhiteHat
Jan 5 at 19:25