v2 Creating Skuid Chart using Component Factory creates Errors

As the title says when I try to create a model using component factory it creates an error instead:

  • TypeError: Cannot read property 'core' of undefined

I am able to bypass the error if I also create a chart with Skuid Composer, but that's a hack and not ideal.

Use case: I have a function that dynamically creates models, then it creates charts and tables for the model.




XML:

<skuid__page unsavedchangeswarning="yes" personalizationmode="server" showsidebar="true" showheader="true">

<models>

<model id="Activity" query="true" createrowifnonefound="false" datasource="salesforce" sobject="CSP02_CS_Activity__c" limit="">

    <fields>

        <field id="Name"/>

        <field id="Category__r.Name"/>

    </fields>

    <conditions/>

    <actions/>

    <groupby method="simple"/>

</model>

</models>

<components>

<skuid__buttonSet uniqueid="sk-3SG--5262">

    <groups>

        <skuid__buttonGroup uniqueId="sk-3SG--5260">

            <buttons>

                <skuid__button label="Create Chart" uniqueId="sk-3SG--5261">

                    <actions>

                        <action type="custom" snippet="newSnippet"/>

                    </actions>

                </skuid__button>

            </buttons>

        </skuid__buttonGroup>

    </groups>

</skuid__buttonSet>

<skuid__wrapper uniqueid="TestJSChartWrapper">

    <components/>

    <styles>

        <spacing/>

    </styles>

    <background/>

    <renderConditions logictype="and"/>

    <styleVariantConditions/>

    <interactions/>

</skuid__wrapper>

</components>

<resources>

    <labels/>

    <javascript>

<jsitem location="inlinesnippet" name="newSnippet" cachelocation="false">

strXML = `

    &lt;skuid__chart model="Activity" maintitle="{{Model.labelPlural}}" type="donut" uniqueid="sk-3SEU-6021"&gt;

        &lt;dataaxes&gt;

            &lt;axis id="axis1"/&gt;

        &lt;/dataaxes&gt;

        &lt;categoryaxes&gt;

            &lt;axis id="categories" categorytype="field"/&gt;

        &lt;/categoryaxes&gt;

        &lt;serieslist&gt;

            &lt;series valuefield="Name" splittype="field" modelId="Activity" aggfunction="count" splitfield="Category__r.Name"/&gt;

        &lt;/serieslist&gt;

        &lt;colors/&gt;

        &lt;legend layout="horizontal" halign="center" valign="bottom"/&gt;

    &lt;/skuid__chart&gt;

`;


xmlDef = skuid.utils.makeXMLDoc(strXML);


var dynamicChartComponent = skuid.$(

    "#TestJSChartWrapper"

);


dynamicChartComponent.empty();

dynamicChartComponent.prepend('&lt;div id="new_div"&gt;&lt;/div&gt;');

test = dynamicChartComponent.find('#new_div');


var myComponent = skuid.component.factory({

    element: test,

    xmlDefinition: xmlDef,

    type: "skuid__chart",

});



xmlRenderComponent = '&lt;actions&gt;&lt;action type="toggleRenderComponent" behavior="show" componentid="TestJSChartWrapper"/&gt;&lt;/actions&gt;';

xmlReady = skuid.utils.makeXMLDoc(xmlRenderComponent);

skuid.actions.runActionsNode(xmlReady);</jsitem>

</javascript>

    <css/>

    <actionsequences/>

</resources>

<styles>

    <styleitem type="background" bgtype="none"/>

</styles>

</skuid__page>

Best Answer

  • Anna Wiersema
    Anna Wiersema 🛠️ 
    Accepted Answer

    Hi Lukas, there is no public URL to properly load Highcharts since we custom load it into our codebase.

    We recommend creating some chart that is has a render condition to never render. Then, when you have the data you need for the chart, you can render that chart and it would then properly load the Highcharts library.

Answers

  • Hi @lukaspovilonis, I checked with the product engineering team and the reason this isn’t working is because we only load the chart library IF we detect a skuid chart component on the page. Since you're dynamically loading the chart, there is no library loading.

    Why are you using a snippet to create the chart? We recommend using a Skuid chart component and display logic (e.g. have the button toggle the chart component on, or check a ui only checkbox that controls the chart's display logic), is this a possibility for you?

  • Hi Anna,

    Thank you for checking with the team.

    I need to create charts dynamically, hence i'm creating them using JS Snippets.

    Would I be able to load them, if so what are the libraries manually which would I load? Preferably they are available on public URL.

    Best,

    Lukas

  • Hi Anna,

    Thank you for the support on this issue, I will do that then.

Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!