from Highcharts changelog:

Highcharts 5.0.0 (2016-09-29):

• Added styled mode for optional separation of SVG and CSS.
• Added responsive option set.
• Added accessibility option set.
• Added new function, Chart.update in order to update the chart options after render time.
• Added new function, Chart.addCredits.
• Added new function, Chart.title.update.
• Added new function, Chart.credits.update.
• Added new function, Legend.update.
• ...

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

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.

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 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']

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'
            });

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

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

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.

all options are at the same line?

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.

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.

Generic businesses

Support of live / on-the-fly data (CSV)

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.).

Support of live / on-the-fly data (JSON)

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.

Support of JSON import / copy-paste / URL

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

Load / Save

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

Support of themes

There is no option to load additional themes provided by HC (https://github.com/highcharts/highcharts/tree/master/js/themes) - Examples:

• Dark Unica http://www.highcharts.com/demo/dark-unica
• Sand Signika http://www.highcharts.com/demo/sand-signika
• Grid Light http://www.highcharts.com/demo/grid-light

Possible improvement: add a tab or an option to select a different theme.

Pluggable EC

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.

Specific businesses

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.

Support of JSON-stat

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.

Wrapping of HC JSON object into an abstract object

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.

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

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.

(https://www.drupal.org/node/2724295)

Hi there.

Im trying to reproduce the chart as shown.

I cant get the names under each column can you please advise?

title says it all

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

http://api.highcharts.com/highcharts/option/dump.json is updated too, so there is no need to wait any longer :-)

to reproduce

1. create data on graph.
2. Axes > general > click inverted.
3. Axes > x axis > click reversed.

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.

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?

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)

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.

example: http://www.highcharts.com/demo/spline-irregular-time

relates to #23

Use vue.js for routing,templating, rendering and structuring the app instead of custom implementations.

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

The yAxis disappears from the axes-menu when the title contains only spaces.
(from: https://www.drupal.org/node/2683533#comment-10946855)

I guess what I'm asking is does this have a standalone plugin for TinyMCE?

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
}
]
},

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.

See the video in
https://www.drupal.org/node/2683635

http://www.highcharts.com/documentation/changelog

https://www.drupal.org/node/2683539

Hi is there a way of doing this?

Ive got multiple charts on a page, some have to be bigger that others etc