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.

1 Like

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.

1 Like

Thank you for your suggestion. I will try