CODEWITHSUNDEEP
javascriptphpchartsgoogle-visualizationlinechart
N.K.
N.K.

Reputation: 415

Google Chart change vAxis value

I am trying to make a Google Chart. My data are taken from a MYSQL database. On vAxis i wanted to show time duration. For example a time duration like that: 4:40,85 That means 4 minutes and 40 seconds and 85 hundreds.

My solution was to turn the time duration at hundreds (of second), put it in a different column in database and show them at the Graph.

I did it but the problem is that i want to show at the axis value the original format (4:40,85) and not the hundreds (e.g. 6850)

The code i used is that below:

function drawChart() {
    var data_val = google.visualization.arrayToDataTable([

        ['Date', 'huns of secs'],
        <?php
        $select_query = "SELECT * FROM records WHERE id_Race='10' GROUP BY date_record ORDER BY date_record ";

        $query_result = mysqli_query($connection, $select_query);
        while ($row_val = mysqli_fetch_array($query_result)) {

            echo "['" . $row_val['date_record'] . "'," . $row_val['total_huns'] . "],";

        }
        ?>

    ]);

    var wrapper = new google.visualization.ChartWrapper({
        chartType: 'LineChart',
        dataTable: data_val,
        options: {
            'legend': 'bottom',
            'colors': ['#D70005'], 
            'chartArea': {left: 100, top: 10, width: 450}, 
            'vAxis': {
                format: '#,###', 
                'viewWindow': {max: 20000, min: 0},
                title: 'Hundreds'
            },
            'hAxis': {
                title: 'Date'
            },
            'pointSize': 6},
        containerId: 'columnchart'
    });

    wrapper.draw();
}

How can i turn hundreds (of second) in normal time duration format (4:40,85) and show that value instead of hundreds.

enter image description here

Thank you

Upvotes: 1

Views: 251

Answers (1)

WhiteHat
WhiteHat

Reputation: 61230

this can be done, but you will have to hard-code the vAxis values using the ticks option
(or work out some algorithm that builds the array of ticks)

ticks takes an array of values
for each value, you can use object notation
where v: is the value of the tick
and f: is the formatted value which is displayed...

vAxis: {
  ticks: [{v: 6850, f: '4:40,85'}]
}

Upvotes: 0

Related Questions