<script src="https://code.jquery.com/jquery-3.4.1.min.js" type="text/javascript"></script>

<link href="css/jquery.dvstr_jqp_graph.css" rel="stylesheet" type="text/css"/>
<script src="js/jquery.dvstr_jqp_graph.js" type="text/javascript"></script>

<div class="graph-conatainer" id="graph_01"></div>
<script>
    jQuery(document).ready(function($) {
        var color_blue = '#4c8ffc';
        var color_green = '#4f9100';
        var color_orange = '#e76100';

        $('#graph_01').dvstr_graph({
            title: '3DMark 2.7.6',
            description: 'Fire Strike 1920 x 1080 (Radeon RX 470 4GB)',
            unit: 'Score',
            better: 'Higher is better',
            separate: false,
            grid_wmax: 10000,
            grid_part: 10,
            points: [
                {
                    title: 'Combined',
                    color: color_blue
                },
                {
                    title: 'CPU',
                    color: color_green
                },
                {
                    title: 'Overall',
                    color: color_orange
                }
            ],
            graphs: [
                {
                    label: 'Phenom II X6 1055T',
                    color: [
                        color_blue,
                        color_green,
                        color_orange
                    ],
                    value: [
                        3069,
                        5999,
                        8252,
                    ]
                },
                {
                    label: 'Xeon E5450',
                    color: [
                        color_blue,
                        color_green,
                        color_orange
                    ],
                    value: [
                        2863,
                        5120,
                        7927,
                    ]
                },
                {
                    label: 'Core i5-3470',
                    color: [
                        color_blue,
                        color_green,
                        color_orange
                    ],
                    value: [
                        4047,
                        6489,
                        9143,
                    ]
                }
            ]
        });
    });
</script>

<div class="graph__block" id="graph_02"></div>
<script>
    jQuery(document).ready(function($) {
        var color_blue = '#4c8ffc';
        var color_red = '#cc0000';

        $('#graph_02').dvstr_graph({
            title: 'Blender 2.79b',
            unit: 'Seconds',
            better: 'Lower is better',
            type: 'time',
            points: [
                {
                    title: 'Samples 150',
                    color: color_blue
                },
                {
                    title: 'Samples 600',
                    color: color_red
                }
            ],
            graphs: [
                {
                    label: 'Phenom II X6 1055T',
                    color: [
                        color_blue,
                        color_red
                    ],
                    value: [
                        '02:19',
                        '09:09'
                    ]
                },
                {
                    label: 'Xeon E5450',
                    color: [
                        color_blue,
                        color_red
                    ],
                    value: [
                        '03:07',
                        '12:22'
                    ]
                },
                {
                    label: 'Core i5-3470',
                    color: [
                        color_blue,
                        color_red
                    ],
                    value: [
                        '01:28',
                        '05:48'
                    ]
                }
            ]
        });
    });
</script>