Code

Discussion on Chartli Wordpress Interactive Chart Plugin

yellowred

yellowred supports this item

Supported

This author's response time can be up to 2 business days.

39 comments found.

No option to edit existing charts – totally sucks!

sorry. We will add it in later versions.

Hello, I work with epidemiological data in a Brazilian state. I would like to know if it is possible to: 1) create a map displaying the state of Paraná, with the municipalities (as at https://pt.wikipedia.org/wiki/File:Parana_MesoMicroMunicip.svg) and 2) create a map displaying only a certain region, of which 20 are part of these municipalities (as in http://www.saude.pr.gov.br/modules/conteudo/conteudo.php?conteudo=2757). Thank you.

Hi, You can draw custom maps with use this Google tools (https://google-developers.appspot.com/maps/documentation/utils/geojson/)

And can these maps, designed with this tool, be used to display data, in the same way as the examples you have published? If so, I’ll get your plugin today.

Yes, all maps in “GeoJson” format are compatible with our plugin.

edit the chart after publication

Edit options have no this version :(

Do you have RPM Gauge type chart? Can input 2 variable values and display % of 1 to other in a RPM gauge like display? Thanks, -ajs

I do not know exactly what you said, but if you tell me by drawing I can help

Sure. Here is google chart example – https://taptp.org/grf-donations-performance/ or you can present with a dial as excel examples show: http://www.spreadsheetshoppe.com/speedometer-chart/

hi, Screenshot of the items you want to talk about .

http://imgur.com/a/buwIh http://imgur.com/a/RDk6G

i need to change gauge it self colors for example i need to change red color to green

Gauge Chart 3 – no option to change exist colors (green – gray – red)

hi, you can change gauge line colors this code series in settings

axisLine: { // Coordinate axis lineStyle: { // Property lineStyle control line style color: [[0.2, ‘lime’], [0.8, ’#1e90ff’], [1, ’#ff4500’]], width: 2, shadowColor: ’#fff’, //The default transparent shadowBlur: 10 } },

If you can send your email adress, we can more help

Will this plugin support commas in the charts?

Unfortunately, I do not quite understand what you mean :(

Exempel is that I want a number to be shown as 512,54 with a comma instead of 512.54 with a dot.

no, its not possible for now. but if you can know javascript, you can use regex or convert function dot to comma. i will think to add this javascript function next version. Thanks

can the graphs be configured to animate when scrolled onto?

Hi, please explain in detail.

Hi,

1. The HTML version Chartli supports json, does this Wordpress version support it? 2. Does this plugin support poll data source (json for example) and auto update chart?

Thanks. Paul

Hi, 1- Wp version not supported json data yet ☹ we have working on this 2- If you know advanced jquery, yes its possible.

Thanks Best Regards

Hello! Is there a Circle Chord Diagram? Graph Circular?

Sory. Not supported.

Hello, Pre sale question, Can I read the chart data from google spreadsheet ?

hi, sorry. not supported.

jah67

jah67 Purchased

I can’t get this to install at all. Get’s to 100% where I assume it wants to decompress the zip file and I get a white WordPress failure screen asking me, are you sure you want to do this? Please try again.
Please advise.

jah67

jah67 Purchased

Can you replace or append names on graphs to use a png, jpg or svg graphic that is a company brand for example? If not, please consider implementing support for this ASAP. See attached as an example mocked up in PS.


https://1drv.ms/u/s!Ar45i15ykF_-ge9cWZsmiHi7lRedIA

hi, can you send us to your email address.

I just installed this plugin and there is nothing in it. There is only Chartli All Chart on a blank page. Is this plugin even working?

Please send us the website demo address. help@yellowred.info

In wich mode I can change comma in point? can you show to me a example?

But how is it possible that on the bar charts is showed the values with a comma and on the pie charts is not possible?

In this bar chart is showed on the level of Y and inside the label all the numbers with commas. I need also inside the pie chart the same type of numbers with commas

{ “backgroundColor”: ”#ffffff”, “title”: { “text”: “Title”, “x”: “center”, “subtext”: ”” }, “tooltip”: { “trigger”: “axis” }, “legend”: { “padding”: 20, “x”: “center”, “y”: “bottom”, “data”: [ “Quota II”, “Quota III” ], “selectedMode”: false }, “toolbox”: { “show”: false, “feature”: { “mark”: { “show”: false }, “dataView”: { “show”: false, “readOnly”: false }, “magicType”: { “show”: true, “type”: [ “line”, “bar” ] }, “restore”: { “show”: true, “title”: “Refresh” }, “saveAsImage”: { “show”: true, “title”: “Save As Image” } } }, “calculable”: true, “xAxis”: [ { “type”: “category”, “data”: [ “Asse I ”, “Asse II”, “Asse III” ] } ], “yAxis”: [ { “type”: “value” } ], “grid”: { “show”: true, “containLabel”: true, “left”: “10”, “right”: “40”, “top”: “80”, “bottom”: “60” }, “color”: [ ”#3d85c6”, ”#f6b26b” ], “series”: [ { “name”: “Quota II”, “type”: “bar”, “data”: [ 270170418, 85510782, 12518800 ] }, { “name”: “Quota III”, “type”: “bar”, “data”: [ 90056806, 28503594, 4172934 ] } ] }

is not possible on pie chart..

Hello there,

unfortunately you need to use the dot in the values because it separates the values on the comma chart.

Hi,

Question. When I use gauge type, how do I change colors on the gauge axis? There are 3 colors: green, blue and red. Where can I change these? Also, how and where do I change the axis numbers, currently the gauge is showing from 0 to 100. I want to use this as Donations fundmeter and use collected amount instead of %.

Thank you.

Full code is

option = {
    series: [{
        type: "gauge",
        startAngle: 190,
        endAngle: -10,
        min: 0,
        max: 1000,
        radius: "80%",
        center: ["50%", "65%"],
        axisLine: {
            show: true,
            lineStyle: {
                width: 100,
                shadowBlur: 10,
                color: [
                    [0, '#B5495B'],
                    [0.333333, '#D0104C'],

                    [0.666666, '#f09426'],

                    [1, '#20604F']
                ]
            }
        },
        axisTick: {
            show: false
        },
        axisLabel: {
            show: false
        },
        splitLine: {
            show: false
        },
        pointer: {
            width: "3%",
            length: '90%',
            color: "black" 
        },
        itemStyle: {
            normal: {
                color: "rgba(255, 255, 255, 0.8)",
                shadowBlur: 20
            }
        },

        title: {
            show: false
        },
        detail: {
            show: true
        },
        data: [{
            value:945, name:'945'
        }]
    }]
}

for change ”%” character use this formatter code

series: [
        {
            name: 'example',
            type: 'gauge',
            detail: {formatter:'{value}%'},
            data: [{value: 50, name: 'example'}]
        }
    ]
for change split number this code in your option series
min:0,
max:1000,
splitNumber: 50, 

Thank you, I figured out the colors. The main question remains how do I change gauge numbers from 0 to 100, I want to use different numbers, and replace % with say $.

option = {
  series: [{
    name: 'example',
    type: 'gauge',
    radius: '90%',
    min:0,
    max:1000,
    splitNumber: 50,
    startAngle: 220,
    endAngle: -40,
    axisLine: {
      show: true,
      lineStyle: {
        width: 1,
        color: [[1,'rgba(0,0,0,0)']]
      }
    },
    axisLabel: {
      show: true,
      color:'#fff',
      distance:30
    },
    axisTick: {
      show: true,
      lineStyle: {
        color: '#fff',
        width: 1
      },
      length: -8
    },
    splitLine: {
      show: true,
      length: -20,
      lineStyle: {
        color: '#fff'
      }
    },
    detail: {
      show: false
    },
    pointer: {
      show: false
    }
  },

  ]
};

Thank you, it works

Our figures are very high, in millions, so how do I properly calibrate the gauge scale, if I put max number as 1000000 it’s just too much to display. For example, we can use scale in 100,000 which in short is 100K, is there a way to add letters to the numbers on the gauge? so instead of showing 10, 20, 30, 50…. it will show 10K, 20K, etc?

Never mind, I figured how to do this.

But now I have another issue. I’m trying to insert a shortcode for each chart into my home page, but it doesn’t show up at all. it works fine on the regular page: https://tovp.org/donation-fundmeter-test/ but not inside the page builder, there’s nothing to be displayed. Is it possible to make it display inside page builder? I tried putting shortcode inside text block, custom-html block, widget-text block and widget-html block and still nothing. I alos tried to put contact form 7 shortcode into page builder and it works fine, just your charts will not display.

Can you please help me troubleshoot this issue?

Thank you.

ok, will you let me know when and how? thank you

is there a way to control the length of the axisTick, but not the smaller ones which I found, but bigger ones that show for each number on the scale?

Any updates on the responsive feature for gauge charts? Thank you.

Hi. I’m interested in your plugin, I see that it has maps and images, my question is: can I use other maps, for example Mexico, other images to fill, or are they absolute, that is, can not be changed?

maps and images can be changed. demo page.

hi i am interestied in your plugin, however i want to add kuwait map divided by governates. i also want to see the backend and how easy to custmize the plugin before i buy. great plugin thank you.

hi, can you send your email addres to us.

i do not have your email address

by
by
by
by
by
by