vishwas-r / wp-canvasjs Goto Github PK
View Code? Open in Web Editor NEWWP CanvasJS plugin allows you to create and add interactive Charts & StockCharts to your wordpress page and posts using CanvasJS library.
License: MIT License
WP CanvasJS plugin allows you to create and add interactive Charts & StockCharts to your wordpress page and posts using CanvasJS library.
License: MIT License
Hi,
How can I create radar and stacked bar charts using this plugin?
Hello, Thank you for your useful and appealing plugin. I have a few questions.
Hello, Thank you for your useful and appealing plugin. I have a few questions.
Is it possible to specify the starting point on the X-axis? For instance, can it start from 0 when all the numbers in the graph are greater than 40?
Can I select specific numbers as cut-off points, such as 60, 75, 85 and 115?
Can the graph be colored differently within certain ranges: green from 0 to 60, orange from 60 to 85, and red above 85?
Is it possible to have different background colors within the range of the cut-off points?
hi
Thank you for your best solution to create chart by canvasJs.
can you give us some more example shortcode for another type of chart like doughnut.
Hello,
This plugin is excellent and serves as a great alternative to Google Charts. Given that Google Charts is no longer supported, your plugin stands out as a commendable option.
Here are a few notes:
The plugin could benefit from a more comprehensive guide. I’ve included a detailed guide for Google Charts below. It would be fantastic to have something similar for this plugin.
I’ve encountered difficulties in creating various types of charts such as bar, pie, etc. Having a detailed instruction manual would be extremely helpful.
The chart generated by this plugin doesn’t fit properly and overlaps with the footer. It appears that this issue needs to be addressed. I’ve tried adjusting its position in different modes using CSS (with the Yellow Pencil plugin), but it still doesn’t sit correctly. I’ve attached a picture for your reference.
Thank you for your attention to these matters. I hope these suggestions will assist in further improving the plugin.
=== GoogleGraph ===
Contributors: jvrtanoski
Donate link: http://tsba.mobi/donate/
Tags: google, graphs, charts, geo-chart, google charts
Requires at least: 3.8
Tested up to: 4.2.2
Stable tag: 0.4.2.1
License: CC BY-NC 4.0
License URI: http://creativecommons.org/licenses/by-nc/4.0/
Plugin allows the blog authors to add simple but effective geo-chart, bar-charts or line graphs in their blogs using Google's Chart .js library.
== Description ==
Plugin that will allow the blog authors to add simple but effective geo-chart, bar-charts or line graphs in their blogs.
The plug-in provides shortcodes for each chart type. The short codes can be placed anywhere in the text of the post/page
and the plug-in will render the chart in the place of the short code. The data for the chart is placed in form of table
insite the shortcode tag. For more details see the samples in the FAQ section.
The charts are based on Google's Javascript charts library, and the format of the data table is determined by the library itself.
For more details see the help pages of the Google Chart library.
== Installation ==
/wp-content/plugins/
directoryFrom version 0.3.2 we are adding a text with a link to our site under each graph. The text and link are wrapped in a paragraph
so you can easaly use CSS to hide the text from the page if you don't want the text to appear on your page.
Please address all your support questions in the "Support" part of the Wordpress site.
== Frequently Asked Questions ==
= I don't see any amdin panels =
The plugin provides only shortcodes. The main idea for this plugin is to allow Editors and Contributors to create their own charts
inside their texts. At the moment, the shortcodes are created manualy. We are working on widget that will help users to graphicaly create
the shortcodes for the chrat.
= Why is the "Powered by" text appearing under the chart =
We had spend effort to create this plug-in and we are investing our time in improving it and incorporating your suggestions. We don't charge
for the non-commercial use of the plug-in, all we ask is from our users to share thier comments for improvement of the plug-in and to
attribute our work to us. If you want to make the text invisible, you are free to use CSS and set the paragrah's display attribute to "none".
= I am placing the shortcode in the text, but the chart doesn't appear on the page =
Most common reason for this problem are the HTML tags that the visual editor inserts in the text for the new line. If you have this problem
first remove all new lines (so the whole text of the shortcode will be in only one line). If the problem persists, swithc to "Text" view in the editor
and verify that there are no HTML tags between the start of the shortcode and the end of the shortcode.
In version 0.3.3, we had added explicit filter for the HTML tags inside the shortcode. If you expreriance this problem and you can not resolve it with the
above steps, please send us the text (from the "Text" tab of the editor) and we will try to fix the problem for you.
= Supported shortcodes =
= General format of the shortcodes =
The detailed user manual can be found on our website http://tsba.mobi/project/googlegraph-wp-plug-in/
The shortcodes in this plug-in have general format of [tpeOfGraph] data [/typeOfGraph]. The data in the shortcodes is in JSON format as expected by Google's JavaScript library.
For more details on the supported options for each chart, refer to the google's developer page at https://google-developers.appspot.com/chart/interactive/docs/gallery
= Supported attributes to the short codes =
Global attributes
lineChart attributes
geoChart attributes
pieChart attributes
bubbleChart attributes
barChart
columnChart
scatterChart
= Geo Chart Example =
[geoChart width="700px" height="700px" ] ['Country', 'Popularity'], ['Germany', 200], ['United States', 300], ['Brazil', 400], ['Canada', 500], ['France', 600], ['RU', 700] [/geoChart]
Google geo chart supports the "markers" mode of display, and also allows you to specify the region of interest. We had exposed this functionality to the short code in order to achieve the following type of charts:
[geoChart width="700px" height="700px" displaymode="markers" region="MK"] ['City', 'Population', 'Area'], ['Skopje', 2761477, 1285.31], ['Bitola', 1324110, 181.76], ['Prilep', 959574, 117.27], ['Ohrid', 907563, 130.17], ['Shtip', 655875, 158.9], ['Gevgelija', 607906, 243.60], ['Resen', 380181, 140.7], ['Kriva Palanka', 371282, 102.41], ['Kavadarci', 67370, 213.44], ['Negotino', 52192, 43.43], ['Tetovo', 38262, 11] [/geoChart]
We have also added the ability to control the colour gradient
[geoChart width="700px" height="700px" colorstart="#e7711c" colorend="#4374e0"] ['Country', 'Popularity'], ['Germany', 200], ['United States', 300], ['Brazil', 400], ['Canada', 500], ['France', 600], ['RU', 700] [/geoChart]
= Line Chart Example =
The line chart short is activated by a short code [ lineChart ].
[lineChart width="600px" height="500px" legend="{ position: 'top', maxLines: 1 }" vaxis="{title: '$k', titleTextStyle: {color: 'black'}}" haxis="{title: 'Year', titleTextStyle: {color: 'black'}}" curvetype="none"] ['Year', 'Sales', 'Expenses'], ['2004', 1000, 400], ['2005', 1170, 460], ['2006', 660, 1120], ['2007', 1030, 540] [/lineChart]
We have also enabled the "function" rendering in order to create smooth curved line charts as in this example
[lineChart curvetype="function" width="600px" height="500px" stacked="1" legend="{ position: 'top', maxLines: 1 }" vaxis="{title: '$k', titleTextStyle: {color: 'black'}}" haxis="{title: 'Year', titleTextStyle: {color: 'black'}}" curvetype="function"] ['Year', 'Sales', 'Expenses'], ['2004', 1000, 400], ['2005', 1170, 460], ['2006', 660, 1120], ['2007', 1030, 540] [/lineChart]
= Column Chart Example =
The column chart type is activated by a short code [ columnChart ].
[columnChart width="500px" legend="{ position: 'top', maxLines: 2 }" vaxis="{title: 'in $000', titleTextStyle: {color: 'blue'}}" haxis="{title: 'Year', titleTextStyle: {color: 'blue'}}"] ['Year', 'Sales', 'Expenses'], ['2004', 1000, 400], ['2005', 1170, 460], ['2006', 660, 1120], ['2007', 1030, 540] [/columnChart]
Adding a visual style to the columns is very easy and done as annotation on the data in the short code. Here is one example of styled columns
[columnChart width="300px" stacked="1" legend="{ position: 'top', maxLines: 2 }" vaxis="{title: 'in $000', titleTextStyle: {color: 'blue'}}" haxis="{title: 'Year', titleTextStyle: {color: 'blue'}}"] ['Year', 'Visitations', { role: 'style' } ], ['2010', 10, 'color: gray'], ['2010', 14, 'color: #76A7FA'], ['2020', 16, 'opacity: 0.2'], ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'], ['2040', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2'] [/columnChart]
Columns can be stacked on top of each other in the following example
[columnChart width="500px" stacked="1" legend="{ position: 'top', maxLines: 2 }" vaxis="{title: 'in $M', titleTextStyle: {color: 'blue'}}" haxis="{title: 'Period', titleTextStyle: {color: 'blue'}}"] ['Genre', 'Fantasy & Sci Fi', 'Romance', 'Mystery/Crime', 'General','Western', 'Literature', { role: 'annotation' } ], ['2010', 10, 24, 20, 32, 18, 5, ''], ['2020', 16, 22, 23, 30, 16, 9, ''], ['2030', 28, 19, 29, 30, 12, 13, ''], [/columnChart]
= Bar Chart Example =
The bar chart can be created by adding the short code [ barChart ]
[barChart width="500px" stacked="1" legend="{ position: 'top', maxLines: 2 }" vaxis="{title: 'in $000', titleTextStyle: {color: 'blue'}}" haxis="{title: 'Year', titleTextStyle: {color: 'blue'}}"] ['Year', 'Sales', 'Expenses'], ['2004', 1000, 400], ['2005', 1170, 460], ['2006', 660, 1120], ['2007', 1030, 540] [/barChart]
The modified style
[barChart width="500px" stacked="1" legend="{ position: 'top', maxLines: 2 }" vaxis="{title: 'in $000', titleTextStyle: {color: 'blue'}}" haxis="{title: 'Year', titleTextStyle: {color: 'blue'}}"] ['Year', 'Visitations', { role: 'style' } ], ['2010', 10, 'color: gray'], ['2010', 14, 'color: #76A7FA'], ['2020', 16, 'opacity: 0.2'], ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'], ['2040', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2'] [/barChart]
and the bars stacked / connected with each other
[barChart width="500px" stacked="1" legend="{ position: 'top', maxLines: 2 }" vaxis="{title: 'in $M', titleTextStyle: {color: 'blue'}}" haxis="{title: 'Period', titleTextStyle: {color: 'blue'}}"] ['Genre', 'Fantasy & Sci Fi', 'Romance', 'Mystery/Crime', 'General','Western', 'Literature', { role: 'annotation' } ], ['2010', 10, 24, 20, 32, 18, 5, ''], ['2020', 16, 22, 23, 30, 16, 9, ''], ['2030', 28, 19, 29, 30, 12, 13, ''], [/barChart]
= Pie Chart Example =
The pie chart is triggered by short code [ pieChart ]
[pieChart width="400px" ] ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] [/pieChart]
The position and color of the slices can be altered by adding the "slices" option to the shortcode as follows:
[pieChart width="400px" slices="{ 0: {offset: 0.2, color: 'black'}, 3: {color: white} }"] ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] [/pieChart]
At the moment we support only the basic pie chart, however we plan to add the 3D and Donut type soon.
= Bubble Chart Example =
To crate a bubble chart, you can use the [ bubbleChart ] short code as shown on the following example
[bubbleChart width="400px" vaxis="{title: 'X', titleTextStyle: {color: 'black'}}" haxis="{title: 'Y', titleTextStyle: {color: 'black'}}" colorstart='yellow' colorend='red' bubble="{textStyle: {auraColor: 'none'}}"] ['ID', 'X', 'Y', 'Temperature'], ['a', 80, 167, 120], ['b', 79, 136, 130], ['c', 78, 184, 50], ['d', 72, 278, 230], ['e', 81, 200, 210], ['f', 72, 170, 100], ['g', 68, 477, 80] [/bubbleChart]
Bubble charts support classification (by color type) and size of the bubble. To add color class and size you will need to add two more columns to your data as shown on the example below:
[bubbleChart width="600px" vaxis="{title: 'Fertility Rate'}" haxis="{title: 'Life Expectancy'}" bubble="{textStyle: {fontSize: 11}}" title="Correlation between life expectancy, fertility rate and population of some world countries (2010)"] ['ID', 'Life Expectancy', 'Fertility Rate', 'Region', 'Population'], ['CAN', 80.66, 1.67, 'North America', 33739900], ['DEU', 79.84, 1.36, 'Europe', 81902307], ['DNK', 78.6, 1.84, 'Europe', 5523095], ['EGY', 72.73, 2.78, 'Middle East', 79716203], ['GBR', 80.05, 2, 'Europe', 61801570], ['IRN', 72.49, 1.7, 'Middle East', 73137148], ['IRQ', 68.09, 4.77, 'Middle East', 31090763], ['ISR', 81.55, 2.96, 'Middle East', 7485600], ['RUS', 68.6, 1.54, 'Europe', 141850000], ['USA', 78.09, 2.05, 'North America', 307007000] [/bubbleChart]
= PHPLeague integration =
Since v0.4 we have added integration for the PHPLeague plugin, allowing you to create charts showing the statisics for the teams of the league.
We support two shortcodes, as follows:
You are not required to provide the table data for the chart, we are reading the data from the datbase and preparing it in the form suitable for the chart.
We support the following attributes on the shortcodes:
`[phpLeagueGraphPerCategory league="2" /]
[phpLeagueGraphPerTeam/]
[phpLeagueGraphPerTeam league="1" club_list="1,2"/]`
== Screenshots ==
== Changelog ==
= 0.4.2 =
== Upgrade Notice ==
= 0.4 =
Update to have the latest version
= 0.3 =
Update to have the latest version
= 0.2 =
Update to have correct version file
Thank you.
This code from https://github.com/vishwas-r/WP-CanvasJS/wiki/Chart-Types#5-stacked-bar-chart
not work properly.
8. Candlestick Chart:
[canvasjschart options="{title:{text: 'CanvasJS Candlestick Chart'}, data: new Array({type: 'candlestick', dataPoints: new Array({ x: 10, y: [20, 30, 10, 15] },{ x: 20, y: [30, 40, 20, 35] },{ x: 30, y: [35, 45, 25, 40] },{ x: 40, y: [45, 50, 30, 40] },{ x: 50, y: [40, 60, 35, 55] })})}"]
Hi
please check it on WordPress and with other elements.
After rendering, the diagram is not placed in the right place and comes on top of other texts. Changing the CSS does not solve the problem.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.