[ExtJS] - Trying to use ExtJS 3.4 charts

Hi All,

I am studying ExtJS and I am trying to follow a guide to just show an hard coded example chart into a CMP, but without success.
Here is the example:
https://docs.sencha.com/extjs/4.2.3/extjs-build/examples/build/ChartsKitchenSink/#marked-line

How can I include ExtJS directly into a panel so I can show This ExtJS first and then the grid?
The objective is to have simple chart showing visual data that will be shown below it.

Tried to create a chunk for this and call it, but nothing is happening…
The objective is to have specific graphs on the panels, and then all on the Dashboard.

I am feeling a bit lost with ExtJS and the way to use it with extras or even standalone on the backend.
Thanks in advance for your support.

Environment

MODX 2.7.1pl + Migx 2.12-0pl (for some CMPs).

What you linked to is ExtJS 4, which is not compatible with the old 3.4 MODX uses.

I’d recommend against using the built-in charts in ExtJS 3.4 these days, as they rely on Flash, which is no longer supported in many browsers.

Ok, many thanks for the tip.
I will see what I can find with Google Charts instead

Depending how familiar you are with JavaScript I fully recommend learning React for building CMPs instead of ExtJS.

Aside from being the most popular JS framework in 2019 there are plenty of packages available to output data into charts that you can get up and running with quickly from npm. You can also use react-router-dom to switch between different windows and modals inside of your app with none of the delay that extjs offers.

…but aside from knowing react you’ll also need to look into setting up a basic restful api for MODX. https://docs.modx.org/current/en/extending-modx/developing-restful-api

Here’s another charting option: pChart.

Many thanks for all the help. It is not easy to find Charts use cases for Modx on the internet.
Hopefully this topic will help other people with the same point.

Cheers all

Hi All,

Following this topic, I am trying to mess around a bit with regClientStartupHTMLBlock so I can inject Google Charts into the head of the manager.

I am not being able to have it working. Not even for adding a meta tag.
Found some posts on the old Modx forum stating that this was working on Manager, but I couldn’t find anything conclusive on the Modx documentation mentioning this.

Do you have any idea if this works on manager pages?

The idea is to call the snippet from Migx schema and inject Google Charts code into the Head section as stated on this example:

I am placing that div inside migx form with success (checked on the Code view, and it is there, but not the Javascript.

Here is the snippet:

<?php
$headcode="<!--Load the AJAX API-->
<script type=\"text/javascript\" src=\"https://www.gstatic.com/charts/loader.js\"></script>
<script type=\"text/javascript\">

  // Load the Visualization API and the corechart package.
  google.charts.load('current', {'packages':['corechart']});

  // Set a callback to run when the Google Visualization API is loaded.
  google.charts.setOnLoadCallback(drawChart);

  // Callback that creates and populates a data table,
  // instantiates the pie chart, passes in the data and
  // draws it.
  function drawChart() {

    // Create the data table.
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Topping');
    data.addColumn('number', 'Slices');
    data.addRows([
      ['Mushrooms', 3],
      ['Onions', 1],
      ['Olives', 1],
      ['Zucchini', 1],
      ['Pepperoni', 2]
    ]);

    // Set chart options
    var options = {'title':'How Much Pizza I Ate Last Night',
                   'width':400,
                   'height':300};

    // Instantiate and draw our chart, passing in some options.
    var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  }
</script>
";

$modx->regClientStartupHTMLBlock($headcode);
return;

And the section of Migx config calling the snippet:

{
  "MIGX_id":2,
  "caption":"Book edition",
  "print_before_tabs":"0",
  "fields":[
    {
      "MIGX_id":3,
      "field":"Editions",
      "caption":"Editions",
      "description":"[[GenerateChart? &field=`Editions`]]<div id=\"chart_div\"></div><br><a href='?a=index&namespace=migx&configs=books_editions' target='_blank'>View all</a>`",
      "description_is_code":"1",
      "inputTV":"",
      "inputTVtype":"migxdb",
      "configs":"books_editions",
      "restrictive_condition":"[[MigxCheckIfIsNewItem]]",
      "sourceFrom":"config",
      "sources":"[]",
      "inputOptionValues":"",
      "default":""
    }
  ],
  "pos":2
}

I made a small test.
Printed the var and applied a die() and when checking the connector.php response, the variable content is all there. So the snippet is being invoked properly.

Simply I am not being able to make the regClientStartupHTMLBlock work…

Please, help the n00b :slight_smile:

Many thanks.
Cheers

This is a wild guess, but the regClient… methods rely on the existence of head and body HTML tags, which may not exist at the time the snippet is executing.

Hi Bob,

That’s correct.
Did several tests and I am stuck due to exactly that.

It seems that migx does pre-render.
Even if I add a document.ready or window.ready, it does not matter. Migx is ignoring the Javascript totally except the loader.js (that appears in the head).

I will have to try to find a different way to do this, as migx seems to do some kind of pre-render.
I will need to use a snippet to dynamically build the chart data and this will block me.

Thanks for all your tips.

seems, you are you trying to add that chart as a field in the modal form, right?

this should be possible with a custom tv inputtype

Hi Bruno,

Exactly.
OK, thanks for the tip. Let me try to see what I can get this way.
I’ll share the result.

Cheers

some examples:
https://modx.com/extras/package/colorpicker
https://modx.com/extras/package/imageplustvinput

In the manager, you should typically use $modx->controller->addHtml($foo) instead of $modx->regClientStartupHTMLBlock. The latter was the only way to do it back in the 2.1 days, but since then the controller has gotten addJavascript, addHtml, addCss and addLastJavascript methods.

Not sure if using the controller works inside MIGX though, that probably has its own restrictions or utilities and you should definitely trust @bruno17’s advice on that over mine :wink:

Many thanks @markh
I will explore every possibility. I am not discarding any lead at this time.

I will share the result as soon as I can dedicate some more time.

Cheers all

Hi All,

Tried to create a custom input tv type and custom output tv type. No go. Even when trying to add Plain javascript to the head. Not working unfortunately.
Migx simply does not process javascript code unless when calling an external file (I will have to explore this with more detail using a JS resource type that will have its code built trough a snippet based on $_GET / $_REQUEST arguments).

As an alternative, I was able to generate charts successfully and integrate into Migx using this solution based in chart.js:

Since it is based on URL parameters, it is very simple to build a graph using a snippet which will concatenates the needed parameters as JSON and sent them to the URL that, in the end, returns an image.

In spite of this success, I am trying to avoid using third party webservices (except google).
Chart.js seems to be a viable direction.

I have three solutions at the moment:

  1. Setup a node.js environment so I can self-host quickchart.io requests (shared hosts with Cpanel normally do not allow Node.js apps);
  2. Find a way to have Javascript into Migx without breaking ExtJS.
  3. Find a way to generate a javascript file (that will be a resource) that can be called using normal javascript call from HTML (<script type="text/javascript" src="path/to/resource.js"></script>)

From what I could get, colorpicket TV is all based in ExtJS. This is the reason why works well with Migx.

I will have to perform some more tests so I can decide what to do.I am trying to find the best way so I can take this chance to create an extra that can be shared it with the community as well.

I will try some more options to see what can be done. More news during the weekend.

Cheers
JNogueira

see, how imageplus it does


1 Like

Thanks for the tip Bruno,

I will explore this as well.
Cheers

Hi All,

For the moment generating graphs through URL suits my needs. Anyway in the near future I will try to implement to as an extra that I intent to share with the community.

I am not doing it at the moment because I will need time and I need that time for an ongoing project.
I will setup a github space as soon as I am able to dedicate time to the task.

Many thanks for all your support.