Embedding custom visualizations within a widget

Comments

6 comments

  • Avatar
    Cassandra

    Thanks for this.  It is very helpful.  Is there a way to keep Sisense's default properties (i.e being able to click on a section to filter the entire dashboard, be able to drill into information) 

    0
    Comment actions Permalink
  • Avatar
    Konstantinos

    This is an amazing widget!!! It will be decent if we can filter the dashboard from it since it gives the ability to follow the KISS procedure. I am begging you to implement this functionality :)

    0
    Comment actions Permalink
  • Avatar
    Ehounoud Eby

    I'm new in sisense. I use the code and it it working fine. But when I click apply the widget become empty. Could you help me: I want to use more higcharts template to showcase data for my organization. All the best. Eby

    1
    Comment actions Permalink
  • Avatar
    Ido Darnell

    Hi @Ehounoud,

    I'm not exactly sure what may be the problem with this specific widget, though we provide a few custom visualization plugins such as the Chord Dependancy Diagram, or Double Stacked Bar Chart

    We have a few more on the Sisense Partner Market Place

    Feel free to reach out if you need any additional assistance with creating any other new plugin you may find beneficial for your users,

    Thanks

    Ido

    ido.darnell@qbeeq.pl

    qbeeq.pl

    Sisense Partner of the Year 2019!

    0
    Comment actions Permalink
  • Avatar
    Stephane Soren

    Hello there,

    First of all, thank you Aviad Harell for sharing your code with us. I'm a new customer of SiSense, and it's helpful to understand how JavaScript can be leveraged to extend the customization of our widgets, without having to use external plugins.

    However, I have the same issue as Ehounoud Eby. That is, the script works when I apply the code in the Widget Editor. And as long as I refresh my page in this editor, the wished output is displayed. But when I leave the widget editor, and display my dashboard, it's empty. I believe this is caused by the line:

    MyWidget.find("svg").remove();

    Problem is, if I remove this line, then the dashboard view just shows the initial Pie chart, instead of the graph I'd like to show.

    Moreover, I have other issues with the below lines, which return "Undefined" in the console.

    // get the height and width

    var MyChart = MyWidget.find("svg");
    console.log("MyChart_is:")
    console.log(MyChart)

    var MyChartWidth = MyChart.attr("width");
    /*MyChartWidth=600*/
    console.log("MyChartWidth_is:")
    console.log(MyChartWidth)


    var MyChartHeight = MyChart.attr("height");
    /*MyChartHeight=450*/
    console.log("MyChartHeight_is:")
    console.log(MyChartHeight)

    Aiming to find where the problems comes from, I've modified the code as below, so that almost each variable is printed out, into the console. Note that at the end, it returns a static graph with dummy data. This is for the sake of simplification. If I could get my script working outside of the widget editor, this would be a nice start. I think I can handle the graph part myself, I think. Here is "my" code (indent got lost in formatting):

    widget.on('ready', function(sender, ev){

    console.log('starting custom code');

    /**************************************************
    *** Retrieve data from the widget ***
    *** ***
    *************************************************/

    var ChartTitle = sender.title;
    console.log("ChartTitle:")
    console.log(ChartTitle)
    var ChartDivName = "MyHighchart";
    console.log("ChartDivName:")
    console.log(ChartDivName)

    var ChartDivStyle = sender.style;
    console.log("ChartDivStyle:")
    console.log(ChartDivStyle)
    //this ID must be unique for the whole HTML page,
    //so if you use multiple custom charts in the same dashboard then this will need to be changed

    //fetch data from widget
    var QueryResult = sender.rawQueryResult;
    console.log("QueryResult:")
    console.log(QueryResult)
    //var ChartMetric = QueryResult.headers[2];
    //console.log("ChartMetric:")
    //console.log(ChartMetric)
    var ChartLevel1 = QueryResult.headers[0];
    console.log("ChartLevel1:")
    console.log(ChartLevel1)
    var ChartLevel2 = QueryResult.headers[1];
    console.log("ChartLevel2:")
    console.log(ChartLevel2)


    /**************************************************
    *** Format the data for Highcharts ***
    *** ***
    *************************************************/

    var ChartDataSet = QueryResult.values;
    console.log("ChartDataSet:")
    console.log(ChartDataSet)

    var ChartCategories = [];
    var ChartValues = [];
    var ChartColors = Highcharts.getOptions().colors;
    console.log("ChartColors:")
    console.log(ChartColors)
    console.log("LOOP STARTS")

    //loop through data to build top level
    $.each( ChartDataSet, function() {

    //get category and value
    var MyCategoryName = this[0].text;
    console.log("MyCategoryName:")
    console.log(MyCategoryName)

    var MyDataPointName = this[1].text;
    console.log("MyDataPointName:")
    console.log(MyDataPointName)

    //var MyDataPointValue = this[2].data;
    var MyDataPointValue = this[1].data;
    console.log("MyDataPointValue:")
    console.log(MyDataPointValue)
    var MyDataPointColor;

    //look for existing category w/ matching name
    var ExistingCategory = $.grep( ChartCategories, function(el) {
    return (el.name == MyCategoryName );
    });

    //does it exist already?
    if ( ExistingCategory.length == 0 )
    {
    //category doesn't exist, so add it
    MyDataPointColor = ChartColors[ ChartCategories.length ];
    var NewCategory = {
    name: MyCategoryName,
    y: MyDataPointValue,
    color: MyDataPointColor
    };
    ChartCategories.push( NewCategory );
    }
    else
    {
    //category exists, so just add value to the total
    ExistingCategory[0].y += MyDataPointValue;
    MyDataPointColor = ExistingCategory[0].color;
    }

    //create the data point
    var brightness = (ExistingCategory.length * 0.1) + 0.1;
    console.log("brightness:")
    console.log(brightness)
    var NewDataPoint = {
    name: MyDataPointName,
    y: MyDataPointValue,
    color: Highcharts.Color(MyDataPointColor).brighten(brightness).get()
    };
    console.log("NewDataPoint_is:")
    console.log(NewDataPoint)
    ChartValues.push( NewDataPoint );
    console.log("CharleValues_Updated:")
    console.log(ChartValues)

    });
    console.log("LOOP ENDS")

    /**************************************************
    *** Replace SiSense chart with Highchart ***
    *** container ***
    *************************************************/

    //get object id of current indicator
    var ObjectID = sender.oid;
    console.log("ObjectID_is:")
    console.log(ObjectID)

    //get the current widget
    var MyWidget = $('widget[widgetid=' + ObjectID + ']');
    console.log("MyWidget_is:")
    console.log(MyWidget)
    if (MyWidget.length == 0)
    {
    MyWidget = $('.widget-body');
    console.log("MyWidget_if_length_is_0:")
    console.log(MyWidget)
    }

    // get the height and width

    var MyChart = MyWidget.find("svg");
    console.log("MyChart_is:")
    console.log(MyChart)

    var MyChartWidth = MyChart.attr("width");
    /*MyChartWidth=600*/
    console.log("MyChartWidth_is:")
    console.log(MyChartWidth)


    var MyChartHeight = MyChart.attr("height");
    /*MyChartHeight=450*/
    console.log("MyChartHeight_is:")
    console.log(MyChartHeight)


    //set the widget's div id and clear all children
    var ChartDiv=document.createElement('div');
    console.log("ChartDiv_is:")
    console.log(ChartDiv)

    ChartDiv.setAttribute("id",ChartDivName);
    console.log("ChartDiv_withAtt_id_set_to_ChartDivName:")
    console.log(ChartDiv)

    ChartDiv.setAttribute("style","width: " + MyChartWidth + "px; height: " + MyChartHeight + "px; margin: 0 auto");
    console.log("ChartDiv_withAtt_styleWidthHeightMargin_set_to_MyChartWidth_and_MyChartHeight_and_constantMarginHardcoded:")
    console.log(ChartDiv)

    MyChart.after(ChartDiv);
    MyChart = $("#" + ChartDivName);
    MyWidget.find("svg").remove();


    /**************************************************
    *** Create the Highchart within the ***
    *** Highcharts div container ***
    *************************************************/

    // Create the chart
    $('#' + ChartDivName).highcharts({
    chart:{
    type:"line"
    },
    xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },

    series: [{
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
    name: 'Meteorological data',
    dataLabels: {
    enabled:true,
    formatter: function () {
    return this.y > 150 ? null : this.y;
    },
    color: 'red',
    distance: -30
    }
    }]
    });




    console.log('custom code finished.');
    })

     

    Ido Darnell, do you have a clue regarding what goes wrong here ? Why is my dashboard empty, when I leave the widget editor ?

    0
    Comment actions Permalink
  • Avatar
    Ido Darnell

    Hi Stephane Soren

    I'm not sure what the issue is, feel free to reach out so we can investigate together,

    Ido

    ido.darnell@qbeeq.pl

     

    0
    Comment actions Permalink

Please sign in to leave a comment.