Infragistics UltraChart comes up as red-x broken image - infragistics

I'm sure I'm missing something simple but when I try to display an UltraChart, it just shows a box with a red-x in the corner.
I'm currently just trying to implement example code for a simple bar chart:
<igchart:UltraChart ID="barchartData" runat="server">
</igchart:UltraChart>
And in code behind:
DataTable mydata = new DataTable();
// Define the columns and their names
mydata.Columns.Add("Series Labels", typeof(string));
mydata.Columns.Add("Column A", typeof(int));
mydata.Columns.Add("Column B", typeof(int));
mydata.Columns.Add("Column C", typeof(int));
mydata.Columns.Add("Column D", typeof(int));
// Add the rows of data
mydata.Rows.Add(new Object[] { "Series A", 1, 4, 10, 4 });
mydata.Rows.Add(new Object[] { "Series B", 3, 6, 4, 5 });
mydata.Rows.Add(new Object[] { "Series C", 5, 8, 6, 7 });
mydata.Rows.Add(new Object[] { "Series D", 7, 10, 7, 7 });
barchartData.DataSource = mydata;
barchartData.DataBind();
This should result in the following:
However, I get this:
Note: I am sure the data is getting to the table because, even though I only get the broken image box, as I move the mouse over it, I see the tooltip numbers when I hover over where a bar should be.
Thanks, Dan

I assume that you got the placeholder for the image because the image wasn't found or there was a server error. If you use a tool like fiddler or the Network tools of your browser to see the actual response from the server you will get more information.
As far as resolving the issue, it will depend on what the response was from the server and what image deployment strategy you are using for the WebChart, you may want to read more on this in the help: http://help.infragistics.com/NetAdvantage/ASPNET/Current/CLR4.0/?page=Chart_Image_Deployment_in_WebChart.html

Related

Tabulator breaks after setData is being called first time

I have a weird bug in my application using Tabulator by #Oli Folkerd:
After refreshing the table I always end up with having 20 rows instead of my preset 25 rows:
I checked the response from my django ViewSet and the answer always contains the right amount of objects.
js Code:
var table = new Tabulator("#ptable",
{height:"100%",
layout: "fitData",
pagination: "local",
paginationSize: 25,
paginationSizeSelector: [50, 100],
ajaxURL: "api/products",
columns: cols,});
setInterval( function () {
table.setData();
}, 10000);
becomes:
I am happy to post code on the django part as well, but I do not think thats the problem here. Also interesting: When I click on a random page number in the footer I always get to see 20 items per page - except if I choose the last one.

How can I send files ( pdf, text, jpg) through react-native-gifted-chat?

Can any one help me through react native gifted chat? I want to share files like (.pdf, docs, .txt, .jpg.) How to do that?
You have to use renderCustomView (Function) - Custom view inside the bubble prop.
And add some meta information into your message data like this is a SPECIAL message and finally test in renderCustomView if you are in the case of a special message.
https://github.com/FaridSafi/react-native-gifted-chat/blob/master/App.tsx#L128
https://github.com/FaridSafi/react-native-gifted-chat/blob/master/example-expo/CustomView.tsx
react-native-gifted-chat already includes support for images and videos, using the properties video and image of IMessage, just past pass the the link of the resource
{
_id: 1,
text: 'My message',
createdAt: new Date(Date.UTC(2016, 5, 11, 17, 20, 0)),
user: {
_id: 2,
name: 'React Native',
avatar: 'https://facebook.github.io/react/img/logo_og.png',
},
image: 'https://facebook.github.io/react/img/logo_og.png',
// You can also add a video prop:
video: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4',
// Mark the message as sent, using one tick
sent: true,
// Mark the message as received, using two tick
received: true,
// Mark the message as pending with a clock loader
pending: true,
// Any additional custom parameters are passed through
}
For the rest of types you have to implement your own logic, using one of the render functions, i think you could renderMessageImage with a link to the icon of the resources and add a description, also you should handle the click event to start download

Google geochart displaying city in the wrong region

You can see what I'm saying by putting this code:
function drawVisualization() {
var data = google.visualization.arrayToDataTable([
['Country', 'Popularity'],
['Kansas City', 200],
]);
var options = {width: 556, height: 347, displayMode : 'markers', region: 'ES'};
var geochart = new google.visualization.GeoChart(
document.getElementById('visualization'));
geochart.draw(data, options);
}
into google's playground here:
https://code.google.com/apis/ajax/playground/?type=visualization#geo_chart
You can see that Kansas City is being rendered in Spain, which is incorrect.
This also happens for other combination of regions and cities.
Am I doing something wrong here? or this is a Geochart bug?
EDIT: I think asgallant is right. It seems Geochart is finding an avenue called Kansas City in Spain, now the question is: how can I tell geochart that I'm only looking for cities?
I want to give you more context about this problem. I'm setting the region to ES on purpose. I'm working on an app which contains data from all over the world. There's a functionality where I allow the user to zoom into a region. In this case Spain.
I know I could just remove Kansas City when zooming in and put it back when zooming out, but I'm trying to avoid that.
Thanks!
Thank you asgallant, you are absolutely right.
That's why I solved this problem by using this API:
https://developers.google.com/maps/documentation/geocoding
Basically I'm geocoding the city names before rendering them and I'm storing the coordinates in my database. Then I just draw the geochart using the coordinates.
By doing that I'm not only solving this problem, but I'm also speeding up the rendering of the chart.

Get/Set igGrid combo cell value

I have an iggrid that is using a JSON data source for the main grid data and the combo box in one of my fields.
I have created the grid and the combo and the data is there. When I change the combo value and commit the grid the main grid column value does not change. I can see this by assigning a default value to the column and then changing it via a combo box.
I am working off of this example.
http://www.infragistics.com/products/jquery/sample/combo-box/grid-editor
Combo Data
occCodeData = [
{ "ID": "0", "OccCode": "Food" },
{ "ID": "1", "OccCode": "Beverages" },
{ "ID": "2", "OccCode": "Electronics" },
{ "ID": "3", "OccCode": "Cookies" }
];
My grid data is stored in a JSON variable in javascript pulled from a web api. I have verified the data is valid using a console write.
Does anyone have this working with standard JSON, JS, and HTML? This main issue is when I change the combo value it does not update my JSON data behind the scenes. The GUI grid changes fine.
When you have editing in the grid, by default the autoCommit option is set to false (meaning the UI updates but the values are not committed to the data source). You can change this to true in order to automatically commit to the data:
//Initialize
$(".selector").igGrid({
autoCommit : true
});
//Get
var commit = $(".selector").igGrid("option", "autoCommit");
Or you can call the commit method manually:
$(".selector").igGrid("commit");
I figured it out. My Sample occCodeData data did not match my current value.
So my default value pulled from the database was 129 but my possible values were 0,1,2,3. This was causing the combo not to change the value because it did not have a match in it's own listing.

Google Visualization API Geomap: How to handle marker click events?

I initially have the Google Visualization API Geomap on a world view (options['dataMode'] = 'regions') and I capture the 'regionClick' event when a country is clicked like so:
google.visualization.events.addListener(
geomap, 'regionClick', function (e) {
var rowindex = data.getFilteredRows([{column: 0, value: e['region']}]);
var location = data.getValue(rowindex[0], 3);
location.href = "?ISO=" + e['region'] + "&Location=" + location;
});
I then draw the map zoomed into the country in markers mode (options['dataMode'] = 'markers'). However, I can't seem to capture any events when the markers themselves are clicked.
The documentation ( http://code.google.com/apis/visualization/documentation/gallery/geomap.html#Events ) only refers to 'select' and 'regionClick' events neither of which are fired in this case. (Tested using Chrome 9, and IE 8.)
Has anybody had any success in doing this?
Many thanks.
According to http://groups.google.com/group/google-visualization-api/browse_thread/thread/2bcb89a1eb3c647d it's not currently supported.
I have it working on IE 8 and Chrome. First off, note the warning in the documentation if you are running this locally as file://
If that's not the case, make sure your google.visualization.GeoMap variable (the first argument to addListener) is indeed named geomap . If it is, add an alert() as the first line of code in the event handler and see if that fires. Lastly, note that unless the variable data is global, it will be out of scope if you try to access it from the event handler as you are doing.