CODEWITHSUNDEEP
javascriptgoogle-visualization
DjangoSi
DjangoSi

Reputation: 395

Google Charts fontsize does not work

is it possible to create a Chart with google charts like this in the picture? My biggest Problem is to get the fontsize on the left smaller. The second problem is to get the time like 12:00PM 13:00PM 14:00PM and is it possible to select a timeframe like in the footer on the picture?

Google Chart

JsFiddle: http://jsfiddle.net/j29Pt/5/

google.load("visualization", "1", {
    packages: ["corechart"]
});
google.setOnLoadCallback(drawChart);

function drawChart() {
    var data = google.visualization.arrayToDataTable([
        ['Year', 'dummy', 'Sales'],
        [12, 0, 440],
        [13, null, 450],
        [14, null, 412],
        [15, null, 434]
    ]);

    var options = {
        series: {
            0: {
                targetAxisIndex: 0,
                visibleInLegend: false,
                pointSize: 0,
                lineWidth: 0
            },
            1: {
                targetAxisIndex: 1,
                visibleInLegend: false,
            }
        },
        colors: ['red'],
        backgroundColor: '#324149',
        chartArea: {
            backgroundColor: {
                stroke: '#fff',
                strokeWidth: 0
            }
        },
        hAxis: {
            gridlines: {
                color: '#37454c',
                count: 7
            },
            textStyle: {
                color: '#fff'
            }
        },
        vAxis: {
            gridlines: {
                color: '#37454c',
                count: 7
            },
            textStyle: {
                color: '#525b60',
                fontSize: '3'
            },
            minValue: 390
        },
        vAxes: {
            0: {
                textPosition: 'none'
            },
            1: {
                textPosition: 'in'
            }
        }
    }
    var chart = new google.visualization.AreaChart(document.getElementById('chart'));
    chart.draw(data, options);
}

Upvotes: 0

Views: 1609

Answers (1)

asgallant
asgallant

Reputation: 26340

Your fontSize problem is not due to your code, you have the "Normalized CSS" option checked in the "Fiddle Options" panel, which is messing with the font sizes in the chart. Uncheck that and your fonts will be the specified size. Incidentally, the fontSize suboption takes a number, not a string, so it should be fontSize: 3.

You can add buttons to your HTML that replicate the functionality of the time frame, but the ChartRangeFilter control performs a similar function without the need for any custom coding.

If you want your axis values formatted as time, you need to use either a "date", "datetime", or "timeofday" type domain (x) axis. You can then specify the formatting in the chart's hAxis.format option.

Upvotes: 3

Related Questions