Problem with simple pie chart dataloader json file

  • Resolved jonatanleloux

    (@jonatanleloux)


    8 years, 8 months ago

    Hi,

    I am having trouble trying to get a simple pie chart to work using dataloader and a json file in my local wordpress LAMP setup on my raspberry pi 3.

    The default pie chart worked fine.

    Then, I added the dataloader in the resources field:

    https://www.amcharts.com/lib/3/amcharts.js
https://www.amcharts.com/lib/3/pie.js
https://www.amcharts.com/lib/3/plugins/dataloader/dataloader.min.js

    The HTML field I left as is:

    <div id="$CHART$" style="width: 100%; height: 300px;"></div>

    The javascript field I changed to:

    var $CHART$ = AmCharts.makeChart( "$CHART$", {
  "type": "pie",
  "dataLoader": {
    "url": "test.json"
  }
  "valueField": "litres",
  "titleField": "country"
} );

    The test.json file is in the main wordpress folder (/var/www/html in my case, which is the same folder the ‘wp-login.php’ file is in) and can be loaded using the link https://192.168.2.45/test.json which results in:

    [ {
    "country": "Lithuania",
    "litres": 501.9
  }, {
    "country": "Czech Republic",
    "litres": 301.9
  }, {
    "country": "Ireland",
    "litres": 201.1
  }, {
    "country": "Germany",
    "litres": 165.8
  }, {
    "country": "Australia",
    "litres": 139.9
  }, {
    "country": "Austria",
    "litres": 128.3
  }, {
    "country": "UK",
    "litres": 99
  }, {
    "country": "Belgium",
    "litres": 60
  }, {
    "country": "The Netherlands",
    "litres": 50
  } ]

    The result of the preview or a page implementing the shortcode for this charts results in a blank page. ??

    I’ve tried a lot of things in the past two hours to get it to work but nothing is working.

    Am I missing something here?

    Thanks in advance, much appreciated. ??

    Best regards,

    Jonatan.

    https://www.ads-software.com/plugins/amcharts-charts-and-maps/

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author martynasma

    (@martynasma)

    Hi Jonatan,

    The code looks good.

    Do you get any errors in the browser’s console? *top open console press F12, then select Console tab)

    Plugin Author martynasma

    (@martynasma)

    Oh, one thing. While your data file is in the web root, the web page that displays the chart is probably not. Since you have only specified “data.json” in url, it tried to load relatively to the page URL.

    Try absolute URL:

    var $CHART$ = AmCharts.makeChart( "$CHART$", {
  "type": "pie",
  "dataLoader": {
    "url": "/test.json"
  }
  "valueField": "litres",
  "titleField": "country"
} );
    Thread Starter jonatanleloux

    (@jonatanleloux)

    I also tried the / upfront, and copying the json file into virtually every folder, as well as using the whole path “https://192.168.2.45/test.json&#8221;.

    That all did not work, as I just found the bug: there is a comma missing after the dataloader dict definition. ??

    F12 in chromium-browser and then console and clicking the error message leaded me to the line which was faulty, after which I found the bug.

    Now suddenly ALL paths I tried before seem to work. Haha.

    Thanks for the help. I learned something today, again. ??

    Plugin Author martynasma

    (@martynasma)

    Darn. I should have spotted that. Sorry.

    Good catch, though.

    Glad it worked out.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Problem with simple pie chart dataloader json file’ is closed to new replies.