Echarts.js create dynamic data have issue

Echarts.js create dynamic data have issue


inside the js code i use html table to push the data

var dps = [];

$("table.table_1 tr").each(function(){
    key = $("td:nth-child(2)", $(this)).text();
    value = $("td:nth-child(1)", $(this)).text();
    if (value == '') {
        value = 0;  
    dps.push(['\{ value: ' + Number(value) + ', name: \'' + key + '\' \}']);

var echartPie = echarts.init(document.getElementById('echart_pie'), theme);

//var datalabel = $("#cartdatalabel").text();
//var datachart = $("#cartdata").text();

    tooltip: {
        trigger: 'item',
        formatter: "{b} : {c} ({d}%)"
    legend: {
        x: 'center',
        y: 'bottom',
        //data: ['Email']
        //data: dps.key
    calculable: true,
    series: [{
        name: 'Source',
        type: 'pie',
        radius: '25%',
        center: ['48%', '38%'],
        // data: [{value: 335,name: 'Email'}]          

But I get the result is different, below is the image result. can help I not sure where is my code problem



I’ve edited your post for readability. When you enter a code block into the forum, remember to precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.


What do you expect to see versus what you are showing us in the image?

Also, do you a link to your full project?


I want the reult like below image

i use table to get the value push to js, because the data is dynamic


Can you post the table which the JS is using to create the chart?


under the chart is the table value i push to js



Your JS code has:

$("table.table_1 tr").each(function(){

Can you post the html code for the table referenced here?


HTML table

  <table class="table table-striped tbrecent table_1">
  <div id="detailschart" runat="server" ></div>

behind code c#

var totalcount = 0;
 totalcount = dtUser.Rows.Count;
 var listtable = "";
 for (var i = 0; i < totalcount; i++)
            listtable = listtable + "<tr><td>" + mag.nullDB2String(dtUser.Rows[i], "TOTAL_SOURCE") + "</td><td>"
                                    + mag.nullDB2String(dtUser.Rows[i], "SOURCE_DESC") + "</td></tr>";
 detailschart.InnerHtml = listtable;


I understand the back-end creates the table data, but surely you can copy/paste the table from Chrome developer tools so we can see it. The next best thing would be to post the url where we can see the page create the chart, then I can look at the table data myself. Basically, I just want to see the html which resides in the div element with id=“detailschart” after the c# code runs.


after run the code

<table class="table table-striped tbrecent table_1">

because the project is in localhost does not has url


Try changing:

dps.push(['\{ value: ' + Number(value) + ', name: \'' + key + '\' \}']);


dps.push({ value: Number(value), name: key});

Also, since you did not post what value the variable theme had in your code, I removed it on my end so I could get the chart to display.


Is work Thank you so much


If you do not actually need to table, then you could always have your C# code create a JSON object and have your JS use it instead of creating an html table and then creating the dps array.


Thank you for your suggestion. I will try