Dimple in KNIME

[nithinth]

Hello all,

Recently get to know about D3 in KNIME. Does KNIME also support dimple API for D3?

I tried to use dimple in Generic JavaScript View using require to draw a chart, but received following error:
Uncaught TypeError: Cannot read property ‘chart’ of undefined

on the line:
var myChart = new dimple.chart(svg, data);

Since it is easier to use D3 via dimple APIs, it would be great to be able to use it in KNIME.
If it is a code error, any correction will be a great help.

Relevant code:

require.config({ paths: { ‘dimple’: ‘http://dimplejs.org/dist/dimple.v2.0.0.min’ }});

require([‘dimple’], function (dimple) {
/* Here added the code to load data to var “data”*/

var margin = 75, width = 600, height = 300;
d3.select('body').append('h2').text("World cup Attendance")
var svg = d3.select("body").append("svg").attr("width", width).attr("height", height).append('g').attr('class','chart');

var myChart = dimple.chart(svg, data);
var x = myChart.addTimeAxis("x", "year"); 
myChart.addMeasureAxis("y", "attendance");
myChart.addSeries(null, dimple.plot.line);
myChart.addSeries(null, dimple.plot.scatter);
myChart.draw();

});

[albrecht]

Hi,

I had a look into your code example. It seems that dimple in v2.0 did not detect if it was loaded with requireJS and would simply define a global variable. That’s why providing that parameter in the require function will yield an undefined object.
However, following the example from the dimple website, if you use v2.3 they have added that detection. I have created a working example from their example code on the website. Simply copy/paste the following code into a Generic JavaScript View and it should work. Please note to NOT tick the D3 dependency box in the top right, as this is also loaded via requireJS here.

require.config({ 
	paths: {
		d3: 'http://d3js.org/d3.v4.min',
		dimple: 'http://dimplejs.org/dist/dimple.v2.3.0.min' 
	}
});

require(['d3', 'dimple'], function (d3, dimple) {
	var svg = dimple.newSvg('body', 800, 600);
    var data = [
      { 'Word':'Hello', 'Awesomeness':2000 },
      { 'Word':'World', 'Awesomeness':3000 }
    ];
    var chart = new dimple.chart(svg, data);
    chart.addCategoryAxis('x', 'Word');
    chart.addMeasureAxis('y', 'Awesomeness');
    chart.addSeries(null, dimple.plot.bar);
    chart.draw();
});

[nithinth]

Thank you very much @albrecht