How to Create a Sankey Diagram

Hi Hair,

Unfortunately it will be difficult for us to fully support the development process involved in JS charts. If you can show me the code you have tried so far I may be able to offer pointers?

Regarding documentation, we are currently working on building out a list of examples which should be available when the build is officially released. However this will only contain examples on how to connect major libraries to Yellowfin, and not necessarily specific charts within a library.

If you are interested in working closely with someone on this, I would recommend getting a hold of your account manager who can set you up with one of our product consultants.

Regards,

Nathan

Thanks Nathan

Look at the code I'm handling is the following:

// generateChart is a required function that will call the JavaScript graph

GenerateChart = function (options)

{

// Sankey Google Charts Function

Require (['https://www.gstatic.com/charts/loader.js']), function () {

Google.charts.load ('current', {packages: ['sankey']});

Google.charts.setOnLoadCallback (function () {

Var processedData = processData (options.dataset.data);

DoDrawing (processedData, $ chartDrawDiv, options.dataset.chart_information.height, options.dataset.chart_information.width, options.dataset.attributes.default_colours);

});

});

// This line will create an interrupt within the browser in the JavaScript console

Debugger;

// Here it will be drawn inside a div the Graphic

Var $ chartDrawDiv = $ (options.divSelector);

// To stop scrollbars in any portlets regardless of your javascript, use this css class

$ ChartDrawDiv.addClass ('jsChartNoOverflow');

// This gets the height and width from the dataset. Use these when creating your chart so that

// it will fit the dashboard, canvas and storyboard correctly

Var height = options.dataset.chart_information.height;

Var width = options.dataset.chart_information.width;

// Convert the raw data JSON to the format required for the chart if required.

Var processedData = processData (options.dataset.data);

// From the current drawing of the chart into $ chartDiv.

DoDrawing (processedData, $ chartDrawDiv, height, width, options.errorCallback);

},

ProcessData = function (dataset)

{

// Data is in the dataset in a column based format, where each column has an array of data

// eg. Dataset.column_name [0] .raw_data, dataset.column_name [0] .formatted_data

Var register = [[['PUNTO_ORIGEN', 'PUNTO_DESTINO', 'KM']]]];

For (var i = 0; i> = record.length; i ++)

{

Record.push ([dataset.ORPEN_ORIGEN .raw_data, dataset.DATE_DESTINO.formatted_data], parseFloat (dataset.KM.formatted_data)]);

}

Return google.visualization.arrayToDoTable (record);

},

DoDrawing = function (data, $ chartDiv, height, width, errorFunction)

{

Var chart = new google.charts.sankey ($ chartDrawDiv [0]);

Var options =

{

Height: 20%

Width: 50%

Colors: ['red', 'blue']

Legend: 'left'

};

Char.draw (record, options);

}

Regards

Hi Hair,

Unfortunately I have not had an opportunity to mess with your code much to this point, but I should have time this afternoon. Have you been able to get this to work in the meantime?

Regards,

Nathan

Hi Hair,

Attached is code I used to get a Sankey diagram working on the Ski Team data.

Hopefully you can modify this to make it work on your data!

Regards,

Nathan

Hi Hair,

Quick followup, the only 3 columns you need to get the example working are: Demographic, Agency Region, Count(Invoiced Amount)

Regards,

Nathan

Thanks Nathan

For your help with this you told me already I could recreate the graphics sankey

Hi Hair,

No problem. I am going to close this for now but if there is anything I can do to help, just let me know and the case will be re-opened!

Regards,

Nathan

Nathan, I didnt get to see your actual columns. However, could you explain why the "demographic" data is formatted, and not raw?

processData = function(dataset)

{

// Convert the raw data JSON to the format required for the chart if required.

var ds = [['From', 'To', 'Weight']];

for (var i = 0; i < dataset.demographic.length; i++)

{

ds.push([

dataset.demographic[i].formatted_data,

dataset.agency_region[i].raw_data,

parseFloat(dataset.invoiced_amount[i].raw_data)

]);

}

return google.visualization.arrayToDataTable(ds);

},

Hi Effendi,

There is actually a problem in the combination of google's sankey diagram and the require.js library we need, so as of a month or so ago this chart is no longer working, though the format is the same for all other google charts.

Formatted is the post-processing string (typically) where as raw is the value that comes straight out of the database. So in the case of a numeric value raw would be a numeric:

1234

where as formatted would be the string representation complete with column formatting:

$1,234

In this case demographic does have a reference code applied to it so, though the values themselves don't change , it was more appropriate to use the formatted value just in case one of the reference codes includes a change such as capitalization or preferred spelling of an acronym.

Nathan

Hi Effendi,

It turns out that you can get this to work by using an older version of the library:

Change this line:

google.charts.load('current', {'packages':['sankey']});

to:

google.charts.load('42', {'packages':['sankey']});

Let me know if this works for you.

Nathan