v2 Creating Skuid Chart using Component Factory creates Errors

Questions
1
  • 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”>

<fields>

    <field id="Name"/>

    <field id="Category__r.Name"/>

</fields>

<conditions/>

<actions/>

<groupby method="simple"/>

<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>

<labels/>

<javascript>

strXML = `

<skuid__chart model="Activity" maintitle="{{Model.labelPlural}}" type="donut" uniqueid="sk-3SEU-6021">

    <dataaxes>

        <axis id="axis1"/>

    </dataaxes>

    <categoryaxes>

        <axis id="categories" categorytype="field"/>

    </categoryaxes>

    <serieslist>

        <series valuefield="Name" splittype="field" modelId="Activity" aggfunction="count" splitfield="Category__r.Name"/>

    </serieslist>

    <colors/>

    <legend layout="horizontal" halign="center" valign="bottom"/>

</skuid__chart>

`;

xmlDef = skuid.utils.makeXMLDoc(strXML);

var dynamicChartComponent = skuid.$(

"#TestJSChartWrapper"

);

dynamicChartComponent.empty();

dynamicChartComponent.prepend(‘

’);

test = dynamicChartComponent.find(‘#new_div’);

var myComponent = skuid.component.factory({

element: test,

xmlDefinition: xmlDef,

type: "skuid__chart",

});

xmlRenderComponent = ‘’;

xmlReady = skuid.utils.makeXMLDoc(xmlRenderComponent);

skuid.actions.runActionsNode(xmlReady);

<css/>

<actionsequences/>

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

</skuid__page>

2

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?

3

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

4

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.

5

Hi Anna,

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