I have been doing an application which uses google-chart, google-fonts and awesome-fonts APIs. My main font is from google-fonts, I include them inside <head> tag, as well as the awesome-fonts.
However, when I use google-charts, fonts seems to be refreshed after the charts are loaded. By refresh, I mean, they seem like disappear and reload in a second. This makes my application seems weird. I didn't like it, and I'm not sure that google-charts is doing this effect.
here is my codesnippet to load google-charts;
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
function drawChart() {
var best_letters_data = google.visualization.arrayToDataTable(
JSON.parse('{{ best_letters|safe }}')
);
var worst_letters_data = google.visualization.arrayToDataTable(
JSON.parse('{{ worst_letters|safe }}')
);
var best_letters_options = {
title: 'Top Rated Hiragana Letters',
width: 450,
height: 240,
isHtml: true,
hAxis: {title: 'Letters', titleTextStyle: {color: 'red'}}
};
var worst_letters_options = {
title: 'Worst Rated Hiragana Letters',
width: 450,
height: 240,
isHtml: true,
hAxis: {title: 'Letters', titleTextStyle: {color: 'red'}}
};
var best_letters_chart = new google.visualization.ColumnChart(document.getElementById('best_letters_div'));
best_letters_chart.draw(best_letters_data, best_letters_options);
var worst_letters_chart = new google.visualization.ColumnChart(document.getElementById('worst_letters_div'));
worst_letters_chart.draw(worst_letters_data, worst_letters_options);
$("#loader").hide();
}
google.setOnLoadCallback(drawChart);
</script>
If I comment the lines which draws the charts ( best_letters_chart.draw(best_letters_data, best_letters_options); and worst_letters_chart.draw(worst_letters_data, worst_letters_options); ) my fonts are rendered one time, but well, the charts are not displayed with this time.
Why this is happening? I'm quite curious about this. If someone has any idea, please let me know.
Thanks in advance.
Related
Okay so I have some data and I need to get Google Charts to sort 3 types of answers from several lines of code. How do I do that with my current code:
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current'); // Don't need to specify chart libraries!
google.charts.setOnLoadCallback(drawVisualization);
function drawVisualization() {
var wrapper = new google.visualization.ChartWrapper( {
chartType: 'PieChart',
dataSourceUrl:'https://docs.google.com/spreadsheets/d/1xEEMFnOrrGDEAZy5YMi3H-aSfyzwtHhAmBJuJYZjXsI/gviz/tq?range=A1:B57',
query: 'SELECT A,B WHERE B > 100 ORDER BY B',
options: {'title': 'AASHAN OCEAN TRANSPORTATION METHOD', legend: 'none'},
containerId: 'vis_div'
});
wrapper.draw()
}
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="vis_div" style="width: 700px; height: 700px;"></div>
</body>
</html>
Here is the document I'm talking about deriving code from. [Document]
If anyone could help it would be most apprecriated.
i'm not sure what you mean by sort 3 types of answers
but it looks like you want to group the data for a pie chart
you can aggregate the query result with a GROUP BY clause
query: 'SELECT A,COUNT(A) WHERE B > 100 GROUP BY A'
see following working snippet...
google.charts.load('current', {
packages:['controls', 'corechart', 'table']
}).then(function () {
var wrapper = new google.visualization.ChartWrapper( {
chartType: 'PieChart',
dataSourceUrl: 'https://docs.google.com/spreadsheets/d/1xEEMFnOrrGDEAZy5YMi3H-aSfyzwtHhAmBJuJYZjXsI/gviz/tq?range=A1:B57',
query: 'SELECT A,COUNT(A) WHERE B > 100 GROUP BY A',
options: {title: 'AASHAN OCEAN TRANSPORTATION METHOD', legend: 'none'},
containerId: 'vis_div'
});
wrapper.draw()
});
html, body, div {
height: 100%;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="vis_div"></div>
I made a simple HTML file and added it to my assets folder within my Android Studio. The file works perfectly when viewed directly on a browser. However, when viewed from inside of a webview or in a mobile device or emulator, the Google chart range controls are not draggable at all. The chart looks fine, but the controls are frozen. I can't find any help on this subject, so I would appreciate if someone could give me some pointers.
I have enabled Javascript on the webview and the jsapi.js is local inside of the assets folder too. Again, the chart looks fine. It's just the range control that is not working. Any ideas? The HTML code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='content-type' content='text/html; charset=UTF-8'>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type='text/javascript' src='jsapi.js'></script>
<!--TO TEST LOCALLY IN A BROWSER, USE THE LINE BELOW-->
<!--script type="text/javascript" src="https://www.google.com/jsapi"></script-->
<script type="text/javascript">
google.load('visualization', '1.0', {packages: ['controls']});
google.setOnLoadCallback(makeChart);
function makeChart( )
{
var maxWidth = 400;
var maxHeight = 400;
var data = new google.visualization.DataTable();
data.addColumn('number', 'Stock');
data.addColumn('number', 'Profit');
for(var x=10;x<50;x++){
data.addRow([x, x+1]);
}
var rangeFilter = new google.visualization.ControlWrapper({
controlType: 'ChartRangeFilter',
containerId: 'range_filter_div',
options:{
filterColumnIndex: 0,
ui: {
chartOptions:{
width: maxWidth,
height: 50,
chartArea: { width: '75%' }
},
minRangeSize: 1
}
},
view: { columns: [0, 1] }
});
var chart = new google.visualization.ChartWrapper({
chartType: 'LineChart',
containerId: 'chart_div',
options: {
width: maxWidth,
height: maxHeight,
chartArea: { width: '75%' },
vAxis:{title:'Left Label'},
hAxis:{title:'Bottom Label'},
legend: 'none'
}
});
var dash = new google.visualization.Dashboard(document.getElementById('dashboard'));
dash.bind([rangeFilter], [chart]);
dash.draw(data);
}
</script>
</head>
<body>
<div id='dashboard'>
<div id='chart_div'></div>
<div id='range_filter_div'></div>
</div>
</body>
</html>
To enable Javascript on the WebView, here is the onCreate code for the main activity:
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
WebView wv = (WebView) findViewById(R.id.myWebView);
//JavaScript is disabled on webviews by default
WebSettings ws = wv.getSettings();
ws.setJavaScriptEnabled(true);
wv.loadUrl("file:///android_asset/index.html");
}
for starters, recommend using the newer library loader.js
<script src="https://www.gstatic.com/charts/loader.js"></script>
instead of jsapi, according to the release notes...
The version of Google Charts that remains available via the jsapi loader is no longer being updated consistently. Please use the new gstatic loader from now on.
this will only change the load statement, see following working snippet...
google.charts.load('current', {
callback: makeChart,
packages: ['controls']
});
function makeChart( )
{
var maxWidth = 400;
var maxHeight = 400;
var data = new google.visualization.DataTable();
data.addColumn('number', 'Stock');
data.addColumn('number', 'Profit');
for(var x=10;x<50;x++){
data.addRow([x, x+1]);
}
var rangeFilter = new google.visualization.ControlWrapper({
controlType: 'ChartRangeFilter',
containerId: 'range_filter_div',
options:{
filterColumnIndex: 0,
ui: {
chartOptions:{
width: maxWidth,
height: 50,
chartArea: { width: '75%' }
},
minRangeSize: 1
}
},
view: { columns: [0, 1] }
});
var chart = new google.visualization.ChartWrapper({
chartType: 'LineChart',
containerId: 'chart_div',
options: {
width: maxWidth,
height: maxHeight,
chartArea: { width: '75%' },
vAxis:{title:'Left Label'},
hAxis:{title:'Bottom Label'},
legend: 'none'
}
});
var dash = new google.visualization.Dashboard(document.getElementById('dashboard'));
dash.bind([rangeFilter], [chart]);
dash.draw(data);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
<div id="range_filter_div"></div>
<div id="dashboard"></div>
Even ChartRangeFilter in example https://developers.google.com/chart/interactive/docs/gallery/controls#chartrangefilter_1 does not work on android browser. So code or library may not have anything to do with its non functionality, it simply may not be supported by android yet.
I have been developing a web application in ASP.Net, which should return information from a database via a Web Service class.
From there, I wish to bind the data to a Google Combo chart.
The data can be bound to a grid view, so I know the method to call from the database is working, but when I try to bind it to the chart I receive the error message:
Invalid Json String:
!Doctype HTML
html lang = "en"
This is my first time working with javascript, so I assume that my javascript methods are accessing the wrong data, but I'm not sure where I'm going wrong.
If anybody could let me know what I have done wrong, it would be appreciated.
DEFAULT.ASPX
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
google.load("visualization", "1", { packages: ["corechart"] });
google.setOnLoadCallback(drawVisualization);
function drawVisualization() {
var jsonData = $.ajax({
url: "Default.aspx/GetChartData",
dataType: "json",
async: false
}).responseText;
var data = new google.visualization.DataTable(jsonData);
var options = {
title: 'Chart Title',
vAxis: { title: 'Scores %' },
hAxis: { title: 'Counties' },
seriesType: 'bars',
series: {
2: {
targetAxisIndex: 1
},
vAxes: {
1: {
title: '1',
textStle: { color: 'red' }
}
}
}
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<asp:GridView ID="Grid1D" runat="server"
AutoGenerateColumns = "true" Font-Names = "Arial"
Font-Size = "11pt" AlternatingRowStyle-BackColor = "#C2D69B"
HeaderStyle-BackColor = "green" AllowPaging ="true"
PageSize = "10" Caption = "1-Dimensional Array">
</asp:GridView>
<div id ="chart_div" style="width:500px;height:400px"></div>
<asp:Literal ID="ltScripts" runat="server"></asp:Literal>
</body>
</html>
Sounds a lot like your call to Default.aspx/GetChartData returns an error page from the IIS that is hosting it. You should take a look at your jsonData variable, as it is anything but json.
I'm new to require.js.
I'm trying to display Google Pie Chart.
I be able to get it working in my JSFiddle.
Issue
Then, when I move them into my real project, it doesn't work.
My real project using require.js
In my path, I declare it like this
'piechart' : 'reports/section-exercise/piechart',
In my piechart.js , I have it like this :
'use strict';
define(['jquery' ], function ($) {
$(function () {
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['l', 23],
['m', 30],
['h', 47],
]);
var options = {
width: 200,
height: 200,
chartArea: {
left: 10,
top: 20,
width: "100%",
height: "100%"
},
colors: ['#F46E4E', '#ADB55E', '#F9C262'],
legend: 'none',
enableInteractivity: false,
pieSliceText: 'none',
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
});
});
include
I included this link on top of my HTML file
<link rel="stylesheet" type="text/css" href="https://www.google.com/jsapi?autoload={%27modules%27:[{%27name%27:%27visualization%27,%27version%27:%271.1%27,%27packages%27:[%27corechart%27]}]}">
Result
Error Message
Then, when I clicked on the file on the right, it re-direct me to this line :
How do I stop that error and make my chart display again ?
How is my include link ? I used the same one in JSFiddle as external resources and it works.
You need to include that URL as JavaScript, but you're including it as CSS. You need this:
<script src="..."></script>
rather than this:
<link rel="stylesheet" type="text/css" href="...">
i'm trying out jqplot just to use for bar graphs but no matter what example I try, i keep getting this error in the console:
"Cannot read property 'BarRenderer' of undefined"
i did a google search and can't find much of anything on this and i don't understand.. any help would be great. i'm using asp.net MVC 4
#{
ViewBag.Title = "View1";
}
<h2>View1</h2>
<script src="~/Scripts/jqPlot/jquery.min.js"></script>
<script src="~/Scripts/jqPlot/jquery.jqplot.min.js"></script>
<script src="~/Scripts/jqPlot/plugins/jqplot.barRenderer.min.js"></script>
<script src="~/Scripts/jqPlot/plugins/jqplot.categoryAxisRenderer.min.js"></script>
<script src="~/Scripts/jqPlot/plugins/jqplot.pointLabels.min.js"></script>
<link href="~/Scripts/jqPlot/jquery.jqplot.css" rel="stylesheet" type="text/css">
<div id="chart1" style="height:400px;width:300px; "></div>
<script>
$(document).ready(function () {
var s1 = [200, 600, 700, 1000];
var s2 = [460, -210, 690, 820];
var s3 = [-260, -440, 320, 200];
// Can specify a custom tick Array.
// Ticks should match up one for each y value (category) in the series.
var ticks = ['May', 'June', 'July', 'August'];
var plot1 = $.jqplot('chart1', [s1, s2, s3], {
// The "seriesDefaults" option is an options object that will
// be applied to all series in the chart.
seriesDefaults: {
renderer: $.jqplot.BarRenderer,
rendererOptions: { fillToZero: true }
},
// Custom labels for the series are specified with the "label"
// option on the series option. Here a series option object
// is specified for each series.
series: [
{ label: 'Hotel' },
{ label: 'Event Regristration' },
{ label: 'Airfare' }
],
// Show the legend and put it outside the grid, but inside the
// plot container, shrinking the grid to accomodate the legend.
// A value of "outside" would not shrink the grid and allow
// the legend to overflow the container.
legend: {
show: true,
placement: 'outsideGrid'
},
axes: {
// Use a category axis on the x axis and use our custom ticks.
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ticks
},
// Pad the y axis just a little so bars can get close to, but
// not touch, the grid boundaries. 1.2 is the default padding.
yaxis: {
pad: 1.05,
tickOptions: { formatString: '$%d' }
}
}
});
});
</script>
I've recreated the above snippet and it works fine. Are you sure all the files that you are including at the top of your script have been uploaded to your server? The only way I can replicate your error is by not uploading "jquery.jqplot.min.js" to my server.
Uncaught TypeError: Cannot set property 'BarRenderer' of
undefined(anonymous function) # jqplot.barRenderer.min.js:57(anonymous
function) # jqplot.barRenderer.min.js:57
I have faced same issue It is mainly related to js loading issue . Put those reference files in master layout page
Solved by removing the Scripts.Render at the bottom of View_Layout.cshtml
as it was calling jquery twice.
<div class="container body-content">
#RenderBody()
</div>
#Scripts.Render("~/bundles/jquery") <-- remove this line
#Scripts.Render("~/bundles/bootstrap") <-- remove this line
#RenderSection("scripts", required: false) <-- remove this line
</body>
</html>