issue with stacked columns and dates in YYYY-m-D

[Andy]

Hi,
I’m having issues where the dates are not correctly stacked to the right position. I’m using PHP to generate the stacked graphs. I’m displaying all dates but still having issues. It seems they are incorrectly spread. It’s as the date format is not known. It’s not clear for me what formats are supported, if any.

jsfiddle
https://jsfiddle.net/k6fw0r8m/

[Shashi Ranjan]

@andy,

Stacked Charts are plotted when multiple column/area charts with same x values are plotted on same scale. In the JSFiddle shared above, you’re using label to display the date and time values. Passing it as Date Object to x-values and use the valueFormatString for formatting the date and time values should work fine in your case. Please refer this documentation page for more information on valueFormatString. Also, please take a look at this updated JSFiddle.

—
Shashi Ranjan
Team CanvasJS

[Andy]

@shashiranjan
thanks for sharing.

I’m not an expert ob js, but I’d like to load my dataset from Json? At the moment I understand how do create the root variables + dataset, but I cant cast in json for obvious reasons. I understand this might not be specific to canvas JS but felt I could at least ask.

The jsfiddle I shows was just an example where I didn’t have to expose my API endpoints.

[Shashi Ranjan]

@andy,

Can you kindly create a sample project reproducing the issue you are facing and share it with us over Google-Drive or Onedrive along with the PHP file that is being used to generate data(sample data/database) so that we can look into the code, run it locally to understand the scenario better and help you resolve?

—
Shashi Ranjan
Team CanvasJS

[Andy]

Now sure if I can dare to post here, forum behind cloud flare and was sent to their verification page and my POST was gone…

Anyways I can share some code, I have succeeded a bit with adding a simple object from my jSON, but I’m using push in a way that will append every date and value to every “name” section of the CanvasJS object.

              var chart4 = new CanvasJS.Chart("networking", {
                culture:  "se",
              	animationEnabled: true,
              	theme: "light1",
              	zoomEnabled: true,
	             legend: {
                 cursor: "pointer",
                 itemclick: toggleDataSeries
               },
               axisX: {
                 type: 'dateTime'
               },
              	data: dataPointsN

              });

              function addDataN(dataN) {
                var network = dataN;
                var dataPointsArray = [];

                for (var i = 0; i < Object.keys(network).length; i++) {

                  for (var ii = 0; ii < network[Object.keys(network)[i]].length; ii++) {

                    // console.log(i+' '+network[Object.keys(network)[i]][ii]["x"]);

                    dataPointsArray.push(
                      {
                       "x": new Date(network[Object.keys(network)[i]][ii]["x"]),
                       "y": network[Object.keys(network)[i]][ii]["y"]
                     }

                   );

                   }

                  dataPointsN.push({
                     "name": Object.keys(network)[i],
                     "type": "stackedColumn",
                     "xValueType": "dateTime",
                     "lineThickness": 10,
                     "showInLegend": "true",
                     "dataPoints": dataPointsArray
                 });

                }

                console.log(dataPointsN);
                chart4.render();
              }

              $.getJSON("API/Stream.php?Func=Network", addDataN);

As my key is a name I’m using the rather strange method above to find they keys, but it works. However my push will for obvious reasons grow over time.

Here is an sample output of the JSON for reference.

{
    "Arbetsf\u00f6rmedlingen": [
        {
            "x": "2020-03-02",
            "y": 23
        },
        {
            "x": "2020-04-10",
            "y": 8
        }
    ],
    "Name 2": [
        {
            "x": "2020-03-02",
            "y": 11
        },
        {

• This reply was modified 4 years ago by Andy.

[Shashi Ranjan]

@andy,

It seems like JSON data shared by you is partial. Can you please create a JSFiddle reproducing the issue along with your complete JSON data being hosted on some JSON storage service like npoint.io and share it with us so that we can look into the code to understand the scenario better and help you out.

—
Shashi Ranjan
Team CanvasJS

[Andy]

Hi again,
You can check a online version here http://jobbigt.nu/statistik

I have disabled referrer on the endpoints so you can load them in Postman if you want, I have also kept my console log in the code for the object I’m attaching to CanvasJS. It’s clear that it’s been added 6 times for my 6 datasets, i.e. the loop is not reset, witch makes sense I’m just not sure how to to do it another way.

[Andy]

Hi again @shashiranjan,
You can check a online version here http://jobbigt.nu/statistik

I have disabled referrer on the endpoints so you can load them in Postman if you want, I have also kept my console log in the code for the object I’m attaching to CanvasJS. It’s clear that it’s been added 6 times for my 6 datasets, i.e. the loop is not reset, witch makes sense I’m just not sure how to to do it another way.

[Shashi Ranjan]

@andy,

Can you kindly create a sample project reproducing the issue you are facing and share it with us over Google-Drive or Onedrive along with the PHP file that is being used to generate data(sample data/database) so that we can look into the code, edit and run it locally to understand the scenario better and help you resolve?

—
Shashi Ranjan
Team CanvasJS