Chartli - Interactive Chart

By : telatkaya_ Published on Saturday, February 20, 2016,23:46:04 in Royalty Free Javascript

Screenshots

Demo

Buy (14 $)

14 $

Chartli – Jquery Interactive Charts Plugin

Create your own interactive line,bar,pie,radar,map,cone,chord e.t.c. chart easily

Power Customizable

Greatly Examples

Save as PNG Images all charts

Change chart type easily

Change color easily

Customizable Map Charts

Interactive Chart Elements

Included documentation file


    <script type="text/javascript">

                var lineChart= chartli.init(document.getElementById('lineID'));
                var option = {
                    ...
                }
                lineChart.setOption(option);

    </script>

Chart Datas is only jquery code

series: [//data options
                {
                    name: 'Yahoo',
                    type: 'bar',
                    stack: 'sum',
                    barCategoryGap: '50%',
                    itemStyle: {
                        normal: {
                            color: 'tomato',
                            barBorderColor: 'tomato',
                            barBorderWidth: 6,
                            barBorderRadius: 0,
                            label: {
                                show: true, position: 'insideTop'
                            }
                        }
                    },
                    data: [260, 200, 220, 120, 100, 80]
                },
                {
                    name: 'Forecast',
                    type: 'bar',
                    stack: 'sum',
                    itemStyle: {
                        normal: {
                            color: '#fff',
                            barBorderColor: 'tomato',
                            barBorderWidth: 6,
                            barBorderRadius: 0,
                            label: {
                                show: true,
                                position: 'top',
                                formatter: function (params) {
                                    for (var i = 0, l = option.xAxis[0].data.length; i < l; i++) {
                                        if (option.xAxis[0].data[i] == params.name) {
                                            return option.series[0].data[i] + params.value;
                                        }
                                    }
                                },
                                textStyle: {
                                    color: 'tomato'
                                }
                            }
                        }
                    },
                    data: [40, 80, 50, 80, 80, 70]
                }
            ]

Easily change data values