CODEWITHSUNDEEP
javascriptgoogle-visualization
Jeyhun Rahimov
Jeyhun Rahimov

Reputation: 3787

Double value in Google chart not working

Following google chart works for me, because values are integer:

google.load("visualization", "1", { packages: ["corechart"] });
    google.setOnLoadCallback(drawChart);
    function drawChart() {
        var Value1 = '@Model.Value1';
        var Value2 = '@Model.Value2';

        var tdata = new google.visualization.DataTable();

        tdata.addColumn('string', 'Years');
        tdata.addColumn('number', 'Values');
        tdata.addColumn({ type: 'string', role: 'tooltip', 'p': { 'html': true } });

        tdata.addRow(['1', Value1, createCustomHTMLContentYear1()]);
        tdata.addRow(['2', Value2, createCustomHTMLContentYear2()]);

        var options = { title: 'Value diagram for year' };

        var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
        chart.draw(tdata, options);
    }

createCustomHTMLContentYear1 and createCustomHTMLContentYear2 are my custom functions.

But, when values are in double type, it doesn't work. I used parseInt(Value1), but in that case, double value lose. For example, 0.3333 turns 0.

How can I change my code to show double values on diagram?

Thanks in advance.

Upvotes: 1

Views: 2887

Answers (1)

asgallant
asgallant

Reputation: 26340

Why are you inputting your numbers as strings?

var Value1 = '@Model.Value1';
var Value2 = '@Model.Value2';

should be

var Value1 = @Model.Value1;
var Value2 = @Model.Value2;

assuming that @Model refers to a server-side data element. Then you don't have to worry about type conversion.

If, for some reason, you must enter the numbers as strings, then the proper type conversion function is parseFloat, not parseInt:

tdata.addRow(['1', parseFloat(Value1), createCustomHTMLContentYear1()]);
tdata.addRow(['2', parseFloat(Value2), createCustomHTMLContentYear2()]);

You only need to do one of these, not both.

Upvotes: 1

Related Questions