Insert data into the chart

Question

Insert data into the chart

Asked 7 years, 2 months ago

Viewed 334 times

1

I have the following code:

window.onload = function () {
	var chart = new CanvasJS.Chart("chartContainer",
	{
		title:{
			text: "Desktop Search Engine Market Share, Dec-2012"
		},
                animationEnabled: true,
		legend:{
			verticalAlign: "center",
			horizontalAlign: "left",
			fontSize: 20,
			fontFamily: "Helvetica"        
		},
		theme: "theme2",
		data: [
		{        
			type: "pie",       
			indexLabelFontFamily: "Garamond",       
			indexLabelFontSize: 20,
			indexLabel: "{label} {y}%",
			startAngle:-20,      
			showInLegend: true,
			toolTipContent:"{legendText} {y}%",
			dataPoints: [
				{  y: 83.24, legendText:"Google", label: "Google" },
				{  y: 8.16, legendText:"Yahoo!", label: "Yahoo!" },
				{  y: 4.67, legendText:"Bing", label: "Bing" },
				{  y: 1.67, legendText:"Baidu" , label: "Baidu"},       
				{  y: 0.98, legendText:"Others" , label: "Others"}
			]
		}
		]
	});
	chart.render();
}

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<!DOCTYPE HTML>




<body>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>

I’d like to put my own value on the chart. The return of my php is like this:

[
  {
    "y": 83.24,
    "legendText": "Google",
    "label": "Google"
  },
  {
    "y": 8.16,
    "legendText": "Yahoo!",
    "label": "Yahoo!"
  },
  {
    "y": 4.67,
    "legendText": "Bing",
    "label": "Bing"
  },
  {
    "y": 1.67,
    "legendText": "Baidu",
    "label": "Baidu"
  },
  {
    "y": 0.98,
    "legendText": "Others",
    "label": "Others"
  }
]

I’m trying to put this figure in place and I can’t:

I’ve tried it like this:

var dados = [];  
  $.ajax({
     url : 'file.php',
     type : 'post',
     dataType : 'json',
     data :{
        acao  : 'a' 
      }
      ,success : function( data ){

         $.each( data, function( i, j ){
            dados.push( j )
         } ); 

      }
  });

I overwrite the data by mine and nothing.

1 answer

Browser other questions tagged javascript html chartjs

You are not signed in. Login or sign up in order to post.

by AnthraxisBR • **4,361** points · Answer 1 · 2017-09-19T17:36:34+00:00

You have two ways of doing this:

Build an array in PHP and embed it into JS, or build a string in the format, and print on top of JS, in my opinion, the first is better, the second is easier.

dataPoints is nothing more than the array of the series, in this case, you already have an array, I find it easier to turn it into a string, and print on the JS.

Constructing the string:

<?php
$arr = [
    1 => [
    "y" => 83.24,
    "legendText" => "Google",
    "label" => "Google"
  ],
  2 => [
    "y" => 8.16,
    "legendText" => "Yahoo!",
    "label" => "Yahoo!"
  ],
  3 =>
  [
    "y"=> 4.67,
    "legendText"=> "Bing",
    "label"=> "Bing"
  ],
  4 =>
  [ "y"=> 1.67,
    "legendText"=> "Baidu",
    "label"=> "Baidu"
  ],
  5=>
  [
    "y" => 0.98,
    "legendText" => "Others",
    "label" => "Others"
  ]
];


$count = count($arr);
$str = '[';
$limit = 1;
foreach($arr as $row){
    $str .= '{';
    $str .= '"y":'.$row['y'].',';
    $str .= '"legentText":"'.$row['legendText'].'",';
    $str .= '"label":"'.$row['label'].'"';

    if($limit < $count){
        $str .= '},';   
    }else{
        $str .= '}';
    }
    $limit += 1;
}
$str .= ']';

echo $str;

$str answer that:

[{"y":83.24,"legentText":"Google","label":"Google"},{"y":8.16,"legentText":"Yahoo!","label":"Yahoo!"},{"y":4.67,"legentText":"Bing","label":"Bing"},{"y":1.67,"legentText":"Baidu","label":"Baidu"},{"y":0.98,"legentText":"Others","label":"Others"}]

Just print this string within dataPoints, and your chart was built through this array.

Note: I answered this way with string because I don’t know how to use this graphics api, I always use fusioncharts for having a class that allows to render directly with PHP.