title: How to use canvasjs to draw column chart using text data
body: <p>I am using the canvasjs for plotting the column chart. I am using the code from this link <a href="https://canvasjs.com/editor/?id=https://canvasjs.com/example/gallery/column/oil_reserves/" rel="nofollow noreferrer">https://canvasjs.com/editor/?id=https://canvasjs.com/example/gallery/column/oil_reserves/</a>, the code is below: </p>
  
  <pre><code> &lt;!DOCTYPE HTML&gt;
   &lt;html&gt;
   &lt;head&gt;  
   &lt;title&gt;Basic HTML5 Column Chart &lt;/title&gt;
   &lt;script type="text/javascript"&gt;
   window.onload = function () {
   var chart = new CanvasJS.Chart("chartContainer",
    {
    title:{
      text: "Top Oil Reserves"    
    },
    animationEnabled: true,
    axisY: {
      title: "Reserves(MMbbl)"
    },
    legend: {
      verticalAlign: "bottom",
      horizontalAlign: "center"
    },
    theme: "theme2",
    data: [
  
    {        
      type: "column",  
      showInLegend: true, 
      legendMarkerColor: "grey",
      legendText: "MMbbl = one million barrels",
      dataPoints: [      
      {y: 297571, label: "Venezuela"},
      {y: 267017,  label: "Saudi" },
      {y: 175200,  label: "Canada"},
      {y: 154580,  label: "Iran"},
      {y: 116000,  label: "Russia"},
      {y: 97800, label: "UAE"},
      {y: 20682,  label: "US"},        
      {y: 20350,  label: "China"}        
      ]
    }   
    ]
  });
  
  chart.render();
  }
  &lt;/script&gt;
   &lt;script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"&gt;&lt;/script&gt;
   &lt;/head&gt;
   &lt;body&gt;
   &lt;div id="chartContainer" style="height: 300px; width: 100%;"&gt;
   &lt;/div&gt;
   &lt;/body&gt;
   &lt;/html&gt;
  </code></pre>
  
  <p>Now I want to use a text file generated from python instead of the default values in the dataPoints. The test file data looks like a dictionary data separated by comma. Here is a sample of the text file data: </p>
  
  <pre><code>     {'DNS_SERVER1': 2.768651, 'FTP_SERVER1': 2.488129, 'AUTHENTICATION_SERVER1': 2.768651, 'WAP_SERVER1': 2.768651, 'WEB_SERVER1': 2.768651, 'EMAIL_SERVER1': 2.768651}
  </code></pre>
  
  <p>I want the labels to be first part before semicolon like 'DNS_SERVER1' and the value y to be equal to 2nd part of the semicolon like 2.768651. How Can I do this using the canvasjs script? Any help is appreciated.</p>
  
  <p>Thanks.</p>