I am using the AjaxControlToolkit in an ASP.NET WebForms application and I have a line chart with 3 values.
I noticed that if a line has 3 X-axis values and only one line series that in IE it doesn't draw the last item but displays it below the grid.
This is only for IE11 or Edge. In Chrome it shows correctly.
I am using the latest AjaxControlToolkit version 15.1.3 released Aug 2015.
Here is the code:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="LineChart.aspx.cs" Inherits="LineChart2.LineChart" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"/>
<div>
<ajaxToolkit:LineChart ID="LineChart1" runat="server"
ChartType="Basic" Visible="false">
</ajaxToolkit:LineChart>
</div>
</form>
CodeBehind:
using System;
namespace LineChart2
{
public partial class LineChart : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
LineChart1.ChartTitle = "Test";
LineChart1.CategoriesAxis = "X1, X2, X3";
LineChart1.Series.Add(new AjaxControlToolkit.LineChartSeries { Name = "Test", Data = new decimal[] { 12, 34, 67 } });
LineChart1.Visible = true;
}
}
}
Problem can be clearly seen above
If I change the two lines to show 4 items
LineChart1.CategoriesAxis = "X1, X2, X3, X4";
LineChart1.Series.Add(new AjaxControlToolkit.LineChartSeries { Name = "Test", Data = new decimal[] { 12, 34, 67, 87 } });
Then all 4 items are shown in the LineChart.
When I add two series of 3 items each instead of one:
LineChart1.Series.Add(new AjaxControlToolkit.LineChartSeries { Name = "Test", Data = new decimal[] { 6, 6, 6 } });
LineChart1.Series.Add(new AjaxControlToolkit.LineChartSeries { Name = "Test", Data = new decimal[] { 7, 7, 7 } });
Then both series show correctly
So the issue is only happens when there is
1 series
The series only has 3 items. Values can be anything
Happens in IE11 and Edge browsers
My Question: How do I fix my code to work with one series of 3 items in IE11?
I posted this on the AjaxControlToolkit Forum as an issue and they have acknowledged and fixed it to be released in the next release.
Issue Log Item
Related
As you've probably found, there appears to be no equivalent way to add the following Excel form and associated VBA code to Google Sheets or Scripts or Forms:
Is there some add-in that can be used to pop up this image and its controls? This has to be used many times in an accounting sheet to categorize expenditures at tax time.
It may not look exactly the same but I was able to construct a custom dialog in a short period of time to show how HTML service can be used to produce similar results.
First I construct an HTML template that contains the 2 combo boxes with multiple lines.
HTML_Test.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<?!= include('CSS_Test'); ?>
</head>
<body>
<div id="left">
<label for="expenseCategory">Expense Category</label><br>
<select id="expenseCategory" size="10">
</select>
</div>
<div id="middle">
<label for="expenseSubCategory">Expense Sub Category</label><br>
<select id="expenseSubCategory" size="10">
</select>
</div>
<?!= include('JS_Test'); ?>
</body>
</html>
Then a CSS file to contain all my element formatting.
CSS_Test.html
<style>
#expenseCategory {
width: 90%;
}
#expenseSubCategory {
width: 90%;
}
#left {
width: 25%;
float: left;
}
#middle {
width: 50%;
float: left;
}
</style>
And a javascript file for client side javascript. I've simply hard coded some data to show how the select elements are filled in but this could just as easily be done using template scripting, or google.script.run
<script>
var expenses = [["A","1","2","3"],
["B","4","5"],
["C","6","7","8","9","10"]
];
function expenseCategoryOnClick() {
try {
let expenseCategory = document.getElementById('expenseSubCategory');
expenseCategory.options.length = 0;
expenses[this.selectedIndex].forEach( (expense,index) => {
if( index > 0 ) {
let option = document.createElement("option");
let text = document.createTextNode(expense);
option.appendChild(text);
expenseCategory.appendChild(option);
}
}
);
}
catch(err) {
alert("Error in expenseCategoryOnClick: "+err)
}
}
(function () {
// load first expense
let expenseCategory = document.getElementById('expenseCategory');
expenseCategory.addEventListener("click",expenseCategoryOnClick);
expenses.forEach( expense => {
let option = document.createElement("option");
let text = document.createTextNode(expense[0]);
option.appendChild(text);
expenseCategory.appendChild(option);
}
);
expenseCategory = document.getElementById('expenseSubCategory');
expenses[0].forEach( (expense,index) => {
if( index > 0 ) {
let option = document.createElement("option");
let text = document.createTextNode(expense);
option.appendChild(text);
expenseCategory.appendChild(option);
}
}
);
}
)();
</script>
Then there is the server side code bound to a spreadsheet.
Code.gs
function onOpen(e) {
var menu = SpreadsheetApp.getUi().createMenu("Test");
menu.addItem("Show Test","showTest");
menu.addToUi();
}
// include(filename) required to include html files in the template
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename)
.getContent();
}
function showTest() {
var html = HtmlService.createTemplateFromFile("HTML_Test");
html = html.evaluate();
html.setWidth(800);
SpreadsheetApp.getUi().showModalDialog(html,"Test");
}
The dialog looks like this. Many more html elements can be added as needed. This just shows the basics. This may be more difficult than an wysiwig html editor but I find I have better control of the appearance and function of my pages this way. Notice I clicked "C" and the sub category is filled in automatically.
I am trying to set up an extension for firefox, chrome, safari and internet explorer, I am using crossrider.
Basically I want to display a browser action when clicked displays a popup containing an input text with the current page url and a button that will open a new tab to another url passing the url as a parameter.
Here is what I did based on what I found in the documentation ;
extension.js :
appAPI.ready(function($) {
appAPI.message.addListener(function(msg) {
if (msg.request === 'getUrl'){
appAPI.message.toPopup({url:location.href});
}
});
});
background.js :
var activeTabUrl;
appAPI.ready(function($) {
appAPI.browserAction.setResourceIcon('logo-19.jpg');
appAPI.browserAction.setBadgeText('extn', [255,0,0,125]);
appAPI.browserAction.setTitle('Add Url to Site');
appAPI.browserAction.setPopup({resourcePath:'pin.html', height: 300, width: 300});
});
pin.html :
<!DOCTYPE html>
<html>
<head>
<title>
</title>
<script type="text/javascript">
function crossriderMain($) {
activeTabUrl = null;
appAPI.message.addListener(function(msg) {
if (msg.url) {
activeTabUrl = msg.url;
$('#url').val(activeTabUrl);
if(activeTabUrl){
$('#addurl').prop('disabled', false);
}
}
});
appAPI.message.toActiveTab({request:'getUrl'});
$('#addurl').click(function(){
var fullUrl = 'http://my.site.com/addurl?url=' + activeTabUrl;
appAPI.openURL(fullUrl, "tab");
});
}
</script>
</head>
<body>
<input id="url" name="url" readonly="true" type="text"/>
<input id="addurl" type="submit" value="Add Url" disabled/ >
</body>
</html>
Sometimes the field containing the url is not filled, it does not happen on a specific page, for the same page, sometimes it will be displayed, sometimes not. I can't pinpoint a specific cause.
Am I doing something wrong ?
The code looks fine, other than a minor point of declaring activeTabUrl in the pin.html code and not the background.js code as they are different scopes.
From experience, the only thing I can think of that may be causing the issue is that sometimes browsers return the message response before the message listener has initialized. To mitigate this, in the pin.html code, add a delay to sending the message requesting the URL, as follows:
setTimeout(funtion() {
appAPI.message.toActiveTab({request:'getUrl'});
}, 0);
[Disclosure] I am a Crossrider employee
I have the following data in a Google Spreadsheet:
ColumnA ColumnB
Departament Quantity
01/01/2016 23
02/01/2016 43
04/01/2016 5
06/01/2016 65
10/01/2016 12
11/01/2016 32
13/01/2016 22
15/02/2016 2
And want to draw a linechart using HTML Templates: This is my code so far now
<!DOCTYPE html>
<html>
<head>
<script src="https://www.google.com/jsapi"></script>
</head>
<body>
<div id="main"></div>
<script>
google.load('visualization', '1', {packages: ['corechart', 'bar']});
google.setOnLoadCallback(getSpreadsheetData);
function getSpreadsheetData() {
google.script.run.withSuccessHandler(drawChart).getSpreadsheetData();
}
function drawChart(rows) {
var options = {'title':'Example','width':400,'height':300};
var data = google.visualization.arrayToDataTable(rows, false);
var chart = newgoogle.visualization.LineChart(document.getElementById("main"));
chart.draw(data, options)
}
</script>
</body>
</html>
My script to read the sheet:
function getSpreadsheetData() {
var ssID = "12GvIStMKqmRFNBM-C67NCDeb89-c55K7KQtcuEYmJWQ",
sheet = SpreadsheetApp.openById(ssID).getSheets()[0],
data = sheet.getDataRange().getValues();
return data;
}
However i cant draw the plot, this issue dissapear when i change the data to a numeric (i.e. 42370), but thats not what i want!
Question is: what do i have to add in order to change to the right format in x axis?
You can use the hAxis.format configuration option
var options = {'title':'Example','width':400,'height':300,//-->'format':'MM/dd/yyyy'};
The valid format options can be found here...
And if you need to load with a specific locale, see this...
In latest release kendo introduced ability for saving grid state and layout which I can't make working with the javascript MVVM declared grid.
My problem can be reproduced by performing few simple steps with bellow given jsfiddle code
Resize columns
Save the state
Move the columns to some other width
Load the state
What I would expect to be the outcome is that after step #4, column width will be reset to saved state.
What I see in my repro is that grid.setOptions just reset the grid to initial unmodified state.
Here's the jsfiddle repro link also given as inline code snippet here...
$(document).ready(function () {
var dataSource = new kendo.data.DataSource({
data: [
{name: 'John', surname: 'Smith'},
{name: 'John', surname: 'Doe'}
]
});
var dataContext = new kendo.data.ObservableObject({
dataSource: self.remoteDataSource
});
var viewTemplate =
"<div id='grid' data-role='grid' data-sortable='true' data-editable='true' " +
"data-resizable='true' data-reorderable='true' data-navigatable='true' " +
"data-columns=\"[{'field':'name', 'title':'Name'}, {'field': 'surname', 'title': 'Surname'}]\"" +
" data-bind='source: dataSource' />";
// now get the main view
var kendoView = new kendo.View(viewTemplate, {
wrap: false,
model: dataContext
});
kendoView.render($("body"));
var grid = $("#grid").data("kendoGrid");
$("#save").click(function (e) {
e.preventDefault();
var options = grid.getOptions();
console.log(options);
localStorage["kendo-grid-options"] = kendo.stringify(options);
});
$("#load").click(function (e) {
e.preventDefault();
var optionsString = localStorage["kendo-grid-options"];
if (optionsString) {
var options= JSON.parse(optionsString);
console.log(options);
grid.setOptions(options);
}
});
});
<link href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.metro.min.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js"></script>
<body>
<div class="box">
Save State
Load State
</div>
</body>
I have just received the answer from Telerik customer support with a working resolution tip
This weird behavior is coming from the fact that the options are first provided through data-attributes and then the setOptions method of the Grid new options are passed through JavaScript, however the data-attribute options are still on the element and they are still considered options higher priority at this point.
As a temporary work-around you can remove the data-attribute that gives the column options and then the new options should be applied.
I am trying to add min and max limits to a Google chart, which I generate using a Perl script from CSV data - by using the interval role for these 2 values.
Unfortunately the I-lines are not displayed at my line chart, even though I've set the min and max limits to the -100 and 100 for the sake of testing.
Only the main data is being displayed:
Can anybody please spot the error, what is wrong with my very simple test case?
Please just save the code below as an HTML-file and open in a browser:
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['corechart']}]}"></script>
<script type="text/javascript">
var data = {"L_B8_ACLR_50_0_QPSK_1_H":{"rows":[
{"c":[{"v":"UTRA_1_DOWN"},{"v":-100},{"v":100},{"v":"-42.46912"}]},
{"c":[{"v":"E-UTRA_1_DOWN"},{"v":-100},{"v":100},{"v":"-39.9545"}]},
{"c":[{"v":"E-UTRA_1_UP"},{"v":-100},{"v":100},{"v":"-48.68408"}]},
{"c":[{"v":"UTRA_1_UP"},{"v":-100},{"v":100},{"v":"-49.45148"}]},
{"c":[{"v":"UTRA_2_UP"},{"v":-100},{"v":100},{"v":"-58.96674"}]}],
"cols":[
{"p":{"role":"domain"},"label":"MEASUREMENT","type":"string"},
{"p":{"role":"interval"},"label":"LSL","type":"number"},
{"p":{"role":"interval"},"label":"USL","type":"number"},
{"p":{"role":"data"},"label":"1142926087","type":"number"}]}};
function drawCharts() {
for (var csv in data) {
var x = new google.visualization.DataTable(data[csv]);
var options = {
title: csv,
width: 800,
height: 600
};
var chart = new google.visualization.LineChart(document.getElementById(csv));
chart.draw(x, options);
}
}
$(function() {
google.setOnLoadCallback(drawCharts);
});
</script>
</head>
<body>
<div id="L_B8_ACLR_50_0_QPSK_1_H"></div>
</body>
</html>
(I don't want to use methods like addColumn or addRows. Instead I prepare my data as data structure in my Perl script and then JSON-encode and pass it to DataTable ctr).
You must specify the interval-role column after the data-column. As written in the API :
"All columns except domain columns apply to the nearest left neighbor to which it can be applied"
So if you change the order (and here with some smaller intervals)
var data = {"L_B8_ACLR_50_0_QPSK_1_H":{"rows":[
{"c":[{"v":"UTRA_1_DOWN"},{"v":"-42.46912"},{"v":-50},{"v":-45}]},
{"c":[{"v":"E-UTRA_1_DOWN"},{"v":"-39.9545"},{"v":-50},{"v":-45}]},
{"c":[{"v":"E-UTRA_1_UP"},{"v":"-48.68408"},{"v":-50},{"v":-45}]},
{"c":[{"v":"UTRA_1_UP"},{"v":"-49.45148"},{"v":-50},{"v":-45}]},
{"c":[{"v":"UTRA_2_UP"},{"v":"-58.96674"},{"v":-50},{"v":-45}]}],
"cols":[
{"p":{"role":"domain"},"label":"MEASUREMENT","type":"string"},
{"p":{"role":"data"},"label":"1142926087","type":"number"},
{"p":{"role":"interval"},"label":"LSL","type":"number"},
{"p":{"role":"interval"},"label":"USL","type":"number"}
]}};
..You end up with :