I'm looking at this example of D3.js version 4 and I need to load dynamic data from the same script.
What is the analogus function of d3.csv() to load data from an array or an object? I don't need an XMLHttpRequest but I need the same behavior of d3.csv().
A fiddle is at https://jsfiddle.net/i5ar/mbcu05z8/.
Here's the full fiddle: https://jsfiddle.net/mbcu05z8/27/
I stored the array in a variable just like you did:
var myArr= [{"id":"AL","Under 5":310504,"5 to 13":552339,"14 to 17":259034,"total":1121877},{"id":"AK","Under 5":52083,"5 to 13":85640,"14 to 17":42153,"total":179876},{"id":"AZ","Under 5":515910,"5 to 13":828669,"14 to 17":362642,"total":1707221}];
then I changed d3.csv to a custom function named draw() and just called it :-)
draw(myArr);
function draw(states) {
var stateById = d3.map();
states.forEach(function(d) {
stateById.set(d.id, d);
});
setTimeout(()=>{
dispatch.call("load", window, stateById);
dispatch.call("statechange", window, stateById.get("AL"));
},20);
};
Related
I'm facing shieldUI wicket integration and I'm trying to get base 64 image dfom a shieldUi chart using this tutorial: https://www.shieldui.com/documentation/javascript.chart/exporting
I tried to run the code below:
function render_image_box(chart_id) {
var result = false;
var svg_chart = $("#" + chart_id);
if (svg_chart) {
var chart = svg_chart.swidget();
if (chart != null) {
chart.exportToImage();
result = true;
}
}
// setTimeout(find_image_source, 100) // wait before continuing
return chart;
}
in both the $(document).ready(..) and $(window).load(...) functions and the load event raised from the library (https://www.shieldui.com/documentation/javascript.chart/events/load) as well.
In none of these function chart is rendered yet, so the svg_chart.swidget() returns null.
Is there any other event to use to accomplish my goal or any other way to get the image source?
Thanks in advance,
Laura
You can access the chart instance using .swidget() only after you have initialized it with the .shieldChart() constructor.
To make your code work, you should also turn off animation for the chart, because right after you initialize it, the rendering will not be over and there will be no image contents.
Here is a complete JSBin to get you started...
I'm writing a generic error handler for all of the Kendo Grids. I need to get that source Grid to prevent its default behavior in saving data. In the handler, you can access the source's DataSouce by args.sender. How can I access the Kendo Grid from that DataSouce?
The only approach I found was this suggestion, searching through all grids, and the handler looks like below, can you suggest anything better and more efficient?
function genericErrorHandler(args) {
if (args.errors) {
$('.k-grid').each(function () {
var grid = $(this).data('kendoGrid');
if (grid.dataSource == args.sender) {
alert('found!');
}
})
}
}
There is no API to get Grid object from data source, but there is many approach beside that.
You can create generic grid's edit event and storing in global scope variable which grid's ID was triggered that event. I prefer to do this rather than compare mutable data source.
var window.currentGrid = "";
function onGenericGridEdit(e) {
window.currentGrid = e.sender;
}
If in some cases you need to make custom edit function, just call your generic edit function in the end of the code.
function onCustomGridEdit(e) {
// call generic function to store
onGenericGridEdit(e);
}
This is my code which filters my dataset to one year, when I move my html slider I'd like to update the value. I have a variable year=1979 but when I input it into the function it doesn't work.
var yearData = data.filter(function(element) {return element.YEAR == "year"});
I think I'm missing something, can anyone point me in the right direction?
My fiddle: http://jsfiddle.net/vyab4kcf/6/
Your code that render the chart is called only once time at the request.
You need to store the data of the request and then do the same instructions that you already do in the callback.
So :
var request_data;
d3.csv('http://...', function(error, data){
// store the data
request_data = data;
// Run update for the first request
update("1979");
});
// Listen to slider changes
d3.select("#sexYear").on("input", function() {
update(this.value);
});
function update(sexYear) {
// Chart rendering code
// Do your filters on request_data here
}
I want to load an exteranal svg file in SAPUI5. I was thinking of using D3 JS library to do this
Is it possible and advisable ?
If yes ,then are there any other framework based on D3 library which can be utilized to do the integration as SAP UI5 is a object oriented framework and writing D3 code inside the view is not working?
It's possible to load an external SVG with D3, but it's not built-in. Here's an example (the footballs are external SVG icons):
http://bl.ocks.org/emeeks/a347eed5c50a7f1cf08a
However, this is not what D3 is built for. Rather, D3 is built for creating complex SVG graphics based on data. You're better off either using native Javascript (which is mostly what is done in that example, anyway, loading the element on a documentFragment and then cloning the node) or another library. You might want to look at snap.svg, since it's more focused on traditional SVG manipulation.
find my solution below. The idea with the onAfterRendering is taken from SCN.
Alternatively you may consider to use a sap.m.Image. According to CSS Tricks, an <img> tag should be sufficient to display SVG from an external source. However, in my case it didn't work; I suspect the reason was that my service URL doesn't return an adequate MIME type (is: application/xml, should: image/svg+xml???)
return Control.extend("com.example.SvgDisplay", {
metadata : {
properties: {
svgID: "string",
mySvg: "object"
}
},
setSvgID: function(sSvgID) {
var that = this,
sParams;
this.setProperty("svgID", sSvgID, true);
if (sSvgID) {
sParams = $.sap.encodeURLParameters({ id: sSvgID });
d3.xml("/my/svg/service?" + sParams, function (oError, oDocument) {
var oSvgNode;
if (oError) {
// Do error handling - for example evaluate oError.responseText
} else if (oDocument) {
oSvgNode = oDocument.lastChild;
}
that.setMySvg(oSvgNode); // may still be undefined; force re-rendering
});
}
},
// "static" function, renders the basic <div> tag. The rest will be done by method onAfterRendering
renderer : function(oRm, oControl) {
var sId = oControl.getId(),
oMySvg = oControl.getMySvg();
oRm.write("<div"); // Control - DIV
oRm.writeControlData(oControl); // writes the Control ID and enables event handling - important!
oRm.writeClasses();
oRm.write('><div id="' + sId + '-svgContainer"></div>');
oRm.write("</div>"); // end Control - DIV
},
onAfterRendering: function(){
var oMySvg = this.getMySvg(), sDomID, oVis;
if (oMySvg) {
sDomID = this.getId();
oVis = d3.select("#" + sDomID + "-svgContainer").node();
oVis.appendChild(oMySvg);
}
}
});
I'd like to write a plugin that can be used in the following manner:
var img = $('#someImage').Image();
or perhaps:
var img = $.Image({id: 'someImage', src: '/...'});
and then be able to do image-related functions:
img.highlight();
img.showAlter();
et cetera. However, I don't want to do:
$.fn.highlight = function() {}
since that would apply to all jQuery objects and i want my method to apply only to those objects I've called .Image() on.
is what I'm asking for possible? how?
You'd need to place your Image function on the prototype (fn), but then have the Image plugin assign the highlight and showAfter functions to that specific jQuery object on which .Image() is called.
(function( $ ) {
$.fn.Image = function( props ) {
this.highlight = function(){
this.each(function() {
$(this).css('border', "5px dashed yellow");
});
};
this.showAfter = function(){};
return this;
};
})( jQuery );
var img = $('img').Image();
img.highlight();
EDIT:
To clarify, this in the Image function is a reference to the jQuery object against which Image() was invoked.
this does not reference the Image function in any way.
Example: http://jsfiddle.net/saYLm/
$.fn.image.highlight = function() {}
assuming you have written a plugin named image this would prototype the highlight function to that object