How to use my own external data with Zingchart?

Question

I am designing a website using wix but also some embedded JavaScript and HTML to learn those languages. I am using this tutorial https://www.zingchart.com/docs/tutorials/loading-data/using-json-data but when I change the data url to my data I get the error:

Network error: Resource not found

Section: URL Data Loader

JSON Data:

undefined

Their data: https://storage.googleapis.com/studio-assets/resources/chart.json

My data: https://raw.githubusercontent.com/IsaacOldwood/shopTitansData/master/chart.json

I have read through the documentation and changed my data format to match theirs exactly. I have tried using the github api and the raw data.

Their Code:

<head>
    <meta charset="utf-8">
    <title>ZingSoft Demo</title>

    <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    <style>
        html,
        body,
        #myChart {
            height: 100%;
            width: 100%;
        }

        zing-grid[loading] {
            height: 800px;
        }
    </style>
</head>

<body>
    <div id='myChart'></div>
    <script>
        ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
        zingchart.render({
            id: 'myChart',
            output: "svg",
            "dataurl": "https://storage.googleapis.com/studio-assets/resources/chart.json",
            height: "100%",
            width: "100%"
        });
    </script>
</body>

</html>

The code on my website embedded:

<html>

<head>
    <meta charset="utf-8">
    <title>ZingSoft Demo</title>

    <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    <style>
        html,
        body,
        #myChart {
            height: 98%;
            width: 99%;
        }

        zing-grid[loading] {
            height: 800px;
        }
    </style>
</head>

<body>
    <div id='myChart'></div>
    <script>
        ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
        zingchart.render({
            id: 'myChart',
            output: "svg",
            "dataurl": "https://raw.githubusercontent.com/IsaacOldwood/shopTitansData/master/chart.json",
            height: "100%",
            width: "100%"
        });
    </script>
</body>

</html>

The expected output is the graph from the tutorial with my data. But the actual output is the error.

Network error: Resource not found (https://raw.githubusercontent.com/IsaacOldwood/shopTitansData/master/chart.json)

Section: URL Data Loader

JSON Data:

undefined

score 0 · Answer 1 · answered Oct 03 '19 at 20:21

You can refer to our data basics tutorial in getting started to solve your issue.

The main thing is your url should return a full JSON packet with proper headers and JSON formatting from that endpoint.

Demo Config

{
  "type": "bar",
  "title": {
    "text": "Data Basics - Remote Config",
    "fontSize": 24
  },
  "scaleX": {
    "label": {
      "text": "Days"
    },
    "labels": ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
  },
  "scaleY": {
    "label": {
      "text": "Temperature (°F)"
    }
  },
  "plot": {
    "animation":{
    "effect": "ANIMATION_EXPAND_BOTTOM",
    "method": "ANIMATION_STRONG_EASE_OUT",
    "sequence": "ANIMATION_BY_NODE",
    "speed": 275
  }
},
"series": [{
    "values": [23, 20, 27, 29, 25, 17, 15],
    "text": "Week 1"
  },
  {
    "values": [35, 42, 33, 49, 35, 47, 35],
    "text": "Week 2"
  },
  {
    "values": [15, 22, 13, 33, 44, 27, 31],
    "text": "Week 3"
  }
]
}

Working Demos

We have a working studio demo here as well as an inline example.

// window.onload event for Javascript to run after HTML
// because this Javascript is injected into the document head
window.addEventListener('load', () => {
  // Javascript code to execute after DOM content
  
  // render chart with width and height to
  // fill the parent container CSS dimensions
  zingchart.render({ 
    id: 'myChart', 
    dataurl: 'https://cdn.zingchart.com/datasets/remote-config.json', 
    height: '100%', 
    width: '100%' 
  });
});

html, body {
 height:100%;
 width:100%;
 margin:0;
 padding:0;
}

.chart--container {
 height:100%;
 width:100%;
 min-height:150px;
}

.zc-ref { display:none; }

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>ZingGrid: Blank Grid</title>
    <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
  </head>
  <body>
    <!-- CHART CONTAINER -->
    <div id="myChart" class="chart--container">
      <a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a>
    </div>
  </body>
</html>

How to use my own external data with Zingchart?

1 Answers1

Working Demos