daemth / easychart Goto Github PK
View Code? Open in Web Editor NEWA visual editor for the world's best web charting tool: Highcharts.
Home Page: http://www.easychart.org
License: MIT License
A visual editor for the world's best web charting tool: Highcharts.
Home Page: http://www.easychart.org
License: MIT License
If you are working with a small set of decimals (e.g. 1.01 - 1.25), you can change the Tick Interval on the Value Axis to a small number (e.g. 0.04) and it previews well, but when you try to save it you get an error saying the two nearest values are 0 and 1.
Hello,
Not sure if this issue should be posted here or not, tried the drupal.org project issue queue and didn't hear anything back.
The site I'm developing needs to have multiple chart types per node so I decided to use the Paragraphs module so I could mix and match with other fields (ie. tablefield). I set up a paragraph bundle with a chart field in it and when I viewed the node edit form the chart field displayed twice inside the paragraph (see screen grab attached). I tried adding a chart field to a field collection and the same thing happened.
If there's anyway you could help me out with this it would be greatly appreciated. Please let me know if any other info is needed.
When I try to build the app, I have the error:
[23:22:14] Using gulpfile ~/work/github/easychart/gulpfile.js
[23:22:14] Starting 'watchify:app'...
[23:22:16] Browserify Error { [Error: Cannot find module 'lodash.keys' from '/home/gologuzov/work/github/easychart/src/js/services']
Hi.
I have the config now saving to a database. the example string is
"{"chart":{"type":"area"},"xAxis":[{"type":"category"}],"yAxis":[{}],"plotOptions":{"series":{"dataLabels":{"enabled":true},"marker":{"enabled":false}}},"title":{"text":"sdfsdfsd"}}"
When I then use this script it doesn't show the title for example or change it to an area graph.
<!!!!!!!!!script>
var cd ;
document.addEventListener("DOMContentLoaded", function () {
var configdata = @Html.Raw(@configedchart);
var chart = new ec({
element : document.getElementById('container'),
dataUrl : '/chart/[email protected]&[email protected]',
config : configdata,
dataTab : false,
templatesTab: false,
customiseTab: false,
UIMode: 'viewer'
});
cd = configdata;
chart.setConfig(configdata);
});
<!!!!!!!!!/script>
Any suggestions? Thanks
Trying to modify default colors works fine when you use the color picker, but not if you manually type in a color code.
reported here: https://www.drupal.org/node/2683527
Hi is there a way of doing this?
Ive got multiple charts on a page, some have to be bigger that others etc
title says it all
When working with Column charts and trying to set a plot-band, you can set it to a decimal number (e.g. 1.5) and it previews fine, but it won't let you save. You get a "Please enter a valid value. The two nearest valid values are 1 and 2."
when I see the demo and the debug tab, I have the full config string with the data included here. But as soon as I do easyChartInstance.getConfig();
I have the config object without the data within the series attribute.
How can I get the exact same javascript object as shown in the debug tab?
All buttons within the Easychart plugin should have the type 'button' to avoid that they submit a form e.g. when they are included in the Drupal node edit form.
When selecting a polar chart (apple watch), the chart looks ok. However the configuration sent through an api call looses some information:
Original version taken from the debug panel:
...
"series": [
{
"borderColor": "#7cb5ec",
"data": [
{
"color": "#7cb5ec",
"radius": "100%",
"innerRadius": "100%",
"y": 80
}
],
"animation": false,
"name": "Move"
},
...
Version received after API call:
"series": [
{
"borderColor": "#7cb5ec",
"animation": false,
"name": "Move",
"data": [
{
"y": 80
}
]
},
as reported by ryantollefson on drupal.org:
Chart looks good when previewing in the (Drupal) edit node screen, but when you save and publish it goes back to a line graph.
When you edit, your settings are still there, they just never show in the published version.
Hi,
I am setting my data and config from outside via ec.setConfig(config)
and ec.setData(config)
. Then when I am opening my bootstrap modal window where the easychart editor is included, the data and config is set correct, but the highcharts preview box on the right (<div id="chartContainer">...</div>
) was not being updated.
Can I call a function to force an update on it?
Thank you!
Michael
to reproduce
Hi what format should the date time be in.
and how can I format it for example MM-DD-YYYY or DD-MMM-YY
thanks
Jon
Hi there.
I have the below data.
I want to show the graph grouped on the date, with on that day there was high medium and low numbers.
Please can you advise how I can do this please?
Thanks in advance.
, Count Date
High 16 2016-10-03
Medium 14 2016-10-03
Low 20 2016-10-03
High 19 2016-10-04
Medium 17 2016-10-04
Low 12 2016-10-04
High 22 2016-10-05
Medium 15 2016-10-05
Low 20 2016-10-05
High 20 2016-10-06
Medium 12 2016-10-06
Low 14 2016-10-06
High 9 2016-10-07
Medium 16 2016-10-07
Low 21 2016-10-07
High 21 2016-10-10
Medium 15 2016-10-10
Low 25 2016-10-10
Hi,
Firstly what a great product!
Im very keen to use this in some software I'm in the middle of build. at present Im building the charts manually and thats long winded.
The aim is to use your EasyChart to allow users to modify the chart with ease.
so have some question.
How can I show a chart that users EasyChart to pull the data from a URL and then show it to the page?
How can I save what the user has modified?
Im lost really within the documentation, not sure where to start.
An example would be awesome. Ideal would be to have a chart on a page with a spanner symbol then click that, this will load the EasyChart JS page. ("easyChart/demo/index.html") then make the change, hit save and its then rendered on the page for all users to see.
When I set the options and then click on 'Axes' in the Customize set, I get an error:
Uncaught TypeError: Cannot read property 'options' of undefined
As long as I don't set options myself, everything works ok.
from Highcharts changelog:
Highcharts 5.0.0 (2016-09-29):
http://api.highcharts.com/highcharts/option/dump.json is updated too, so there is no need to wait any longer :-)
Use vue.js for routing,templating, rendering and structuring the app instead of custom implementations.
When an array is entered as default value for an option (e.g. "colors") in the guiConfig-object it gets parsed wrong and results in an error.
Normally, defaults can be set as followed:
var guiConfig = {
"panels": [
//...
{
"panelTitle": "Colors and borders",
"panes" : [
{
"title" : "default colors",
"options":[{"name":"colors","defaults":["#ff00ff" , "#434348" , "#90ed7d" , "#f7a35c" , "#8085e9" , "#f15c80" , "#e4d354" , "#2b908f" , "#f45b5b" , "#91e8e1"]}]
}
// more panes here...
]
}
// more panels here...
]
};
in the 'appleWatch' template, there are some functions in the chart.events object. However in the config returned by the configUpdate event, the chart.events object is always empty.
relates to #23
Is there a way to put the title of a donut chart in the center of the donut rather than at the top?
Similarly, what about a value from the table as a label in the center of the donut (e.g. show the value from cell C8 as text in the middle of the donut)?
(original issue: https://www.drupal.org/node/2724285 by @ryantollefson)
Hey,
some wouldn't say it's an issue but it definitely is: It's easy to see your love to nodejs and javascript but it's an design issue to combine everything in javascript to finally spit it out.
A more welcome separation would at least consider separate css and not a single but bloated javascript file that includes markup, styling and scripting.
I know it's working but it's absolutely unnecessary, makes it harder to customize and does not follow any guideline for separation of different contents. Only because it's possible it doesn't mean that it's a good way.
Please consider in the future a better concept that separates javascript, css and maybe a html-template for the html markup that will be used by your nodejs scripts. It would help to widespread your very cool tool and to gain acceptance.
Best regards
See the video in
https://www.drupal.org/node/2683635
Right now the type of build depends on the script you're using; app vs render.
An option to choose the "UI-mode" (eg preview vs editor) would be nicer:
var easychart = new ec({
element: document.getElementById("easychart-container"),
UIMode: 'render',
dataUrl:'data/line.csv'
});
I guess what I'm asking is does this have a standalone plugin for TinyMCE?
If your xAxis' type is "category" and your yAxis has high values, highcharts produces the error "Uncaught Highcharts error #19: www.highcharts.com/errors/19". It's about there being too many ticks, that simply can not be shown on the chart's canvas.
This is because the yAxis values are being extended with the xAxis values at line 512 in jquery.easychart.js, as is defined at line 10028 in highchartsConfigurationOptions.js. I noticed highchartsConfigurationOptions.js also provides a excluding option for each entry, but this seems to be ignored when extending. A quick fix I used for bestuurszaken.be is to not let the yAxis extend the xAxis, but if the excluding option would be taken into account, then I presume it would be better to set the excluding parameter for the yAxis to "type" so the type is not being copied over.
The yAxis disappears from the axes-menu when the title contains only spaces.
(from: https://www.drupal.org/node/2683533#comment-10946855)
all options are at the same line?
Hi @daemth , I'm Alexandre, and we'll meet on October 10th, nice to meet you ;-) .
First of all, I'd like to congratulate you for this great project which really makes the configuration and integration of charts an easy process.
I'd like to share with you and the community a list of improvements that could be added to EC. Most of them will serve some of our specific needs, but they might also interest other people. Here there are.
At the moment, EC provides the tab "url CSV" to reference a CSV file, but as soon as the form is submitted, the CSV file is imported. So live data is then turned into static data, embed in the HC JSON object.
Possible improvement: link to the URL of the CSV file containing data, and grab the data on-the-fly, at the time the chart is rendered.
It might not have to be tackled at EC level, but some mechanisms will have to make such behavior efficient (caching, etc.).
Similar to previous case, except it would support data configured in a JSON file.
Possible improvement: link to the URL of the JSON file containing data, and grab the data on-the-fly, at the time the chart is rendered.
When EC is used together with DP, the HC JSON object is saved and can be retrieved / edited at later time.
With the EC standalone plug-in, such feature is missing so webmasters have no mean to edit an existing chart at a later time.
Possible improvement: allow the import / copy-paste / link to URL of HC JSON object to resume or allow editing of existing charts.
Similar request: #14
This is similar to previous case, except it would allow to save / load charts directly from the EC standalone plug-in.
Sounds like something in progress: #22
There is no option to load additional themes provided by HC (https://github.com/highcharts/highcharts/tree/master/js/themes) - Examples:
Possible improvement: add a tab or an option to select a different theme.
The ReadMe file hosted on EC Github https://github.com/daemth/easychart provides well document API and ways to configure the EC object.
Anyway, there's no information on how to plug or hook elements to the EC GUI or engine.
Possible improvement: provide technical documentation on how to create plug-ins / enrich features of EC.
These businesses are not all directly related to EC, as EC is a GUI for HC and is limited to HC possibilities.
However, they are mentioned to give a large vision on how charts can be used within organizations.
Possible improvement: reference a JSON-stat URL as a source of data (more information about JSON-stat format https://json-stat.org/ ).
But for this, JSON-stat should be supported by HC first.
EC allows to create a HC JSON object to represent a chart.
In our project, the HC JSON object must then be wrapped into a abstract object so that it can be detected and rendered by our custom lazy loader.
Possible improvement: provide a way to wrap the HC JSON object or map properties into an abstract object.
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.