Echarts.js create dynamic data have issue

#1

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();

echartPie.setOption({
    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'}]          
        data:dps
    }]
});

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

jssdcsdcsdv

#2

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.

markdown_Forums

#3

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

Also, do you a link to your full project?

#4

I want the reult like below image
scacascasc

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

#5

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

#6

under the chart is the table value i push to js

wewefwefsdvdsv

#7

Your JS code has:

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

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

#8

HTML table

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

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;
#9

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.

#10

after run the code

<table class="table table-striped tbrecent table_1">
<tr>
<td>2</td>
<td>Email</td>
<tr>
<td>1</td>
<td>Roadshow</td>
<//tr>
</table>

vdvsdvsdvv
vdvsdvsdvv1366Ă—728 51.7 KB

because the project is in localhost does not has url

#11

Try changing:

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

to

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
#12

Is work Thank you so much

#13

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
#14

Thank you for your suggestion. I will try

#15