I'd like to know if in my case I can use razor inside javascript!
<html>
<head>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
// Load the Visualization API and the corechart package.
google.charts.load('current', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
['Mushrooms', 3],
['Onions', 1],
['Olives', 1],
['Zucchini', 1],
['Pepperoni', 2]
]);
// Set chart options
var options = {'title':'How Much Pizza I Ate Last Night',
'width':400,
'height':300};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<!--Div that will hold the pie chart-->
<div id="chart_div"></div>
</body>
</html>
This is just a basic code from Google that will show a pie chart with static values and I would like to add some variables to the numbers in the chart so that they can change based on data on my page.
data.addRows([
['Mushrooms', 3],
['Onions', 1],
['Olives', 1],
['Zucchini', 1],
['Pepperoni', 2]
]);
Basically this is the part that matters in that case, I would like to swap the numbers in this code to razor variables like for example #number or something, is this possible?
While searching around for some answers I found that adding in the javascript code would make it allow razor but I couldnt make it work, when I did that the chart didnt even show up, just by adding <text>, not even any razor code.
Or if you have experience with Google Charts API and know how to do this in a better way overall!
Yes you can use razor inside of the <script> tag.
<script type="text/javascript">
data.addRows([
['#someRazorString', #someRazorNumber]
]);
</script>
also, you can render any .net object using
#{
var jsonSerializerSettings = new JsonSerializerSettings { ContractResolver = new CamelCasePropertyNamesContractResolver() };
<text>
<script type="text/javascript">
var someJsObjectOrArray = #Html.Raw(JsonConvert.SerializeObject(Model.someDotNetObjectOrArray, jsonSerializerSettings)));
</script>
</text>
}
Related
I would like to use Google chart javascript library to create illustrations during a XSL-FO transformation. I found some examples using the now deprecated Google static image chart API to display charts using <fo:instream-foreign-object>. Since the documentation says that the charts are displayed in SVG, I was wondering if it's possible to do the same with the javascript library using MSXML processor's element.
I wrote a test stylesheet using the sample below:
<html>
<head>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
// Load the Visualization API and the corechart package.
google.charts.load('current', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
['Mushrooms', 3],
['Onions', 1],
['Olives', 1],
['Zucchini', 1],
['Pepperoni', 2]
]);
// Set chart options
var options = {'title':'How Much Pizza I Ate Last Night',
'width':400,
'height':300};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<!--Div that will hold the pie chart-->
<div id="chart_div"></div>
</body>
</html>
In my stylesheet I first define the drawChart() function inside the gchart namespace:
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:xs="http://www.w3.org/2001/XMLSchema" xmlns:msxsl="urn:schemas-microsoft-com:xslt"
xmlns:fo="http://www.w3.org/1999/XSL/Format" xmlns:gchart="https://developers.google.com/chart/" exclude-result-prefixes="xs" version="2.0">
<msxsl:script language="JScript" implements-prefix="gchart">
import https://www.gstatic.com/charts/loader.js;
// Load the Visualization API and the corechart package.
google.charts.load('current', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
['Mushrooms', 3],
['Onions', 1],
['Olives', 1],
['Zucchini', 1],
['Pepperoni', 2]
]);
// Set chart options
var options = {'title':'How Much Pizza I Ate Last Night',
'width':400,
'height':300};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</msxsl:script>
Then I call gchart:drawChart() inside <fo:instream-foreign-object> hoping that it will return the SVG code.
<xsl:template match="/">
<fo:root font-size="12pt" font-family="Times, PmingLiu">
<fo:layout-master-set>
<fo:simple-page-master page-height="297mm" page-width="210mm"
margin="25mm 25mm 25mm 25mm" master-name="defaultMaster">
<fo:region-body margin="0mm 0mm 0mm 0mm"/>
<fo:region-before extent="0mm" />
<fo:region-after extent="0mm" />
</fo:simple-page-master>
</fo:layout-master-set>
<fo:page-sequence master-reference="defaultMaster">
<fo:flow flow-name="xsl-region-body">
<fo:instream-foreign-object>
<xsl:value-of select="gchart:drawChart()"/>
</fo:instream-foreign-object>
</fo:flow>
</fo:page-sequence>
</fo:root>
</xsl:template>
</xsl:stylesheet>
The problem is that Microsoft JScript doesn't load the library: it issues an error when encountering the import https://www.gstatic.com/charts/loader.js. How should I do?
Besides, do you think the draw() function will return the SVG code?
As I am new to ZK framework and trying to implement javascript code inside zul.
My code is below :
<zk>
<window id="HomePage" border="none" width="100%" height="100%"
hflex="min" style="background-color:green">
<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([
['Task', 'Hours per Day'],
['Automation', 11],
['Manual', 2],
['Report', 2],
['Payroll', 2],
['MISC', 7]
]);
var options = {
title: 'My Daily Work Activities',
is3D: true,
};
var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
chart.draw(data, options);
}
</script>
When I am executing the above code I am getting a blank page. Can anyone please suggest me how I can modify this code to get a pie-chart.
You are lacking an element to draw the chart to:
document.getElementById('piechart_3d') does not find anything.
So you have to add it:
<zk xmlns:n="native">
<window>
...
<n:div id="piechart_3d"></n:div>
Here I used the native namespace of ZK to cause it to render an exact HTML-div instead of a zk widget. This then can be resolved by document.getElementById.
Another hint: hflex='min' of the window produced some issues with my tests, so I removed it in the working example below.
Working example:
http://zkfiddle.org/sample/3env602/1-google-pi-chart
UPDATE:
Another option would be to use ZK's javascript classes to find the element to draw to. This eliminates the use of the native namespace.
zk.Widget.$("$piechart_3d") get's you the zk Widget, on which you can call the $n() function to get the DOMElement it is bound to.
<zk>
<window>
...
<script>
...
var chart = new google.visualization.PieChart(zk.Widget.$("$piechart_3d").$n());
chart.draw(data, options);
</script>
<div id="piechart_3d"></div>
</window>
</zk>
Example:
http://zkfiddle.org/sample/gnt3cl/3-google-pi-chart-zk
I want to load google chart library and use it from only one script tag.
Here is example of my code. When I loaded google API with separate script
everything working properly. But I want to use just one script if it is
possible.
<html>
<head>
<title>one script tag test</title>
</head>
<body>
<!--Div that will hold the pie chart-->
<div id="chart_div"></div>
<script type="text/javascript">
// Here I'm creating a script object and
// load jsapi
var scr = document.createElement("script");
scr.setAttribute("src","https://www.google.com/jsapi");
document.head.appendChild(scr);
// here i wait until
// google object appears.
(function waitForGoogleLoad() {
if(typeof google == 'undefined') {
setTimeout(waitForGoogleLoad, 0);
} else {
processChart();
}
})();
function processChart() {
// Load the Visualization API and the piechart package.
google.load('visualization', '1.0', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
['Mushrooms', 3],
['Onions', 1],
['Olives', 1],
['Zucchini', 1],
['Pepperoni', 2]
]);
// Set chart options
var options = {'title':'How Much Pizza I Ate Last Night',
'width':400,
'height':300};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
}
</script>
</body>
</html>
I would be very grateful for any ideas and recommendations.
Best regards.
The easiest way to handle this is to use the autoloader syntax in the script tag. That allows you to avoid any issues with waiting for the script to load and calling the google loader from inside another function:
var scr = document.createElement("script");
scr.setAttribute("src",'https://www.google.com/jsapi?autoload={"modules":[{"name":"visualization","version":"1","packages":["corechart"],"callback":"drawChart"}]}');
document.head.appendChild(scr);
function drawChart() {
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
['Mushrooms', 3],
['Onions', 1],
['Olives', 1],
['Zucchini', 1],
['Pepperoni', 2]
]);
// Set chart options
var options = {
'title':'How Much Pizza I Ate Last Night',
'width':400,
'height':300
};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
See a working example here: http://jsfiddle.net/asgallant/G9PKE/
I am trying to create a linked view in Google Chart. What a linked view is selecting a part of visualization, let's say in a pie chart, and the same is selected (or highlighted) in the linked view, which let's say is the bar chart. I am a novice at Google Charts and I don't know how to use JavaScript too. I picked up the code from the Google Documentation and did some modifications in it. But it does not seem to work. The code is as follows:
<!DOCTYPE HTML>
<html>
<head>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.load('visualization', '1.0', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
google.setOnLoadCallback(drawChart2);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
['Mushrooms', 3],
['Onions', 1],
['Olives', 1],
['Zucchini', 1],
['Pepperoni', 2]
]);
// Set chart options
var options = {'title':'How Much Pizza I Ate Last Night',
'width':400,
'height':300};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
var chart2 = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
function drawChart2() {
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
['Mushrooms', 3],
['Onions', 1],
['Olives', 1],
['Zucchini', 1],
['Pepperoni', 2]
]);
// Set chart options
var options = {'title':'How Much Pizza I Ate Last Night',
'width':400,
'height':300};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<!--Div that will hold the pie chart-->
<div id="chart_div"></div>
</body>
</html>
You need to use "select" event handlers to link the two charts together, like this:
function drawChart() {
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
['Mushrooms', 3],
['Onions', 1],
['Olives', 1],
['Zucchini', 1],
['Pepperoni', 2]
]);
// Set chart options
var options = {
title: 'How Much Pizza I Ate Last Night',
width: 400,
height: 300
};
// Instantiate and draw our chart, passing in some options.
var chart1 = new google.visualization.PieChart(document.getElementById('chart_div_1'));
var chart2 = new google.visualization.BarChart(document.getElementById('chart_div_2'));
// set up event handlers
// when a user clicks on the PieChart, set the selection on the BarChart
google.visualization.events.addListener(chart1, 'select', function () {
var selection = chart1.getSelection();
for (var i = 0; i < selection.length; i++) {
// add in column information to specify selection in BarChart
selection[i].column = 1;
}
chart2.setSelection(selection);
});
// when a user clicks on the BarChart, set the selection on the PieChart
google.visualization.events.addListener(chart2, 'select', function () {
var selection = chart2.getSelection();
for (var i = 0; i < selection.length; i++) {
// remove column information for selection in PieChart
selection[i].column = null;
}
chart1.setSelection(selection);
});
chart1.draw(data, options);
chart2.draw(data, options);
}
google.load('visualization', '1', {packages:['corechart'], callback: drawChart});
You need two divs in your HTML, one for each chart:
<div id="chart_div_1"></div>
<div id="chart_div_2"></div>
See working example here: http://jsfiddle.net/asgallant/S78sB/
I use Google Chart Tools to draw simple graph with some missing data. With my code, I get something like on this image:
Is it possible to connect points (1) and (4) with line similar to (4) - (5) connection? Maybe I could use another type of graph to achieve the same result? I tried Area Chart with interpolateNulls option, but the result was the same. It can interpolate only NULLs surrounded by some date, not two or more NULLs in a row.
Below is sample code:
google.load('visualization', '1.0', {'packages':['corechart']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'Year');
data.addColumn('number', 'Sales');
data.addRows([
[1, 1000],
[2, null],
[3, null],
[4, 1030],
[5, 1080]
]);
var options = {
'title' : 'Line chart',
'width' : 400,
'height' : 300,
'lineWidth' : 2
};
var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
<html>
<body>
<div id="chart_div"></div>
</body>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
</html>
Similar problem here:Google chart line: how to connect dots properly using a continuous axes
The answer to your question was on one of the comments:
'If the value you are trying to pass is through some xml or json and it has null values inside it will not plot properly and will be scattered or as dotted lines in line graph so to plot them, have a condition to remove all null values and then it will plot correctly.' by #Taher SK