Example 6


 

Synopsis

In this example, we plot temperature measures over a week. The Y-axis displays integer values. The X-axis shows abbreviated day names. Both axes have a title.

            
                    const temperatures = [25, 27, 22, 18, 16, 19, 22];
                    const days = [1, 2, 3, 4, 5, 6, 7];
                
            

Chart

The chart's context is a div element named 'chart'. Set the size as you want.

            
                    <div id="chart">

                    </div>
                
            

We create a line chart, give it a title and set its background color.

            
                    const context = document.getElementById('chart');
                    const chart = new LineChart(context);
                    chart.backgroundColor = '#464849';
                    chart.layout.title = {
                        text: 'Week Temperatures',
                        style: {
                            color: 'white',
                            fontSize: 16,
                            fontWeight: 'bold'
                        }
                    }
                
            

Data

We create and style a data series. Then we set the chart's data.

            
                    const ds = {
                        data: temperatures,
                        style: {
                            stroke: 'white',
                            strokeWidth: 3
                        }
                    };

                    chart.data = {
                        x: days,
                        y: [ds]
                    };
                
            

Customize

The X-axis is set to show short day names. The Y-axis shows temperatures with no decimal places. We give both axes a title and display all components in white. We also style the zooming area.

                
                    const ShortDayNames = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];

                    chart.layout.xAxis = {
                        visible: false,
                        title: {
                            text: 'Day of Week',
                            style: {
                                color: 'white',
                                fontSize: 16,
                                fontWeight: 'bold'
                            }
                        },
                        grid: {
                            style: {
                                stroke: 'white',
                                strokeDashArray: '1 5'
                            }
                        },
                        tick: {
                            text: (val) => ShortDayNames[val - 1],
                            style: {
                                color: 'white',
                                fontSize: 14,
                                fontWeight: 'bold'
                            }
                        },
                        spy: {
                            lineStyle: {
                                stroke: 'white'
                            },
                            rectStyle: {
                                cornerRadius: 1,
                                fill: 'white',
                                stroke: 'white'
                            },
                            textStyle: {
                                color: 'black'
                            }
                        }
                    };

                    chart.layout.yAxis = {
                        visible: false,
                        title: {
                            text: 'Temperature (°C)',
                            style: {
                                color: 'white',
                                fontSize: 16,
                                fontWeight: 'bold'
                            }
                        },
                        grid: {
                            style: {
                                stroke: 'white',
                                strokeDashArray: '1 5'
                            }
                        },
                        tick: {
                            text: (val) => val.toFixed(0),
                            style: {
                                color: 'white',
                                fontSize: 16
                            }
                        },
                        spy: {
                            lineStyle: {
                                stroke: 'white'
                            },
                            rectStyle: {
                                cornerRadius: 1,
                                fill: 'white',
                                stroke: 'white'
                            },
                            textStyle: {
                                color: 'black'
                            }
                        }
                    };
                    chart.interactivity.zoomRect = {
                        stroke: 'darkgreen',
                        strokeWidth: 2,
                        strokeDashArray: 'none',
                        fill: 'green'
                    };
                
            

Plot

We finally call the plot function to display the data.

                
                    chart.plot();
                
            

Putting it together

HTML

            
                    <div id="chart">

                    </div>
                
            

JavaScript

                
                    const temperatures = [25, 27, 22, 18, 16, 19, 22];
                    const days = [1, 2, 3, 4, 5, 6, 7];

                    const context = document.getElementById('chart');
                    const chart = new LineChart(context);
                    chart.backgroundColor = '#464849';
                    chart.layout.title = {
                        text: 'Week Temperatures',
                        style: {
                            color: 'white',
                            fontSize: 16,
                            fontWeight: 'bold'
                        }
                    }

                    const ds = {
                        data: temperatures,
                        style: {
                            stroke: 'white',
                            strokeWidth: 3
                        }
                    };

                    chart.data = {
                        x: days,
                        y: [ds]
                    };

                    const ShortDayNames = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];

                    chart.layout.xAxis = {
                        visible: false,
                        title: {
                            text: 'Day of Week',
                            style: {
                                color: 'white',
                                fontSize: 16,
                                fontWeight: 'bold'
                            }
                        },
                        grid: {
                            style: {
                                stroke: 'white',
                                strokeDashArray: '1 5'
                            }
                        },
                        tick: {
                            text: (val) => ShortDayNames[val - 1],
                            style: {
                                color: 'white',
                                fontSize: 14,
                                fontWeight: 'bold'
                            }
                        },
                        spy: {
                            lineStyle: {
                                stroke: 'white'
                            },
                            rectStyle: {
                                cornerRadius: 1,
                                fill: 'white',
                                stroke: 'white'
                            },
                            textStyle: {
                                color: 'black'
                            }
                        }
                    };

                    chart.layout.yAxis = {
                        visible: false,
                        title: {
                            text: 'Temperature (°C)',
                            style: {
                                color: 'white',
                                fontSize: 16,
                                fontWeight: 'bold'
                            }
                        },
                        grid: {
                            style: {
                                stroke: 'white',
                                strokeDashArray: '1 5'
                            }
                        },
                        tick: {
                            text: (val) => val.toFixed(0),
                            style: {
                                color: 'white',
                                fontSize: 16
                            }
                        },
                        spy: {
                            lineStyle: {
                                stroke: 'white'
                            },
                            rectStyle: {
                                cornerRadius: 1,
                                fill: 'white',
                                stroke: 'white'
                            },
                            textStyle: {
                                color: 'black'
                            }
                        }
                    };
                    chart.interactivity.zoomRect = {
                        stroke: 'darkgreen',
                        strokeWidth: 2,
                        strokeDashArray: 'none',
                        fill: 'green'
                    };

                    chart.plot();
                
            

Comments